Comment on Stallion Responsive Theme Recent Comments by SEO Dave.

Short answer no. The background colors aren’t added by the layout CSS file, they are added by the color CSS file. You have your color scheme set to empty, the empty color scheme isn’t a color scheme, it’s literally an empty CSS file which is why your colors are broken.

Unless you are building a color scheme as described at Stallion Responsive Colour Scheme Creator you shouldn’t set the color scheme to empty, if you do you will have to build an ENTIRE color scheme manually, just not a good idea when there’s a colour scheme creator (see link above) that doesn’t require understanding CSS.

The background image is loaded within the body tag and I’ve set lots of Stallion CSS ID’s and classes (CSS rules) to have a non-transparent background-color because otherwise it tends to look awful. IMO this sort of design (seeing a background image directly behind text) looks out of date and tends to make it hard to read the body text, it’s a dated design (1990’s design).

Probably the easiest solution is some custom CSS code like this.

<style type="text/css">
#wrap_stallion, #header_stallion2, #header_stallion_2011, #footer_stallion, .src_field, .src_field:focus, .post-meta, .commenthead
background-color: transparent;

Switch color schemes to one that’s closest to what you want, you’ll need to set a colour scheme (not empty) for this to work.

For testing under “Appearance” >> “Widgets” add a Text Widget to “Above Header Area” widget area (will work with any of the widget areas that are loaded sitewide) and paste the above code in the text widget.

You’ll find some of the background image is now transparent. The code above isn’t complete, but will point you in the right direction.

To complete the code you need to add more CSS ID’s and classes (it’s not hard to build the list).

Load one of the colour scheme CSS files like “/stallion-responsive/colors/style-basic-defaults.css” in a text editor (any will do to create the list).

Find instances of

background-color: #abcdef;

And find the CSS ID (ID’s start #) and Class (Classes start with a .) list for this rule and copy the ID/Class bit.

What this means is find a CSS rule that includes background-color: like here:

#wrap_stallion {
background-color: #FFFFFF;

Look for the line above background-color: which starts with a . or a # and copy it minus the { part. So for the above you would copy:


Find the next instance of background-color:

#header_stallion2, #header_stallion_2011 {
background-color: #FFFFFF;
background-repeat: repeat-x;
background-position: top;
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;

And again copy the ID/Class list minus the end { part. So for the above you would copy:

#header_stallion2, #header_stallion_2011

Add this to the last ID/Class line you copied, but first add a , and a space so the list looks like this:

#wrap_stallion, #header_stallion2, #header_stallion_2011

We are building a list of CSS ID’s and classes to have a transparent background color rather than the current not transparent output. Above we have three CSS ID’s.

Repeat until you’ve added all ID’s and classes that have a background-color which you want to be transparent (some you’ll not want to be transparent like the menu code near the bottom). In my test code I got as far as the line “.post-meta, .commenthead”.

I would suggest each time you add a new line of ID’s and classes you test the output (why we used a Text widget, quick way to test), if changing a background color to transparent isn’t the output you wanted remove those ID’s/classes and move on.

Using the above code you can set exactly which parts of the site will let your background image show through.

When you have your list of Id’s/classes you can either keep them in the text widget or add the CSS to a CSS file.

Have you tried the Colour Scheme Creator? You can build your own colour schemes without editing CSS files etc… my wife built some of the more colourful Stallion colour schemes (the ones “by Marie”) and my wife is not tech savvy (doesn’t know what CSS is). You could use the code I listed above (after you’ve built your ID/Class list) with a minor modification directly into the color scheme creator so your transparent CSS code is added to the CSS file.

If you add it to the custom CSS form it’s this format:

#wrap_stallion, #header_stallion2, #header_stallion_2011, #footer_stallion, .src_field, .src_field:focus, .post-meta, .commenthead
background-color: transparent;

You have some custom CSS already added, your other custom CSS like the H1, H2, H3 CSS code can either be added to the CSS box as well or you could modify the header (H1 etc…) fonts for your colour scheme, that sort of option to change the header fonts is part of Stallion.

BTW You should deactivate the Stallion SEO Plugin, those features are built into Stallion Responsive under the SEO Advanced Options page, so you don’t need the plugin.