Forums / Templates, Stylesheets, Page Layout / Change 'Sale' red color in sidebox to black but leave main center 'Sale' txt as red

Change 'Sale' red color in sidebox to black but leave main center 'Sale' txt as red

Started by oavs on 5 Dec 2008, 9:02 AM · Views: 5,462

Results 1 to 3 of 3
5 Dec 2008, 9:02 AM
#1
oavs avatar

oavs

Totally Zenned

Join Date:
Jan 2006
Location:
Downunder - QLD - Gold Coast
Posts:
921
Plugin Contributions:
0

Change 'Sale' red color in sidebox to black but leave main center 'Sale' txt as red

How can I change the side box where I have in red fonts says 'Sale $100 You save 10%' to black or any other color but I still want the centerColumn (the main ) area same text as is - red

Everytime I do some thing itgs stuffed up. CAn anyone please suggest.

here is my CSS file

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2008 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
*/

body{
   margin: 20px  0 0 0 ;
   padding: 0;
   text-align: center;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 62.5%;
   color: #000000;
   background-color: #000000;
   background:url(../images/bg.jpg) center top fixed;
   background-repeat: repeat;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
   color: #333333;
   text-decoration: none;
   }

a:visited {
   color: #999999;
   text-decoration: none;
   }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
   color: #999999;
   }

a:active {
   color: #333333;
   }

h1 {
   font-size: 1.5em;
   color: #999999;
   }

h2 {
   font-size: 1.4em;
   }

h3 {
   font-size: 1.3em;
   }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
   font-size: 1.1em;
   }

.biggerText {
   font-size: 1.2em;
   }

   
h1, h2, h3, h4, h5, h6 {
   margin: 0.3em 0;
   }
h1#productName{
   font-family: Trebuchet MS;
   font-weight: bold;
   margin-top: 15px;
}

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
   position: relative;
   }
*html .centerColumn {
   height: 1%;
   }
*/

CODE {
   font-family: arial, verdana, helvetica, sans-serif;
   font-size: 1em;
   }

FORM, SELECT, INPUT {
   display: inline;
   font-size: 1em;
   margin: 0.1em;
   }

TEXTAREA {
   margin: auto;
   display: block;
   width: 95%;
   }

input:focus, select:focus, textarea:focus {
   /*background-color: #333333;*/
   	background-color: #CCCCCC;
   }

FIELDSET {
   padding: 0.5em;
   margin: 0.5em 0em;
   border: 1px solid #cccccc;
   }

LEGEND {
   font-weight: bold;
   padding: 0.3em;
   color: black;
   }

LABEL, h4.optionName {
   line-height: 1.5em;
   padding: 0.2em;
   }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
   margin: 0.5em 0.3em;
   }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
   float: left;
   }

LABEL.inputLabel {
   width: 9em;
   float: left;
   }

LABEL.inputLabelPayment {
   width: 14em;
   float: left;
   padding-left: 2.5em;
   }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
   width: 11em;
   float: left;
   }

#checkoutPayment LABEL.radioButtonLabel {
   font-weight: bold;
   }

P, ADDRESS {
   padding: 0.5em;
   }

ADDRESS {
   font-style: normal;
   }

.clearBoth {
   clear: both;
   }

HR {
   height: 1px;
   margin-top: 0.5em;
   border: none;
   border-bottom: 1px solid;
   border-bottom-color: #666666;
   }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
   line-height: 1.8em;
   padding: 0.2em;
   border: 1px solid #9a9a9a;
   }

.messageStackWarning, .messageStackError {
   background-color: #ff0000;
   color: #ffffff;
   }

.messageStackSuccess {
   background-color: #99FF99;
   color: #000000;
   }

.messageStackCaution {
   background-color: #FFFF66;
   color: #000000;
   }

/*wrappers - page or section containers*/
#mainWrapper {
   margin: 0 auto;
   padding: 0;
   text-align: left;
   width: 900px;
   vertical-align: top;
   border: 1px solid #dddddd;
   background-color: #1C1C1C;
   border-color: #1C1C1C;
}
#headerWrapper{
   margin: 0;
   padding: 0;
   background-color: #1C1C1C;
}
#headerWrapper{
   margin: 0;
   padding: 0;
   background-color: #1C1C1C;
}

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
   margin: 0em;
   padding: 0em;
   }
#contentMainWrapper{
   margin: 5px auto;
   padding: 0;
   border-collapse: collapse;
   border: none;
   width: 100%;
   /*background-color: #DFDFDF;*/
   background-color: #FFFFFF;
}
#logoWrapper { 
   margin: 0; 
   padding: 0; 
   width: 100%; 
   display: block; 
   background: url('../images/header-bg.jpg') center no-repeat; 
   height: 270px; 
   }
