WordPress Theme Background Colour and Child Themes

Comment on Stallion Responsive SEO Theme Layout Options by SEO Dave.

On the Appearance >> Background page I’ve not looked into how the Background Color setting works in detail, I added the feature for the background image upload feature.

Gave it a quick check and the setting is working, when you view source of the home page for example you’ll find the background colour code, but it’s not overriding the background colour from the css files.

It’s because I’ve used gradient code and the WordPress background colour code isn’t the same format, will have to see if there’s a way to override it, hmm wonder if I could add a gradient override that would be a nice feature.

If you look in the Delicate css file at the top you’ll find:

body {
background: #EDEEEF;
background: -moz-linear-gradient(#EDEEEF, #EDEEEF);
background: -o-linear-gradient(#EDEEEF, #EDEEEF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDEEEF), to(#EDEEEF));
background: -webkit-linear-gradient(#EDEEEF, #EDEEEF);

If you wanted the ability to use the WordPress background colour changer you’d delete

background: -moz-linear-gradient(#EDEEEF, #EDEEEF);
background: -o-linear-gradient(#EDEEEF, #EDEEEF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDEEEF), to(#EDEEEF));
background: -webkit-linear-gradient(#EDEEEF, #EDEEEF);

Funnily enough I’ve not used gradients in Delicate, kept the code in the file for others to adapt :-) You can see the colour code sets are the same, if you want a gradient you change either the left or the right one and I left them the same so no gradients.

If you want a Delicate colour scheme via a child theme that completely overrides the parent Delicate colour.

Copy

/stallion-seo-theme/colors/style-delicate.css

and the folder plus contents of

/stallion-seo-theme/colors/images/delicate/

to the same location in the child theme, if you’ve kept the same folder name for the example child theme

/stallion-child-example/colors/style-delicate.css 
/stallion-child-example/colors/images/delicate/

The child theme will automatically use /stallion-child-example/colors/style-delicate.css because it exists. As a side note you copy the image folder /stallion-seo-theme/colors/images/delicate/ over as well because the css files reference /images/delicate/imagename.gif and not the theme folder name.

The above is just overriding current color schemes, if you copy a file from parent Stallion to child Stallion the child file will be used you can then edit the child version without touching parent Stallion. Same is true for image sets as well as long as you copy entire sets (only the first image is checked and other images of the set are assumed to be within the child theme as well).

If you want to be more adventurous you can add you own css files.

Lets say you wanted a colour scheme called Dark Delicate because you’ve given Delicate a darker look.

You’d copy

/stallion-seo-theme/colors/style-delicate.css

and the folder plus contents of

/stallion-seo-theme/colors/images/delicate/

as described above into the child theme folder, but rename them.

/stallion-child-example/colors/style-dark-delicate.css 
/stallion-child-example/colors/images/dark-delicate/

Edit style-dark-delicate.css to your needs making sure you change the file locations in the CSS from images/delicate/ to images/dark-delicate/

Now edit ttk_child_functions.php within the Child theme folder

and either change the example code (this bit “|example-st|Example Colour below”) or add to it like this

# st_themecolor - Colours Options - Stallion Theme Colour Scheme
'separator3' => '<h3><u>Child Colour Schemes</u></h3>{separator}##Override Stallion Colour Option',
'stchild_themecolor' => '<strong>Stallion Theme Colour Scheme</strong> {drop|stdefaults|Use Original Options|example-st|Example Colour|delicate-dark|Delicate Dark} ##<br />Choose a Stallion Child Theme colour.',

If you compare the above to your file you’ll see I only added “|delicate-dark|Delicate Dark”, that’s a new dropdown menu option added to colour schemes, the first bit has to match the new css file name (style-********.css) and the folder name.

And change the function stc_child_colours code lower down to this

function stc_child_colours() {
$stch_colours1 = array(
array( 'name' => 'Example Colour', 'value' => 'example-st', ),
array( 'name' => 'Delicate Dark', 'value' => 'delicate-dark', ),
);

For the above I’ve edited the commented out code to my needs.

What we’ve done with the first code change is add a new option to the Child Theme Option page under the Colour Scheme dropdown menu, you’ll have a setting “Delicate Dark” and in the second code change replicate this setting for the post/page edit screens override meta box settings.

Since I’m making just over a dozen child themes (working on number 4, have 13 in total for sale) I’ve made myself a ‘master’ child theme that holds all the settings in one child theme folder for my use. You can do the same with purchased child themes or child themes you make so you only have one child theme to install on all your sites IF you want access to every image set you buy/create.

I’ve barely scratched the surface of what’s possible because when I add a new feature it will be added to Stallion main, I’ll be using child themes for more image sets, colour schemes and layouts. Main Stallion is already too big (almost 10MBs and I don’t want to hit 10MBs) and I get a lot of support requests it won’t install because so many hosts have their max upload file size set at under 2MBs (it’s 2012 hosts, increase it!!!). My Master Stallion Child Theme is already 15MBs in size from the 13 new image sets for the child theme niches I’m making.

David