Changing color of "social links header menu"

lesliegarza2013 · Member · Dec 7, 2016 at 10:52 pm
Copy link

Add topic to favorites
Hi,

I am hoping to change the color of the “social links header menu”

It is currently the black bar at the very top of my page where my social icons and search button are.

I would like for it to be a different color.

The blog I need help with is: (visible only to logged in users)
melindahelt · Staff · Dec 7, 2016 at 11:17 pm
Copy link
Hello

In order to change the colored bar, you’ll need to edit your site’s CSS. You’ll need to have a WordPress.com Business or Premium account in order to access that. You can read more about that at https://en.forums.wordpress.com/topic/learning-about-css-1

If you already have that set up, here’s the code that you’ll need to add to your custom CSS editor.

Please note, you didn’t specify which color you’d like to use, so I just picked a red color below. You can replace the hex color (the #D72A2A) with any other hex color that you wish. You can learn more about colors at http://www.quackit.com/css/css_color_codes.cfm

This will change the overall black bar
```
.site-bar{
    background-color: #D72A2A;
}
```
If you want to change the color of the lines that appear between the icons, use:
```
.site-social-menu ul li {
    border-left: 1px solid #fff;
}

.site-social-menu ul li:last-child {
    border-right: 1px solid #fff;
}
```
If you want to change the icon color, use:
```
.site-social-menu a{
	color: #fff;
	}
```
If you want to edit the colors used for the search icon and the box behind it, use: (wrapper is the background and :before is the icon)
```
.search-control-wrapper a{
	background-color: #D72A2A;
	}

.search-control:before {
    color: #fff;
}
```
If you want to change the background color if the buttons when you hover over them (currently that color is blue), use:
```
.site-social-media a:hover{
	background-color:#000;
	}
```
Hope this helps! Let us know if you need any additional help.
lesliegarza2013 · Member · Dec 7, 2016 at 11:28 pm
Copy link
Thank you so much Melinda! I so appreciate you!! This was exactly what I needed and more that I didn’t even think of!
melindahelt · Staff · Dec 7, 2016 at 11:59 pm
Copy link
Editing CSS can sometimes be like that story “If you give a mouse a cookie” — you change one thing, and that leads to something else and something else :)

Good luck with your site!
lesliegarza2013 · Member · Dec 9, 2016 at 6:17 pm
Copy link
Hi Melinda-

Sorry to bug you…I am trying to change the color of the social media icons. When I insert the code from above, only the color of the Instagram and WordPress icons change. The twitter and facebook stay white.

Any suggestions?
melindahelt · Staff · Dec 9, 2016 at 8:16 pm
Copy link
Hmm…

That’s odd that it’s only impacting some of the icons.

Try adding !important to the end of the css. For example
```
.site-social-menu a{
	color: #6c6c6c !important;
	}
```
lesliegarza2013 · Member · Dec 12, 2016 at 11:46 pm
Copy link
That worked thank you!
lesliegarza2013 · Member · Dec 12, 2016 at 11:54 pm
Copy link
Melinda-

A few more things…

Is it possible to change the font of the entire blog?

Can we change the color of the “read more” buttons?

We currently have the “follow blog” widget on the main side bar and would like to change the background color and font color. It looks like there might even be an outline color that we would need to change as well. Hoping for a white background and 6c6c6c font.
melindahelt · Staff · Dec 14, 2016 at 12:43 am
Copy link
Here’s some information on changing your fonts: https://en.support.wordpress.com/custom-fonts/

You’ll need to edit the colors of the following for your button. The colors can be the same or they can be different. This controls the button itself plus a border at the bottom.
```
.more-link {
    border-bottom-color: #004777;
    background-color: #005187;
}
```
As for the sidebar box, you’ll need to edit the following (the color controls the text while the border/background… controls those items):
```
.widget_blog_subscription {
    border-color: #020202;
    color: #fff;
    background-color: #6c6c6c;
}
```
You are certainly welcome to ask for additional help here, but if you’d like to learn how I’m figuring out which sections to edit, here’s a few resources for you.

I open your website and use the Inspector with the Chrome Developer’s Tools (it’s free right within the Chrome browser). Here’s a few videos that explain the process: https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

No items found.