#logo { padding: 30px 0 10px 40px; }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
   margin: auto;
   } 
#navColumnOneWrapper, #navColumnTwoWrapper {
   margin-left: 0.5em;
   margin-right: 0.5em;
   }
   
#tagline {
   color:#000000;
   font-size: 2em;
   text-align : center;
   vertical-align: middle;
   }

#sendSpendWrapper {
   border: 1px solid #cacaca;
   float: right;
   margin: 0em 0em 1em 1em;
   }

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
   margin: 0;
   width: 47%;
   }

.wrapperAttribsOptions {
   margin: 0.3em 0em;
   }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
   margin: 0em;
   font-size: 0.9em;
   }
.navNextPrevList {
   display: inline;
   white-space: nowrap;
   margin: 0;
   padding: 0.5em 0em;
   list-style-type: none;
   }
#navMainWrapper{
   margin: 0 0 3px 0;
   color: #3a3a3a;
   width: 100%;
   background-image: url(../images/navMain.gif);
}
#navSuppWrapper, #navCatTabsWrapper {
   margin: 0em;
   /*background-color: #FF0000;*//**/
   padding: 0.5em 0.2em;
   border-top: 1px solid #cdcdcd;
   border-bottom: 1px solid #cdcdcd;
   font-weight: bold;
   color: #666666;
   /*height: 1%;*/
   background-image: url(../images/footer-bg.jpg);
   background-repeat: repeat-x;
   }
   
   #navSupp li a{ 
   margin: 0; 
   padding: 5px 10px; 
   text-decoration: none; 
   font-weight: normal; 
   color: #575757; 
   white-space: nowrap; 
   } 

#logoWrapper{
   margin: 0;
   /*background: #ebebeb;*/
   width: 100%;
   text-align: center;
   border-top: 1px solid #cdcdcd;
   border-bottom: 1px solid #cdcdcd;
   /*background-image: url(../images/footer-bg.jpg);*/
   background-repeat: repeat;
}
#navCatTabs li .category-top{ 
margin: 0; 
padding: 5px 10px; 
text-decoration: none; 
font-weight: bold; 
color: #8F9090; 
white-space: nowrap; 
}

#navCatTabs li .category-top:hover{ 
color: #EFC61F; 
background: #303030; /**/
border-bottom: 2px solid #ff6600; 
}
#navMain ul, #navSupp ul, #navCatTabs ul {
   margin: 0;
   padding: 0.5em 0em;
   list-style-type: none;
   text-align: center;
   line-height: 1.5em;
   }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
   display: inline;
   }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
   text-decoration: none;
   padding: 0em 0.5em;
   margin: 0;
   color: #ffffff;
   white-space: nowrap;
   }

#navCatTabs ul li a {
   color: #9a9a9a;
   }

#navEZPagesTOCWrapper {
   font-weight: bold;
   float: right;
   height: 1%;
   border: 1px solid #9a9a9a;
   }

#navEZPagesTOC ul {
   margin: 0;
   padding: 0.5em 0em;
   list-style-type: none;
   line-height: 1.5em;
   }

#navEZPagesTOC ul li {
   white-space: nowrap;
   }

#navEZPagesTOC ul li a {
   padding: 0em 0.5em;
   margin: 0;
   }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
   margin: 0.5em;
   }



#navMainSearch {
   float: right;
   margin: 0;
   padding: 3px;
   display: block;
   min-width: 100px;
   }
   
#navMainSearch form{ display: block; margin: 0; padding: 0; white-space: nowrap; }
#navMainSearch form input{
   display: inline;
   margin: 0;
   padding-top: 5px;
   min-width: 200px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #808080;
   margin-left: 5px;
}

#navBreadCrumb {
   padding: 0.5em 0.5em;
   background-color: #ffffff;
   font-size: 0.95em;
   font-weight: bold;
   margin: 0em;
   }

#navEZPagesTop {
   background-color: #abbbd3;
   background-image: url(../images/tile_back.gif);
   font-size: 0.95em;
   font-weight: bold;
   margin: 0em;
   padding: 0.5em;
   }

#navColumnOne, #navColumnTwo {
   /*background-color: transparent;*/
   }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
   vertical-align: top;
   }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
   padding: 0.5em;
   }
   
#productDescription{
   margin: 0em 1em 1em 0em ;
}

#productAttributes{
   float: right;
}


.alert {
   color: #FF0000;
   margin-left: 0.5em;
   }
.advisory {}
.important {
   font-weight: bold;
   }
.notice {}
.rating{}
.gvBal {
   float: right;
   }
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
   padding: 0.8em;
   }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
   font-size: 0.9em;
   padding-bottom: 3px;
   /*font-size: 10px;*/
   text-align: center;
   color: #999999;
   }

