Changing The Colors of the Theme

Hi @groovebricks,

After installing Simple Custom CSS plugin, add following CSS code in your site from the path Admin -> Appearance -> Custom CSS as displayed in this screenshot https://www.ads-software.com/plugins/simple-custom-css/screenshots/ and save it by clicking on “Update Custom CSS” button.

.post_type_label,
.author_bio_sidebar .social_box {
background-color: #003366 !important;
}
.widget {
border-top-color: #003366 !important;
}
.site-info,
.navbar_inner > div > ul > li > a:hover, .navbar_inner > div > ul > li.sfHover > a, .navbar_inner > div > ul > li.current-menu-item > a, .navbar_inner > div > ul > li.current_page_item > a, .navbar_inner > ul > li > a:hover, .navbar_inner > ul > li.sfHover > a, .navbar_inner > ul > li.current-menu-item > a, .navbar_inner > ul > li.current_page_item > a,  .navbar_inner > div > ul > li > a, .navbar_inner > ul > li > a{
border-bottom-color: #003366 !important;
}

Best Regards,

Howdy WPMU Dev!

I pasted the code that you gave me and changed the #003366 to the color I wanted but it doesn’t seem to be taking any effect on my site. The colors are still pink. Why is this?

Woops! Looks like I was doing something wrong. ?? It is now working! ??

Could you help me change the color of other elements in the site? I would like to change the color of:

1) Links of the sidebar
2) Post title color when mouse hovers on top
3) Bar that shows the path of the post. (Found in the individual post page at the very top)
4) Bar at the top of the author box
5) Bar at the top of the comments box
6) Color of the tags
7) Footer Menu color
8) Twitter and Facebook icon on the sidebar

You have now idea how thankful I am for your help. I’m finally starting to get a hang of what its like to customize a website.

Thanks In Advance,
Tomas

Hi Tomas,

Thank you for your reply.

Along with the previous CSS code, add following CSS code in your site.

ul.breadcrumb a,
.author_bio_sidebar .social_box a i,
#footer-nav a,
.post-title a:hover,
#secondary .widget a {
color: #005081;
}

#comments.comments-area,
.author-info {
border-top-color: #005081;
}

Cheers.

Thanks WPMU DEV! For the most part, it worked perfectly. You have no idea how much I appreciate your help. The only things that didn’t change were:

1) Bar that shows the path of the post. The one found at the top of an individual post and page.
2) Color of the tags

I pasted the code that you gave me but it doesn’t seem to apply to those two items. I’m starting to see a general trend with these bits of code. ??

Also, you could help me change the colors of the “Related Posts” links that appear under the post along with the “Post Comment” button?

Again, thank you very much for you help and dont worry, this will be the last time I ask you for bits of code. ??

-Tomas

Hi Tomas,

In the previous CSS code change #005081; to #005081 !important; so that it will apply to all the elements and to change the color of all others elements do the same thing as i have done previously.

You can learn more about the CSS from the following articles.
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/
https://www.w3.org/Style/CSS/Overview.en.html

Cheers.

Hmm, okay. May I ask how you find out the name of each element? Is there a fast and easy way to find out what code represent a specific part of the website?

Hi Tomas,

You can inspect the elements on your page by using following tools.

For Chrome Browser:
https://developers.google.com/chrome-developer-tools/

For Safari Browser:
https://developer.apple.com/safari/tools/

For Firefox Browser:
https://addons.mozilla.org/en-US/firefox/addon/firebug/

Cheers.