How can I change text colour?
 

I have changed the colour scheme of my site (www.carfx.co.uk) through the 'edit templates' section on 'skin1.css' file. I have changed the background colours to black and the text to white.

My problem is: When a customer gets to the 'CarFX :: Checkout :: Payment details' section the Product item text appears as white on a white background and therefor is not visible. I fear this is losing me orders.

Please could anyone tell me how I can just change this text colour to black? I am not an expert with code, but can just about get along if pointed in the right direction.

Below is my skin1.css text if it helps:

BODY,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT {
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
COLOR: #ff3300; FONT-SIZE: 9px;
}
A:link {
COLOR: #FFFFFF; TEXT-DECORATION: none;
}
A:visited {
COLOR: #333333; TEXT-DECORATION: none;
}
A:hover {
COLOR: #666666; TEXT-DECORATION: underline;
}
A:active {
COLOR: #333333; TEXT-DECORATION: none;
}
H1 {
FONT-SIZE: 13px;
}
H2 {
FONT-SIZE: 11px;
}
H3 {
FONT-SIZE: 10px;
}
HR {
COLOR: #ffffff; HEIGHT: 1px;
}
BODY {
MARGIN-TOP: 0 px; MARGIN-BOTTOM: 0 px; MARGIN-LEFT: 0 px; MARGIN-RIGHT: 0 px;
BACKGROUND-COLOR: #000000;
}
.HeadBox {
BACKGROUND-COLOR: #000000;
}
.HeadText {
FONT-SIZE: 12px; FONT-WEIGHT: bold;
}
.HeadLine {
BACKGROUND-COLOR: #FF3300;
}
.VertMenuBox {
BACKGROUND-COLOR: #000000;
}
.VertMenuBorder {
BACKGROUND-COLOR: #FFFFFF;
}
.VertMenuTitle {
BACKGROUND-COLOR: #FF3300; COLOR: #333333; FONT-WEIGHT: bold;
}
.VertMenuItems{
COLOR: #FFFFFF; TEXT-DECORATION: none;
}
.VertMenuItems:link {
COLOR: #FFFFFF; TEXT-DECORATION: none;
}
.VertMenuItems:visited {
COLOR: #FFFFFF; TEXT-DECORATION: none;
}
.VertMenuItems:hover {
COLOR: #FF3300; TEXT-DECORATION: underline;
}
.VertMenuItems:active {
COLOR: #FF3300; TEXT-DECORATION: none;
}
.VertMenuHr {
COLOR: #ffffff;
}
.CategoriesList {
FONT-SIZE: 9px;
}
.DialogBox {
BACKGROUND-COLOR: #000000;
}
.DialogBorder {
BACKGROUND-COLOR: #FFFFFF;
}
.DialogTitle {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 9px;
}
.NumberOfArticles {
COLOR: #FFFFFF; FONT-WEIGHT: bold;
}
.TopLabel {
COLOR: #ffffff; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Text {
COLOR: #FFFFFF;
}
.DecorTr {
COLOR: #38B8E8;
}
.AdminSmallMessage {
COLOR: #FF3300;
}
.AdminTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Line {
BACKGROUND-COLOR: #FF3300;
}
.ProductTitle {
COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductTitleHidden {
COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px;
}
.ProductDetailsTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductDetails {
COLOR: #FFFFFF;
}
.ProductPriceTitle {
COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceConverting {
COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 8px;
}
.ProductPrice {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceSmall {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.MarketPrice {
FONT-SIZE: 14px; FONT-FAMILY: Arial;
}
.ItemsList {
COLOR: #333333; FONT-WEIGHT: bold;
}
#Disabled {
COLOR: #909090;
}
.NavigationPath {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:link {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:visited {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:hover {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:active {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.FormButton {
COLOR: #333333; FONT-WEIGHT: bold;
}
.Button {
FONT-FAMILY: Arial;
BACKGROUND: URL(images/butbg.gif);
BACKGROUND-COLOR: #FF3300;
COLOR: #000000; FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-DECORATION: none;
}
.CustomerMessage {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.ErrorMessage {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.Star {
COLOR: #FF0000;
}
.HighLight {
BACKGROUND-COLOR: #FFFFCC;
}
.SaveMoneyLabel {
COLOR: #000000; FONT-WEIGHT: bold;
}
.TableHead {
BACKGROUND-COLOR: #CCCCCC; FONT-WEIGHT: bold;
}
.TableSubHead {
BACKGROUND-COLOR: #EEEEEE;
}
.TableLine {
BACKGROUND-COLOR: #F0F0F0;
}
.SmallNote:link {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:visited {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:hover {
COLOR: #7C4C00; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:active {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallText {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.Bottom {
BACKGROUND-COLOR: #CCCCCC; COLOR: #999999;
}
.Tab {
BACKGROUND-COLOR: #CCCCCC;
FONT-WEIGHT: bold;
TEXT-TRANSFORM: uppercase;
}
.CatMenuItemOff
{
BACKGROUND-COLOR: transparent; /* like "VertMenuBox" */
BORDER-RIGHT: none; /* like "VertMenuBox" */
BORDER-TOP: none; /* like "VertMenuBox" */
BORDER-LEFT: none; /* like "VertMenuBox" */
BORDER-BOTTOM: none; /* like "VertMenuBox" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatMenuItemOffExp
{
BACKGROUND-COLOR: transparent; /* like "VertMenuBox" */
BORDER-RIGHT: none; /* like "VertMenuBorder" */
BORDER-TOP: none; /* like "VertMenuBorder" */
BORDER-LEFT: none; /* like "VertMenuBorder" */
BORDER-BOTTOM: none; /* like "VertMenuBorder" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatMenuItemOn
{
BACKGROUND-COLOR: #FF3300; /* like "VertMenuTitle" */
BORDER-RIGHT: none; /* like "VertMenuBorder" */
BORDER-TOP: none; /* like "VertMenuBorder" */
BORDER-LEFT: none; /* like "VertMenuBorder" */
BORDER-BOTTOM: none; /* like "VertMenuBorder" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatSubMenu
{
BACKGROUND-COLOR: #CCCCCC; /* like "VertMenuBox" */
BORDER-RIGHT: #999999 1px solid; /* like "VertMenuBorder" */
BORDER-TOP: #999999 1px solid; /* like "VertMenuBorder" */
BORDER-LEFT: #999999 1px solid; /* like "VertMenuBorder" */
BORDER-BOTTOM: #999999 1px solid; /* like "VertMenuBorder" */
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 2px;
}
.CatMenuItem
{
FONT-SIZE: 12px;
FONT-FAMILY: Arial;
CURSOR: pointer;
}
.CatMenuItem:link
{
COLOR: #333333; /* like "VertMenuItems" */
}
.CatMenuItem:visited
{
COLOR: #333333; /* like "VertMenuItems" */
}
.CatMenuItem:hover
{
COLOR: #333333; /* like "VertMenuTitle" */
}
.CatMenuItem:active
{
COLOR: #333333; /* like "VertMenuItems" */
}
.NavDialogTitle {
font-size: 11px;
font-weight: bold;
color: #333333;
}
.NavDialogBorder {
background-color: #FFCC33;
}
.NavDialogBox {
background-color: #FFFFCC;
}
.PopupHelpLink {
FONT-SIZE: 9px;
COLOR: #000000;
TEXT-DECORATION: none;
}
.SubHeader2 {
COLOR: #666666;
font-size: 11px;
FONT-WEIGHT: bold;
}
.SubHeader2Line {
BACKGROUND-COLOR: #CCCCCC;
}
.HightLightRow {
BACKGROUND-COLOR: #B0B0B0;
font-weight: bold;
}
.HightLightEqualRow {
BACKGROUND-COLOR: #ffe8af;
}
.VertMenuSubTitle {
BACKGROUND-COLOR: #FFA92F;
}
.SpecialOffersPrice {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 14px;
}

You probably need to go into the cart template directly and change the background color of the table cell.

Which template would I need to change it in?

It depends on where it is happening. Have a look at cart.tpl, cart_totals.tpl and cart_contents.tpl.

Sorry to be a pain. I'm not very good with the code.

It's the cell that displays on the 1st, 2nd and 3rd stage of the checkout process. Underneath 'product' where it lists the items I have in the cart.

cart_contents.tpl. It is supposed to call the TableSubHead class....try changing that in skin1.css as well.

I tried changing it in the skin1.css file, but it seems to have no effect. Please could you tell me how to change the colour of the cell to black in the actual template file.

Look at cart_contents.tpl. Find the table that is causing you the issues. See what class it calls, alter the class. If it doesn't call a class, make a new class, call it and define it.