/*Shopping Cart Display*/
#cartAdd {
   float: right;
   text-align: center;
   font-weight: bold;
   font-size: 0.9em;
   margin: 1em;
   /*border: 1px solid #000000;*/
   padding: 1em;
   text-transform: uppercase;
   }
#productDetailsList{
   font-weight: bold;
   font-size: 1.5em;
   }
   
   
.tableHeading TH {
   border-bottom: 1px solid #9a9a9a;
   }

.tableHeading, #cartSubTotal {
   background-color: #e9e9e9;
    }

#cartSubTotal {
   border-top: 1px solid #cccccc;
   font-weight: bold;
   text-align: right;
   line-height: 2.2em;
   padding-right: 2.5em;
   }

.tableRow, .tableHeading, #cartSubTotal {
   height: 2.2em;
   }

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
   padding: 0.5em 0em;
   background-color: #FFFFFF;
   }
   
.cartUnitDisplay, .cartTotalDisplay {
   text-align: right;
   padding-right: 0.2em;
   }

#scUpdateQuantity {
   width: 2em;
   }

.cartQuantity {
   width: 4.7em;
   }

.cartNewItem {
   color: #33CC33;
   position: relative;  /*do not remove-fixes stupid IEbug*/
   }

.cartOldItem {
   color: #999989;
   position: relative;  /*do not remove-fixes stupid IEbug*/
   }

.cartBoxTotal {
   text-align: right;
   font-weight: bold;
   }

.cartRemoveItemDisplay {
   width: 3.5em;
   }

.cartAttribsList {
   margin-left: 1em;
   }

#mediaManager {
   width: 50%; 
   margin: 0.2em;
   padding: 0.5em;
   background-color: #333333;
   border: 1px solid #003D00;
   }
.mediaTitle {
   float: left;
   }
.mediaTypeLink {
   float: right;
   }

.normalprice, .productSpecialPriceSale {
   text-decoration: line-through;
   }

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
   color: #ff0000;
   }
   
.productSalePrice {
   font-size: 1.2em;
   font-weight: bold;

}	

.orderHistList {
   margin: 1em;
   padding: 0.2em 0em;
   list-style-type: none;
   } 

#cartBoxListWrapper ul, #ezPageBoxList ul {
   list-style-type: none;
   }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
   margin: 0;
   padding: 0.2em 0em;
   } 

#cartBoxEmpty, #cartBoxVoucherBalance {
   font-weight: bold;
   }

.totalBox {
   width: 5.5em;
   text-align: right;
   padding: 0.2em;
   }

.lineTitle, .amount {
   text-align: right;
   padding: 0.2em;
   }

.amount {
   width: 5.5em;
   }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
   margin: 0em 1em 1em 0em ;
   }

.categoryIcon {}

#cartImage {
   margin: 0.5em 1em;
   }

/*Attributes*/
.attribImg {
   width: 20%;
   margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
   margin: 1em 0em;
   }

.centerBoxWrapper {
   border: 1px solid #9a9a9a;
   height: 1%;
   margin: 1.1em 0;
   background-color: #FFFFFF;	
   }

h2.centerBoxHeading {
   font-size: 1.3em;
   color: #666666;
   }

/*sideboxes*/
.columnLeft, .columnRight{
   background-color: #303030;
}
h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
   font-family: Trebuchet MS;
   font-size: 1em;
   color: #ffffff;
   background-color:#808080;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   }
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
   font-size: 0.9em;
   color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
   margin: 0em;
   /*background-image: url(../images/tile_back.gif);*/
   padding: 0.5em 0.2em;
   }

.leftBoxContainer, .rightBoxContainer {
   margin: 0em;
   margin-top: 1.5em;
   /*background: #666666; border: 1px solid #9a9a9a;border-bottom: 5px solid #336633;*/
   color: #000000;
   }

.sideBoxContent {
   /*background-color: #ffffff;*/
   color: #000000;
   padding: 0.4em;
   background-color: #666666;
   }

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
   color: #FFFF33;
   text-decoration: none;
   } 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
   color: #FFFFFF;
   }

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
   text-align: center;
   }

#bestsellers .wrapper {
   margin: 0em 0em 0em 1.5em;
   }

#bestsellers ol {
   padding: 0;
   margin-left: 1.1em;
   /* font-size: 9px;  Bestsellers side box content font size */
   }

#bestsellers li {
   padding: 0;
   margin: 0.3em 0em 0.3em 0em;
   }

#bannerboxHeading {
   background-color: #0000CC;
}

#upProductsHeading {
   text-align: left;
   }

