Changing Background Color

[hrsteel]

I have changed the color of my background to black but when I view my products they are listed alternately with a background of black then white. How can I make them all black? chromeworld.com.au

[Absolute]

As with all templating and CSS questions, firstly I suggest you use FireFox, and install FireBug. This will let you inspect your HTML elements, and see what CSS is affecting each element.

Here you want to edit /includes/templates/blue_strip/css/stylesheet.css, line 581, and change the background hex value, or remove it all together.

Absolute

[hrsteel]

Thanks for that, I installed FireBug but when I go to line 581 it is an empty line, blank. I used the Script tab in FireBug to find line 581. Is that the right way to do it?

[tony_sar]

are you looking at correct stylesheet.css ? that should be in includes /templates/ blue_strips/css folder.

[hrsteel]

Yes, public_html/includes/templates/blue_strip/css/stylesheet.css

/*

//

// +----------------------------------------------------------------------+

// |zen-cart Open Source E-commerce |

// +----------------------------------------------------------------------+

// | Copyright (c) 2003 The zen-cart developers |

// | |

// | http://www.zen-cart.com/index.php |

// | |

// | Portions Copyright (c) 2003 osCommerce |

// +----------------------------------------------------------------------+

// | This source file is subject to version 2.0 of the GPL license, |

// | that is bundled with this package in the file LICENSE, and is |

// | available through the world-wide-web at the following url: |

// | http://www.zen-cart.com/license/2_0.txt. |

// | If you did not receive a copy of the zen-cart license and are unable |

// | to obtain it through the world-wide-web, please send a note to |

// | [email protected] so we can mail you a copy immediately. |

// +----------------------------------------------------------------------+

// $Id: stylesheet.css 1223 2005-04-22 03:46:20Z ajeh $

*/



BODY {

background-color: #000000;

color: #F0F8FF;

margin: 0px;

margin-bottom: 10px;

padding: 0px;

font: 11px Verdana, Arial, sans-serif;

}



.centershop {

padding: 0px;

margin: 0px auto;

position: relative;

text-align: left;

width: 750px !important;

}



TD.main, P.main {

font-size: 11px;

line-height: 1.5;

}



A {

color: #428dff;

text-decoration: none;

}



A:hover {

color: #ffb062;

text-decoration: underline;

}



FORM {

display: inline;

}



/*HEADER CSS*/



TABLE.header {

background: #000000;

background-image: url(../images/header_bg.jpg);

background-repeat: repeat-x;

width: 750px !important;

background-color: #000000;

border-right: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-bottom: 1px solid #9a9a9a;

}



TABLE.headerNavigation {

background: #abbbd3;

background-image: url(../images/header_06.gif);

background-color: #000000;

border-right: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-bottom: 1px solid #9a9a9a;

width: 100% !important;

}



TD.headerNavigation {

width: 750px !important;

position: relative;

vertical-align:middle;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

font-weight: bold;

color:#F0F8FF;

letter-spacing:1px;

padding: 5px;

}



TD.breadCrumb {

font-size: 10px;

font-weight: bold;

color: #9a9a9a;

padding: 3px;

border-bottom: 1px dotted #9a9a9a;

}



TD.headerNavigation A, TD.headerNavigation A:visited, .sideBoxHeading A, td.footertop a, .centerboxheading A {

font-weight: bold;

color: #F0F8FF;

}



TD.headerNavigation A:hover, .sideBoxHeading A:hover, td.footertop a:hover, .centerboxheading A:hover {

color: #0000ff;

}



TR.headerError {

background: #ff0000;

}



TD.headerError {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

background: #ff0000;

color: #000000;

font-weight : bold;

text-align : center;

}



TR.headerInfo {

background: #00ff00;

}



TD.headerInfo {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

background: #00ff00;

color: #000000;

font-weight: bold;

text-align: center;

}



/*SIDEBOX CSS*/



.column_box_spacer_left {

height: 6px;

}



.column_box_spacer_right {

height: 6px;

}



.column_box_spacer_single {

height: 6px;

}



.column_left{

background: #000000;

padding: 2px;

}



.column_right{

background: #000000;

padding: 2px;

}



.boxText {

font-size: 11px;

line-height: 125%;

}





.sideBoxContent, .centerboxcontent {

line-height: 125%;

padding: 4px;

border-left:1px solid #F0F8FF;

border-right:1px solid #F0F8FF;

}



.sideBox, .centerbox {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #000000;

border:1px solid #9a9a9a;

margin-bottom: 15px;

}



.infoBoxNotice {

background: #FF8E90;

}



