Light / Dark Body Style & Page Colour

[peterfitzie]

Hi Jason,

Great theme. The dark body style looks great with the way I have my home page set out, as it contains a number of images and strong colours. However on the other pages which are much more text heavy, I think the light style works better, text is easier to read etc.

Is there a way to deploy the dark body style for just the home page and the light style to the rest of the site!?

Alternatively, I was looking at changing just the colour of the other individual pages (so basically a lighter colour page would sit on a dark background) –

I used firebug to find the relevant CSS class to change – “element-inner” in dark.min.css. The only problem is I also have to change the font colour so that text is readable on a dark background, which is fine, but obviously it changes the font colour on the home page also and then the few areas of text that are on the home page become unreadable.

I hope that all makes sense …

Any ideas!? I suppose it would be easiest if there was any way to apply the dark background to the home page and the light background every other page…

Thanks in advance for any help.
Peter.

Topic

[Jason Bobich]

Hi,

There is no feature in the theme for this, and so this will only be possible through your own child theme customizations.

These are all just theme options that get pulled to do various things when some value is pulled. If you look through the theme files, you’ll see any time an option value is pulled, it’s done with themeblvd_get_option(), and if you look in that function, you’ll see a filter “themeblvd_get_option” on the returned value that you can utilize.

I think something like this from your child theme’s functions.php should get you started.

function my_get_option( $val, $key ) {

	if ( $key == 'body_style' && is_front_page() ) {
		$val = 'dark';
	}

	return $val;
}
add_filter('themeblvd_get_option', 'my_get_option');

… This would assume that you’ve got the “light” body style set for your whole site.

And this method could be expanded to be used for individual pages, or whatever else you want. Notice I used is_front_page() to see if it’s your homepage (assuming you have a static front page set), but there are tons of other WordPress conditionals you can use to look for other kinds of pages, to manually change the option values for.

https://codex.wordpress.org/Conditional_Tags

If you get into messing with other options and values, it would be helpful to look at /includes/options.php of the theme so you know what all the options keys and values are.

[peterfitzie]

Thanks for that Jason –

In the end I just changed the page background colour in dark.min.css which worked fine.

I then went to change the primary text colour and header colour to a shade of grey that would work ok on both light and dark backgrounds – but these other changes to the dark.min.css file don’t seem to have any impact on the site itself.

Here’s what I have…

body{color:#B0AEAE;}h1,h2,h3,h4,h5,h6{color:#B0AEAE;text-shadow:0px 0px 0 #000;}

Changes show up fine when made through a live editor, leading me to think I am changing the correct hex codes, but when I save a new dark.min.css file and upload it to replace the old, nothing changes for some reason.

At first i thought it was to do with permissions, but i’ve adjusted the permissions to match all the other .css files

Perhaps the text colour is also controlled by another .css file that supersedes dark.min ?

Many thanks,
Peter.

[Jason Bobich]

Assuming you’re updating the correct file on your server, if I had to guess, I would say you’re probably not clearing your web browser cache when viewing your site after updating the file. It’s possible that the file isn’t updating on your server right away, as some server setups have caching mechanisms in place. But I’ve only ran into this 2 or 3 times ever with customers. Generally, people that are new to CSS don’t realize they have to clear the browser cache after updating any asset, like a CSS file.

But, I have to warn you that the path you’re going down is not a good one, and not one I can recommend or support. You should never be editing files directly in the theme, especially for such basic elementary CSS changes. There’s just no reason to, in all honesty. All of your edits should come from a child theme. By making edits directly to the theme, you’re essentially locking yourself (or whoever has to manage your site in the future) into not being able to update the theme. This may seem not that important now, but in a year from now, it will be.

In this case, simply take your line of CSS that you’re using to make changes and place it in your child theme’s style.css. The benefit of this is that all of your CSS changes are in one place, organized how you want, and will remain when you update the theme. And in our framework, when you use a child theme, the style.css is already setup to be included automatically for you, and in a place where it will proceed all other CSS of the theme, allowing you to override potentially any other CSS in the theme.

Child theme intro video: https://vimeo.com/70832266

Switching to a child theme after you’ve started building your website: http://support.themeblvd.com/forums/topic/switching-to-a-child-theme-after-youve-already-started-building-your-website/

Here’s my typical spiel on CSS changes:

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

[Author]

Replies