CSS help needed

blackfushion · Member · Feb 17, 2017 at 12:02 pm
Copy link

Add topic to favorites
Hello, I am a newbie with wordpress. Recently switched from wix. The blog that I need help is http://www.blackfushion.com. I need help with the following, please?

How can I get the social media icons and search button to be at the top of the page, please?

I would like the menu borders to be two pink lines (top and bottom) without the grey shade. Also, how I can I change the font size and colour of the menu please?

How do I change the colour of the border that separates each post and widget to gold, please?

How do I change the widget font and colour, please?

I know this is a lot. I would be very grateful for any help that I can get. God bless.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 17, 2017 at 10:14 pm
Copy link
Hi there,

How can I get the social media icons and search button to be at the top of the page, please?

I see the search at the top left right now. The following will move the social icons from the top of your sidebar to the top right across from the search. I’ve also spaced the widgets out some to balance with the search.
```
#wpcom_social_media_icons_widget-6 {
	position: absolute;
	top: 30px;
	right:50px;
}
#wpcom_social_media_icons_widget-6 ul li {
	border-top: none;
	padding-right: 15px;
}
#wpcom_social_media_icons_widget-6 ul li:last-child {
	padding-right: 0;
}
```
I would like the menu borders to be two pink lines (top and bottom) without the grey shade. Also, how I can I change the font size and colour of the menu please?

The last two rules change the top menu border and thicker bottom header area border to pink.
```
#access li a {
	color: #cc0000;
	font-size: 120%;
}
#access .current-menu-item > a, #access .current_page_item > a {
	color: #00ee00;
}
#access {
	border-top-color: pink;
}
#branding {
	border-bottom-color: pink;
}
```
How do I change the colour of the border that separates each post and widget to gold, please?

I’m not really seeing a line separating posts and widgets. Are you talking about the line above the date on the posts?

The line between the content and the footer widgets would be this.
```
#supplementary {
	border-color: gold;
}
```
How do I change the widget font and colour, please.

Are you talking about the widget titles, or the text within the widgets themselves?

On changing fonts, as far as custom fonts go, you can only set and use two at Customize > Fonts, one for Headings and one for the Base font. You cannot assign other custom fonts than those two. You can set a standard font that is installed on all computer systems, but if you specify a font that is not on a visitor’s computer, then their browser will substitute the standard serif or sans-serif font.
blackfushion · Member · Feb 20, 2017 at 4:20 pm
Copy link
Thank you for your help.

I meant changing the colour of the widget title, please.

Also, how can I change the colour of the blog title tagline, please?
thesacredpath · Member · Feb 20, 2017 at 7:16 pm
Copy link
Hi there, for the colors, add the following and adjust as desired. I included a font size declaration on the widget titles since they were hard to read when so small. You can adjust that as desired, or delete it if you do not wish to change the size.
```
.widget-title, .widget-title a {
	color: #cc0000;
	font-size: 130%;
}
#site-title a {
	color: #cc0000;
}
#site-description {
	color: #cc0000;
}
```

No items found.