.infoBoxNoticeContents {

background: #FFE6E6;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}



TD.sideBoxHeading, TD.centerboxheading {

height: 20px;

padding-left: 5px;

}



.sideBoxHeading, .productListing-heading, .centerboxheading {

font-size: 10px;

font-weight: bold;

color: #F0F8FF;

padding: 3px;

}



TR.sideBoxHeading, TD.productListing-heading, TR.centerboxheading {

background: #abbbd3;

background-image: url(../images/header_06.gif);

}



.sideBoxFooter, .centerboxfooter {

background: #abbbd3;

background-image: url(../images/header_06.gif);

}



SPAN.newItemInCart {

color: #ff0000;

font-weight: bold;

}



/*center main section

-----------------------------------*/

TD.pageHeading, DIV.pageHeading, h1 {

font-size: 16px;

font-weight: bold;

color: #9a9a9a;

padding-top: 11px;

}



.center_column {

padding: 8px;

}

.main_page{

width: 750px !important;

background-color: #000000;

border-right: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-bottom: 1px solid #9a9a9a;

padding: 5px;

}



.plainBox, .plainbox-description {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #000000;

border: 1px solid #9a9a9a;

margin-bottom: 15px;

padding: 5px;

}



.plainBoxHeading {

font-size: 12px;

font-weight: bold;

padding: 11px 5px 5px;

}

/* footer

--------------*/



TABLE.footer {

background: #000000;

text-align: center;

font-size: 10px;

border-right: 1px solid #9a9a9a;

border-left: 1px solid #9a9a9a;

border-bottom: 1px solid #9a9a9a;

}



TR.footertop {

background: #abbbd3;

background-image: url(../images/header_06.gif);

font-size: 11px;

}



TD.footertop, TD.footerbottom {

padding: 5px;

}



/*miscellaneous areas

-------------------------------------*/

TD.infoBox, SPAN.infoBox {}



TD.cartBox {

background: #eff4f8;

font-size: 10px;

padding: 3px;

border: 1px dotted #ffb062;

}



TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #000000;

}



TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #eff4f8;

}



TD.productListing-data-description-odd {

background: #000000;

font-size: 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 12px;

border-bottom: 1px solid #9a9a9a;

}



TD.productListing-data-description-even {

background: #eff4f8;

font-size: 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 12px;

border-bottom: 1px solid #9a9a9a;

}



.errorBox { background: #ff797c; color: #000000; font-weight: bold; }

.stockWarning { color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { color: #70d250; text-decoration: underline; }

.productListing-heading {

border-bottom: 1px solid #9a9a9a;

}



TD.productListing-data {

font-size: 10px;

}



td.pageresults a {

color: #0000FF;

}



td.pageresults a:hover {

background: #FFFF33;

}

td.pageresults {

font-size: 10px;

}

TR.subBar {

background: #f4f7fd;

}



TD.smallText, SPAN.smallText, P.smallText {

font-size: 10px;

}



TD.accountCategory {

font-size: 13px;

color: #aabbdd;

}



TD.fieldKey {

font-size: 12px;

font-weight: bold;

}



TD.fieldValue {

font-size: 12px;

}



TD.tableHeading {

font-size: 12px;

font-weight: bold;

}



CHECKBOX, INPUT, RADIO, SELECT {

font-size: 11px;

}



TEXTAREA {

width: 100%;

font-size: 11px;

}



.greetUser {

font-size: 12px;

padding-top: 5px;

padding-bottom: 5px;

}



SPAN.greetUser {

color: #f0a480;

font-weight: bold;

}



TABLE.formArea {

background: #f1f9fe;

border: 1px solid #7b9ebd;

}



TD.formAreaTitle {

font: bold 12px Verdana, Arial, sans-serif;

}



SPAN.markProductOutOfStock {

color: #c76170;

font: bold 12px Verdana, Arial, sans-serif;

}



span.normalprice {

text-decoration: line-through;

}



SPAN.productSpecialPrice {

color: #ff797c;

}



span.productSpecialPriceSale {

color: #ff797c;

text-decoration: line-through;

}



SPAN.productSalePrice {

color: #FF0000;

}



SPAN.productPriceDiscount {

font-size: 10px;

color: #FF0000;

}



SPAN.errorText {

color: #ff0000;

}



.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }

.moduleRowSelected { background-color: #E9F4FC; }



.checkoutBarFrom, .checkoutBarTo { color: #8c8c8c; }

.checkoutBarCurrent { color: #F0F8FF; }



/* message box */



.messageBox { }

.messageStackError, .messageStackWarning { background-color: #ff797c; color: #000000; padding: 2px; border: 1px solid #9a9a9a; }

.messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }

.messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #FFFF00; }



/* input requirement */



.inputRequirement {

color: #ff0000;

font-size: 10px;

}



span.coming {

color: #ff797c;

}



/* checkout totals */

TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {

font-weight: bold;

}

TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-total-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}



/* product_info attribute comments */



.ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {

color: #ff0000;

font-size: 9px;

line-height: 1.0;

text-align : left;

font-weight: bold;

padding-top: 6px;

border-top: 1px solid #9a9a9a;

}



/* General alert span class */

TD.alert, SPAN.alert {

color: #FF0000;

font-weight: bold;

}



/* General alert span class */

TD.alertBlack, SPAN.alertBlack {

color: #F0F8FF;

font-weight: bold;

}



/* popup tables */

TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {

background-color: #000000;

margin: 6px;

padding: 6px;

font: 11px Verdana, Arial, sans-serif;

}



/* categories_description */

TABLE.categoriesdescription {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #D0D0D0;

border:1px solid #9a9a9a;

}



TD.categoriesdescription {

font-size: 11px;

line-height: 1.0;

}



/* categories box parent and child categories and extra links */

A.category-top, A.category-links {

color: #428dff;

text-decoration: none;

}

A.category-subs, A.category-products {

color: #428dff;

text-decoration: none;

}

SPAN.category-subs-parent {

font-weight: bold;

}

SPAN.category-subs-selected {

font-weight: bold;

}



/* attribute images table */

TABLE.products-attributes-images {

/* width: 100%; */

/* border: 1px solid #9a9a9a; */

float: left;

padding: 2px;

}

[tony_sar]

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #eff4f8;

}

[hrsteel]

Thanks very much. That worked perfectly. I have another question. My pages don't show a home button just a login button in the top left corner. How do I add a home button?