#upDateHeading {
   text-align: right;
   }

/* categories box parent and child categories */
   #categoriesContent a, #categorylistboxContent a, #treemenu a{ 
   color: #121212; 
   /*font-size: 12px; changed since 1st Dec */
   text-decoration: none; 
   }
   
   #categoriesContent a:hover, #categorylistboxContent a:hover, #treemenu a:hover{ 
   color: #EEEEEE; 
   text-decoration: none; 
   }
A.category-top, A.category-top:visited {
   color: #008000;
   text-decoration: none;
   }
A.category-links, A.category-links:visited {
   color: #004080;
   text-decoration: none;
   }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
   color: #FF0000;
   text-decoration: none;
   }
SPAN.category-subs-parent {
   font-weight: bold;
   }
SPAN.category-subs-selected {
   font-weight: bold;
   }
/* end categories box links */

/*misc*/
.back {
   float: left;
   }

.forward{
   float: right;
   }
   
#shoppingCartDefault #PPECbutton {
   /*float: right;
   width: 50.0em;*/
   padding: 0.2em;
   float: left;
   }


.bold {
   font-weight: bold;
   }

.rowOdd {
   background-color: #E8E8E8;
   height: 1.5em;
   vertical-align: top;
   }

.rowEven {
   background-color: #F0F0F0;
   height: 1.5em;
   vertical-align: top;
   }

.hiddenField {
   display: none;
}
.visibleField {
   display: inline;
}

CAPTION {
   /*display: none;*/
   }

#myAccountGen li, #myAccountNotify li {
   margin: 0;
   } 

.accountTotalDisplay, .accountTaxDisplay {
   width: 20%;
   text-align: right;
   /*vertical-align: top*/
   }

.accountQuantityDisplay {
   width: 10%;
   vertical-align: top
   }

TR.tableHeading {
   background-color: #cacaca;
   height: 2em;
   }

.productListing-rowheading {
   background-color: #abbbd3;
   background-image: url(../images/footer-bg.jpg);
   height: 2em;
   color: #FFFFFF;
   }
.productListing-odd, .productListing-even{
   background-color: #FFFFFF;
}

.listingDescription{
   margin: 5px;
   text-align: left;
}
#siteMapList {
   width: 90%;
   float: right;
   }

.ratingRow {
   margin: 1em 0em 1.5em 0em;
   }

LABEL#textAreaReviews {
   font-weight: normal;
   margin: 1em 0em;
   }

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
   background-color: #ffffff;
   }
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
   clear: both;
   }

.seDisplayedAddressLabel {
   background-color:#85C285;
   text-align: center;
   }
.seDisplayedAddressInfo {
   text-transform: uppercase;
   text-align: center;
   font-weight: bold;
   }
#seShipTo {
   padding: 0.2em;
   }
/* css for product image drop shadow and border. To disable the drop shadow and border, simply delete or comment out this section */

#productMainImage {
   float:left;
   background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
   background: url("../images/shadow.gif") no-repeat bottom right;
   margin: 25px 10px 0 3px !important;
}
#productMainImage {
   background: #fff;display: block;
   position: relative;
   /*border: 1px solid #a9a9a9;  defines the border for the product image. To remove the border delete or comment out this line, AND padding: 4px; below */
   padding: 10px;
}

#productPrices {
   float:right;
   margin: 0 20px 0 0;
)

#disp-order-sorter{
   background-color: #CCCCCC;
}

#currenciesContent, .sideBoxContent{
   background-color: #CCCCCC!important;
}


#whos_online_footer{
   text-align: center;
   color: #272727 !important;
}
/* end css for product image drop shadow */

Downunder QLD

29 Jan 2011, 6:19 PM
#2
davidrayandj avatar

davidrayandj

New Zenner

Join Date:
Jan 2011
Posts:
48
Plugin Contributions:
0

Re: Change 'Sale' red color in sidebox to black but leave main center 'Sale' txt as red

Just out of curiosity did you ever figure out how to do this?

I am looking to do the same thing and can't find answers anywhere.

Thanks!

8 Mar 2011, 10:26 AM
#3
mobile_gear avatar

mobile_gear

New Zenner

Join Date:
Feb 2011
Posts:
9
Plugin Contributions:
0

Re: Change 'Sale' red color in sidebox to black but leave main center 'Sale' txt as red

Hi,

I have done this in
includes\templates\pure_black_free\css

edit the stylesheet.css

in the section

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: lime;
}

Edit the colour I have changed mine to lime but to change it to black #000000

I guess if you just wanted to change the color of the .productSpecialPrice you can add another color in at that as the following

.productSpecialPrice {
color: #000000;
}

.productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: lime;
}

I hope this helps