Having Trouble with Style Sheet Colours

[Kayz]

I am hopeless with coding but have done really well I think to figure out most of the CSS styling sheet colours, however I am stuck on a few.
I am unsure what the colours are for so don't know what to change them to. I've also lost the headings in many pages such us the sign up page. I have a black background and for some reason those words are the same colour so you can't see them unless you highlight them with the mouse.

The main colours that I use are:
Black background (#000000)
Purple borders (#8E0EBD)
White text (#FFFFFF)

There are some other colours that are used such as green but those are for things that only appear with warnings for example.

Could any one tell me what the below colours are for so that I know what to chance them to and why my words are not showing. I have provided the small section of coding below for each colour.

#tagline {
color:##33CC33;
font-size: 2em;
text-align : center;
vertical-align: middle;
}


.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #FF0000;
}


.alert {
color: #000000;
margin-left: 0.5em;
}


.rightBoxContent {
background-color: #F207DA;
margin-bottom: 1em;
}


.seDisplayedAddressLabel {
background-color:#F207DA;
text-align: center;
}


I have also including my style sheet so that you may point out the colour error for my text. To help you understand what I'm talking about here is the URL for my site. It is still in production and can not be seen by the public yet.

http://passionsignite.com.au/zen-car...eset-12112007/

For any and all help I thank you.

/**
* Main CSS Stylesheet

body {
margin: 0;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 62.5%;
color: #FFFFFF;
background-color: #000000;
}

a img {border: none; }

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

a:visited {
color: #FFFFFF;
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: #FFFFFF;
}

a:active {
color: #FFFFFF;
}

h1 {
font-size: 1.5em;
}

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 3px;
}

CODE {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 1em;
}

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

TEXTAREA {
/* float: left;*/
margin: auto;
display: block;
width: 95%;
}

input:focus, select:focus, textarea:focus {
background: #FFFFFF;
}

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

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

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: 11em;
float: left;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

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

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 2px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #8E0EBD;
}

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

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

.messageStackSuccess {
background-color: #2DF766;
color: #000000;
}

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

/*wrappers - page or section containers*/
#mainWrapper {
background-color: #000000;
text-align: left;
width: 850px;
vertical-align: top;
border: 2px solid #8E0EBD;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:##33CC33;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #8E0EBD;
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, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #8E0EBD;
font-weight: bold;
color: #FFFFFF;
height: 1%;
width: 100%;
}

#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;
}

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

#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;
}

#navBreadCrumb {
background-color: #000000;
}

#navEZPagesTop {
background-color: #000000;
border: 1px solid #8E0EBD;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne {
background-color: #000000;
}

#navColumnTwo {
background-color: #000000;
}

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

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}

.alert {
color: #000000;
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;
}

/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #000000;
}

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

#cartSubTotal {
border-top: 1px solid #000000;
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;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

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

.cartOldItem {
color: #000000;
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;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}

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

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #FF0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
}

#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;
}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
color: #FFFFFF;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #8E0EBD;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
border: 1px solid #8E0EBD;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #000000;
padding: 0.4em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #FFFFFF;
}

.rightBoxHeading {
margin: 0em;
background-color: #8E0EBD;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #EF7E0D;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #FFFF66;
text-decoration: none;
}

.rightBoxContent {
background-color: #F207DA;
margin-bottom: 1em;
}

.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;
}

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

#bannerboxHeading {
background-color: #8E0EBD;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

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

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

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

.rowEven {
background-color: #000000;
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: #8E0EBD;
height: 2em;
}

#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:#F207DA;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}

[misty]

Download and install Firefox, then add Web Developers Tool Kit..You will then be able to see all stylesheet configurations for zencart.,..

[stevesh]

As Misty said, get the Web Developer plugin for Firefox.

You can use it to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

The sideboxes, for example, have their own id's, so you would find, say, #information in the stylesheet (or add it if it doesn't exist). To change the header of that box would be #informationHeading, the content area would be #informationContent, etc.

CSS is case-sensitive.


Also install the Colorzilla mod for Firefox.

Web colors are expressed in hexadecimal format (base 16). The first two characters are for Red, the next two for Green, and the last two for Blue. Hex is zero through nine, then A through F, so zero is the smallest value and F the highest.

Your productSpecialPrice is #FF0000, so it's all Red.

The tagline (which you aren't using) is #33CC33 - a little red and blue and a lot of green, so it appears green.

.alert is #000000 - no color, so it's black.

.rightBoxContent is #F207DA - it a purple that looks a lot like your main purple, but I can't see anywhere you're using it.

I can't see any page where the text is missing.

[Kayz]

Your productSpecialPrice is #FF0000, so it's all Red.

The tagline (which you aren't using) is #33CC33 - a little red and blue and a lot of green, so it appears green.

.alert is #000000 - no color, so it's black.

.rightBoxContent is #F207DA - it a purple that looks a lot like your main purple, but I can't see anywhere you're using it.

The problem is that I know what the colours are just not what they are for. What is the tag line? What does it do? That sort of thing. I just want to make sure that all of my colours match my colour theme so apart from the warnings and notices the whole site is uniformed.

[Kayz]

I can't see any page where the text is missing.

When i view my site on the sign in page (and others) I have the thin outline around the verious questions.
But where the heading for those questions is the text is there but it is black (or something) so you can not see it unless you highlight it with the mouse by clicking and draging over that area.
For example the thin line around where you put in your e-mail address and password to sign in is. At the top there is a gap in the thin line where there is some text saying "Returning customers please sign in". That text is there but I can not see it.

Can you?

If you can't see it either do you have any idea which colour I need to change so that it can be read.

[Kayz]

I just viewed my website with FireFox and the text show up, but not using Internet Explorer. Any ideas on how to make it show up in Explorer as well as I know heaps of people that use that.