Changing background and text colors

[Donna]

Hi,

I would like to change the background color for the all category bar.

Also, the pre-header promo message bar.

Where would I make these changes?

Thank you.

[Matt Zimmermann]

Hi Donna,

For the navigation bar, you would edit your theme.css file and change the HEX color for the .navigation-bar entry. As for the pre-header promo message bar, are you referring to the "Need Help? Call..." section on the demo store [http://levels-theme.mivamerchantdev.com/]?

[Donna]

Hi Matt,

I was hoping for something I could do in the admin without going to ftp. I am just a store owner, not a developer. I just wanted to experiment with some colors. Thank you.

[lesliekirk]

I was hoping for something I could do in the admin without going to ftp. I am just a store owner, not a developer. I just wanted to experiment with some colors. Thank you.

You could play around with adding style to the HEAD Tag in the admin. Are you comfortable with trying that? In the HEAD Tag area add:

<style>

.pre-header {background-color: #ff0000;}

</style>

This will make the background bright red, change the color hex code to another of your choice. You can use this method to test and play around with it. Then once you get all the styles figured out, I would recommend that you create a separate CSS file (instead of editing a core file). You can link this file up but it will need to be FTP'd or you might be able to upload it via the admin. I'll have to get you some steps for that.

[Donna]

Hi Leslie,

How exciting! Thank you! I can have fun with this!

I would also like to change the color of the all categories area. There are two colors there. One color for the area that says all categories. The other area (or bar) has the home button etc.

Thanks again!

[lesliekirk]

Hi Leslie,

How exciting! Thank you! I can have fun with this!

I would also like to change the color of the all categories area. There are two colors there. One color for the area that says all categories. The other area (or bar) has the home button etc.

Thanks again!

Another way you can play with the CSS without even changing code is to use either the dev tools in your browser. Chrome, Firefox and Safari all have them. You can look at the CSS for an area, change (for example) the color tag for the area and see the results. If you like what you see, then you can add the style to the HEAD Tag.

[Donna]

Thank you!

[Donna]

Hi,

How do you change two or more areas. I tried this and it did not work.

<style>

.navigation-bar {background-color: #8b0000;} ; .pre-header {background-color: #8b0000;}

</style>

Thank you for your help.

[lesliekirk]

Hi,

How do you change two or more areas. I tried this and it did not work.

<style>

.navigation-bar {background-color: #8b0000;} ; .pre-header {background-color: #8b0000;}

</style>

Thank you for your help.

Odd question but you don't have a semi-colon between the two styles do you? If so, try removing it:

.navigation-bar {background-color: #8b0000;}
.pre-header {background-color: #8b0000;}

you can also try

.navigation-bar {background: #8b0000;}
.pre-header {background: #8b0000;}

[Donna]

Hi Leslie,

Thank you again!

Donna