Docs

[Vikas R]

Hi, I want to apologize if this has been asked before. I just wanted to make sure I don’t try something that was meant for someone else’s website and break mine due to differences in the way they’re configured.

My website: http://www.gamertribute.com

I use the Icon stack and I use a white background (in the body posts and pages) with black text. It’s the traditional color scheme and seems to be built into the Stack. I don’t think I can change it through the Customizer –> Typography or Layout/Design.

http://i.imgur.com/XOROtmo.jpg
This is an example post from my site to show the white background with black text.

What I would like to try is to invert the color scheme so that it is a black background with white text (or even slightly gray text). I have also considered using a light gray or creme color, this includes the right-hand sidebar and the Header element.

Is there a way to do this please? I’d like to start with a dark background with white text. I would also like to change the right-hand sidebar’s color to a very light gray/creme color. The problem with pure white backgrounds is it can cause eye strain on monitors and I want to create some contrast between the main body content and the sidebar.

Thank you.

[Darshana]

Hi there,

Thanks for writing in! Follow the example below to apply the changes only to your single posts. You can add this under Custom > CSS in the Customizer.

.single-post .site {
    background-color: #000000;
}

.single-post .entry-title {
    color: #ffffff;
}

.single-post .p-meta {
    color: #ffffff;
}

.single-post .entry-content.content > p {
    color: #ffffff;
}

.single-post h1, .single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6, .single-post .h1, .single-post .h2, .single-post .h3, .single-post .h4, .single-post .h5, .single-post .h6, .single-post h1 a, .single-post h2 a, .single-post h3 a, .single-post h4 a, .single-post h5 a, .single-post h6 a, .single-post .h1 a, .single-post .h2 a, .single-post .h3 a, .single-post .h4 a, .single-post .h5 a, .single-post .h6 a, .single-post blockquote {
    color: #ffffff;
}

.single-post .entry-content.content ul li {
    color: #ffffff;
}

Similarly you can implement CSS rules to your other specific pages accordingly.

Hope that helps.

[Vikas R]

First of all, thanks a ton for the code. I implemented it and it worked.

I would really appreciate it if I can get a code to change the background color of the right-hand Sidebar, Header, and Page elements please? The code provided by you only affects Posts (and not Pages). I need to consider adjusting the colors for the Sidebar, Header, and Pages for the sake of contrast. I am very sorry for any inconvenience. I have tried looking online on how to affect the other specific class elements but could not find what works here. I’d rather not break the site.

Thanks in advance!

Respectfully,
Vik

[Nico]

Hi There,

Happy that the code shared is working great.

Would you mind sharing us the URL and Screenshot of the concern changes so that we could suggest the best code of the customization.

Thank you so much.

[Vikas R]

Thank you. I was actually able to figure out the code for Pages also and used the same format given to me by Darshana. I also determined that a dark background is not a good fit for my site (at this time anyway) so I went with a very light gray scheme and kept everything else the same.

Therefore, at this time, all I need are the codes for the Header and Sidebar only, including backgrounds and text.

Here’s a URL:
http://www.gamertribute.com/northrend-atlas/valgarde/

Example image:
http://i.imgur.com/6z5vUro.jpg

The Sidebar I refer to is on the right hand side and is vertical.

The Header is above (the masthead area), basically the blank space behind the “G” logo.

Thanks again and I appreciate the help so far.

[Christopher]

Hi there,

Please add this code :

.x-logobar, .x-navbar, .x-sidebar {
    background-color: #333333;
}
.x-sidebar li a, .x-sidebar .h-widget {
    color: #fff;
}

Hope it helps.

[Vikas R]

Thank you so much! This will help me a great deal when customizing my site’s color scheme.

Respectfully,

Vik

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts