Changing color of bars in header, footer, and on product category pages?

[dcfxking]

I did this when I first setup my zencart a couple years back and we now have chnaged our color scheme of our business. I have changed all the fonts, colors, and everything else using my stylesheets but cant seem to remember where it is where I change the color of these bars.


The bars I am referring to are the colored bars above and below the top section of pages where "Home", "My Account" the search box, etc are

AND

in the footer

AND

I belive these colored bars are also on product pages etc..

[gjh42]

I could just give you some of those, but it will work better for you to know how to find the tags yourself.

Get the Firefox Web Developer extension, and use the Information > Display Element Information button. It will show all the info you need about any element you click on; you can then take that to the stylesheet and edit or add the relevant selectors to style.

[dcfxking]

Thanks for the advice Glenn.

I downloaded the firefox extenstion.

Im a little confused as to how to use it to locate where to change the color attributes for these bars.

I found the td.headernavigation and td.footertop sections of my stylesheet_original css file but cannot seem to find wher exactly to change the color code.

Any suggestions?

[gjh42]

Stylesheet_original.css indicates that you have an old version of Zen Cart, like 1.3.0 or 1.3.0.1, and used the Classic template from that version. More recent versions have merged all style info into stylesheet.css, and the templates are no longer table-based, so I don't have a reference for what yours should look like.

That said, look for background-color: #xxxxxx; as that is the property you want to change.

[dcfxking]

Got most of the changes i needed fixed. The colors of the bars that I was referring to were actually controlled bya .jpg image that I had to edit called tile_back.jpg.

I am still having issues trying to remove a border around my footerbottom (the copyright text section) I have tried everyhting but cant seem to remove it. Any suggestions?

My site is here: here

My code for my footer section of my stylesheet is here:

/* footer
--------------*/

TABLE.footer {
  background: #000000;
  text-align: center;
  font-size: 10px;
  border-right: 0px solid #9a9a9a;
  border-left: 0px solid #9a9a9a;
  border-bottom: 1px solid #000000;
}

TR.footertop {
  background: #abbbd3 url('../images/tile_back.jpg');
  font-size:11px; background-image:url('../images/tile_back.jpg')
}

TD.footertop, TD.footerbottom {
  padding: 5px;
}





TD.footerbottom {
  background: #000000;
  color: #ffffff;
  border: 0px solid #9a9a9a;
  border-right: 0px solid #000000;
  border-left: 0px solid #000000;
  border-bottom: 0px solid #000000;
  font-size: 9px;
}

TD.footerbottom a {
  color: #ffffff;
}

TD.footerbottom A:visited{
  color: #ffffff;
}

[gjh42]

There is a table with class="footer" which (in the code) encloses the footerbottom element. Adding
.footer {display: none;}
to the stylesheet kills the little line, which is actually not part of either footertop or footerbottom.

[dcfxking]

Thanks for the reply Glen!

I added .footer {display: none;} to my css and it did nothing.

However because of your reply I searched for class="footer" in my developers tool kit and did some research in includes/templates/classic/common/tpl_footer.php to find there was a border=1 tag as an attribute in one of the tables.

Changed it to "0" and now its all set!!!!!!!

Thanks for helping me think a little deeper.

-Dave