Responsive Theme Background Colour

[feemish]

If you change the background colour as per the instructions in SellerDeck-2014-Responsive-Design-guide;

To be able to change your colour scheme of your site go to:
Design > Themes > Advanced Theme Configuration > Color Scheme

...Other Colours Explained
- Background: The area outside of the website content

The background colour does change.. but so does the product area colour as well as some buttons.

See attached.

Does anyone know why this doesnt work?( Or why it does work but not in the way expected?) and how to get a background colour but keep the product area and buttons colour)

[Mike Hughes]

The background colour variable BGcolor is used in many places in the core stylesheet such as the checkout table borders and some buttons.

Your only real option is to change the color variable used in the places you don't want affected.

[feemish]

thanks for the reply.

So the info in the SellerDeck-2014-Responsive-Design-guide;

...Other Colours Explained
- Background: The area outside of the website content

is incorrect?

Oh. Thats not very helpful
Thats a newly published guide as well.

Your only real option is to change the color variable used in the places you don't want affected.

Would it be easier to overide the actual background colour. Ie dont use BGcolor for the Background colour? Doea anyone know where I would change that... I expect in the css.

[Mike Hughes]

Would it be easier to overide the actual background colour. Ie dont use BGcolor for the Background colour? Doea anyone know where I would change that... I expect in the css.

That would probably be easier.

You'll need to make the changes in the 'current stylesheet' for your site and probably also in the core stylesheet which can be found in Design>Library>Theme Stylesheets>Core Styles.

If you do a 'find' for BGcolor you can then decide in each instance what it affects and whether to change it.

[feemish]

thanks Mike. Makes it easier when you have someone to bounce your thoughts off.

[feemish]

Yes indeed.

[feemish]

I cant work out which is easier.. to change the actual background colour.. or change the variables for the other areas.. Where would I do that? In the various style sheets? I can see that being laborious.

[malbro]

I cant work out which is easier.. to change the actual background colour.. or change the variables for the other areas.. Where would I do that? In the various style sheets? I can see that being laborious.

On the smart theme you can change the outer background colour, i.e. the stripes down each edge by editing the css.
Open Stylesheet using the 'CurrentStylesheet' button on the design page.

scroll down to around line 30 and change the line to
#wrapper {background-color: <actinic:variable name="PaletteBG" />; width:100%;}, this sets the background for the site, not the body setting. This will also change the top bar background but leave a small block of another colour.

Move to line 36 and change the .subheader setting to
.subHeader {background-color: <actinic:variable name="Palette2" />; min-height: 45px; padding:1em 0 0;}, the min-height ensure that the div covers the complete area correctly.

You can use any colours you want for this or select a different pallette number to suit your theme.

I also often change the default settings for the navigation bar settings as in my view they use some odd pallette choices (background for the forms and palette background as the top and bottom limit for the gradient. In my view palette1 and palette2 makes a lot more sense. You can find these settings around line 167 .navigation-bar, you will find another set of settings around line 746 for smaller screens.

[feemish]

thanks very much for this malbro!

I changed the wrapper colour and it works fine.
One issue I have though is that when I do change the wrapper (in this example to black) the background of the mini menu options (when you press 'categories' on a small screensize (see attached image)) appears black as well.
Do you know how to change the colour of the mini menu dropdown background?

[malbro]

thanks very much for this malbro!

I changed the wrapper colour and it works fine.
One issue I have though is that when I do change the wrapper (in this example to black) the background of the mini menu options (when you press 'categories' on a small screensize (see attached image)) appears black as well.
Do you know how to change the colour of the mini menu dropdown background?

I am assuming you are working with the Smart Theme, in this theme the Mini Menu is derived from the main navigation, basically the content of the mini menu comes from the layout 'Main Menu Bar' and for this there are three built in possibilities
Bulleted Brochure Page List
MegaMenu
Info Pages

All of these use the css class menuFlex but they also have an id which can be brochure-menu or mega-menu. If you are using mega-menu which is the default then the background settings are in the Current Stylesheet around line 198, there are a number of items in this area all related to background colours. Look for #mega-menu or #brochure-menu, generally the css is common to both.

[feemish]

thanks..

[malbro]

thanks for the reply.
Would it be easier to overide the actual background colour. Ie dont use BGcolor for the Background colour? Doea anyone know where I would change that... I expect in the css.

You can also change the background colour using

 html {
	background-color: #0c76b5;
}

just place this at the very end of the Current Stylesheet after the end of the blockif.

Works with both themes but haven't tried setting a background image yet