Body background stuck on green

[cspowers]

Howdy,

I've been using the "green on a light theme" setting for a while and yesterday just for fun I switched it to "pale blue on a light theme." Unfortunately, it didn't completely switch colors. The background color stayed green while the menu highlights etc switched to pale blue. I think the thing that didn't switch is the "body background". But I went to the "body background" tab of the theme skinning page and it says that it is set for the theme default.

I tried setting a custom color and then setting it back to the theme default, but no luck.

I am using suffusion 3.7.8. I have created a child theme but I have not overridden anything. The only thing I have done is add one custom template to use on one specific page. So I don't think anything in the child theme could be affecting this.

Any ideas what I should check to get this fixed? I've uploaded a screen shot so you can see the section that has stayed green.

Thanks
Calvin

[Colin]

Have you reverted back to green? If not all the green options are live on the website on my browser.

[sayontan]

Remove the @import line from the child theme's style.css file.

[cspowers]

This morning I did turn it back to green. But now I have changed it back to blue so you can see the mixed colors live.

[sayontan]

Did you follow my instruction above?

[cspowers]

Interesting.

I changed themes back from my child theme to the base suffusion theme and all the colors were blue as expected.

Next I removed the @import line from the css file and that seems to have helped. As far as I can tell the problem has disappeared. Thanks!

Will play around with it some more and see what I can determine.

Thanks again for the help!

[cspowers]

Oh and I switched back to the child theme as well.

So the net change is that I stayed with the child theme and removed the @import statement from the child theme style.css file and it seems to have fixed the problem.

I ran a few tests with and without the import statement turned on. It seems that anytime the import statement is turned on, the fixed green problem comes back.

At one point I switched to the base suffusion theme, set the theme to pale blue on light then switched to the child statement and set it to pale blue on light. Again, if the import statement was in the fixed green color came back. If the import statement is commented out, it works fine and I can swtich among themes no problem.

But here's what I don't understand. How is my theme working AT ALL if I have that import statement commented out?? Just curious. I don't know a thing about CSS. so it's a mystery to me.

[sayontan]

There is really no mystery here, and it has been documented several times in different places on this forum and elsewhere.

Given the complexity of the theme there is a hierarchy of stylesheets that is present. The first to be included is style.css, then depending on which skin you have selected, a bunch of other stylesheets gets included. E.g. for Pale Blue on a Light Theme you get style.css + skins/light-theme-pale-blue/skin.css, for Pale Blue on a Dark Theme you get style.css + skins/light-theme-pale-blue/skin.css + dark-style.css + skins/dark-theme-pale-blue/skin.css.

Now, if you are creating a child theme you have 2 options:
1. Include all stylesheets yourself (for which you have to know what the skin hierarchy is). You have to go into Back-end Settings -> Child Themes -> Inherit styles, then select "Don't inherit any stylesheet". In your child theme's style.css you have to include all the CSS files yourself.

2. Let the theme do the stylesheet inclusion. In this case go into Back-end Settings -> Child Themes -> Inherit styles, then select "Inherit all stylesheets corresponding to the theme selection". In your child theme's style.css you should not include any @import statements. The text in brackets for that option is incorrect - it corresponds to the previous version of the theme where there were some minification options in place.

All you are using the child theme is for specific functions, and very few stylesheet things (you really want to get all of Suffusion's stylesheets + some of your own functionaility). So you need the second option above (which is what is selected by default) and you shouldn't be putting in any import statements.

[sayontan]

But here's what I don't understand. How is my theme working AT ALL if I have that import statement commented out?? Just curious. I don't know a thing about CSS. so it's a mystery to me.

Simple - Suffusion does the inclusions for you.

[cspowers]

Thanks for the explanation of the stylesheets. I had forgotten that there is an option in the settings to tell suffsion to do the parent inclusion for me. SO yeah, I definitely need option 2 as described above. Because I don't want to change any of the style sheets. All I want to do is add a couple of additional templates.

Thanks for the helpful explanations.