OK I tried that and it didnt work. The only way I can get the top bar how I want it to look is to remove the TD,TH, and P from the top part of the skin1.css. But, when I do that, the rest of the page is affected.
Here is my code for skin1.css
Code:
BODY,INPUT,TD,TH,P,SELECT,TEXTAREA {
FONT-FAMILY: Arial;
COLOR: #000000; FONT-SIZE: 10px;
}
TopBar { FONT-FAMILY: Arial;
COLOR: #001683; FONT-SIZE: 14px;
}
A:link {
COLOR: #000000; TEXT-DECORATION: none;
}
A:visited {
COLOR: #000000; TEXT-DECORATION: none;
}
A:hover {
COLOR: #FF4421;
}
A:active {
COLOR: #000000; TEXT-DECORATION: none;
}
H1 {
FONT-SIZE: 15px;
}
H2 {
FONT-SIZE: 13px;
}
H3 {
FONT-SIZE: 12px;
}
HR {
COLOR: #DDDDDD; HEIGHT: 1px;
}
BODY {
MARGIN-TOP: 0 px; MARGIN-BOTTOM: 0 px; MARGIN-LEFT: 0 px; MARGIN-RIGHT: 0 px;
BACKGROUND-COLOR: #ffffff;
}
.HeadBox {
BACKGROUND-COLOR: #FF0000;
}
.HeadText {
FONT-SIZE: 12px; FONT-WEIGHT: bold;
}
.HeadLine {
BACKGROUND-COLOR: #C3CCD0;
}
.VertMenuBox {
BACKGROUND-COLOR: #CCCCCC;
}
.VertMenuBorder {
BACKGROUND-COLOR: #FF3300;
}
.VertMenuTitle {
BACKGROUND-COLOR: #FF0000; COLOR: #ffffff; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.VertMenuItems {
COLOR: #333333; TEXT-DECORATION: none;
}
.VertMenuItems:link {
COLOR: #333333; TEXT-DECORATION: none;
}
.VertMenuItems:visited {
COLOR: #333333; TEXT-DECORATION: none;
}
.VertMenuItems:hover {
COLOR: #FF4421; TEXT-DECORATION: underline;
BACKGROUND-COLOR: #ffffff;
}
.VertMenuItems:active {
COLOR: #000000; TEXT-DECORATION: none;
}
.VertMenuHr {
COLOR: #999999;
}
.CategoriesList {
FONT-SIZE: 14px; FONT-WEIGHT: bold;
}
.DialogBox {
BACKGROUND-COLOR: #ffffff;
}
.DialogBorder {
BACKGROUND-COLOR: #FF4421;
}
.DialogTitle {
BACKGROUND-COLOR: #ECEFF3; COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px;
}
.NumberOfArticles {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.TopLabel {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Text {
COLOR: #000000;
}
.AdminSmallMessage {
COLOR: #FF3300;
}
.AdminTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Line {
BACKGROUND-COLOR: #FF6600;
}
.ProductTitle {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductDetailsTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductDetails {
COLOR: #000000;
}
.ProductPriceTitle {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceConverting {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPrice {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceSmall {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.MarketPrice {
FONT-SIZE: 11px;
}
.ItemsList {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.NavigationPath {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.FormButton {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.Button {
FONT-FAMILY: Arial;
BACKGROUND: URL(images/butbg.gif);
BACKGROUND-COLOR: #FF4421;
COLOR: #FFFFFF; FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-DECORATION: none;
}
.CustomerMessage {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.ErrorMessage {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.Star {
COLOR: #FF0000;
}
.HighLight {
BACKGROUND-COLOR: #FFFFCC;
}
.SaveMoneyLabel {
COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 10px;
}
.TableHead {
BACKGROUND-COLOR: #DDDDDD;
}
.SmallNote:link {
COLOR: #888888; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:visited {
COLOR: #888888; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:hover {
COLOR: #888888; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:active {
COLOR: #888888; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.Bottom {
BACKGROUND-COLOR: #000000; COLOR: #FFFFFF;
}
.Tab {
BACKGROUND-COLOR: #C3CCD0;
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: 1px;
MARGIN-RIGHT: 2px;
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: 1px;
MARGIN-RIGHT: 2px;
CURSOR: pointer;
}
.CatMenuItemOn
{
BACKGROUND-COLOR: #FF4421; /* like "VertMenuTitle" */
BORDER-RIGHT: #FF4421 1px solid; /* like "VertMenuTitle" */
BORDER-TOP: #FF4421 1px solid; /* like "VertMenuTitle" */
BORDER-LEFT: #FF4421 1px solid; /* like "VertMenuTitle" */
BORDER-BOTTOM: #FF4421 1px solid; /* like "VertMenuTitle" */
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 2px;
CURSOR: pointer;
}
.CatSubMenu
{
BACKGROUND-COLOR: #C3CCD0; /* like "VertMenuBox" */
BORDER-RIGHT: #000000 1px solid; /* like "VertMenuBorder" */
BORDER-TOP: #000000 1px solid; /* like "VertMenuBorder" */
BORDER-LEFT: #000000 1px solid; /* like "VertMenuBorder" */
BORDER-BOTTOM: #000000 1px solid; /* like "VertMenuBorder" */
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 2px;
}
.CatMenuItem
{
FONT-SIZE: 12px;
FONT-FAMILY: Arial;
CURSOR: pointer;
}
.CatMenuItem:link
{
COLOR: #000000; /* like "VertMenuItems" */
}
.CatMenuItem:visited
{
COLOR: #000000; /* like "VertMenuItems" */
}
.CatMenuItem:hover
{
COLOR: #FFFFFF; /* like "VertMenuTitle" */
}
.CatMenuItem:active
{
COLOR: #000000; /* like "VertMenuItems" */
}
.StatisticsBar {
BACKGROUND-COLOR: #A8BCC8;
}
Here is the head_nav.tpl
Code:
<span class="TopBar">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="37">
<tr>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="109">
<p align="center"><font color="#001683" face="Arial">Home </font>
</td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="109">
<font color="#001683" face="Arial">| </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="109">
<font color="#001683" face="Arial">Contact Us </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="109">
<font color="#001683" face="Arial">| </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="109">
<font color="#001683" face="Arial">About Us</font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="110">
<font color="#001683" face="Arial">| </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="110">
<font color="#001683" face="Arial">Shipping </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="43">
<font color="#001683" face="Arial">| </font></td>
<td background="http://www.nowperformance.com/shop/barbg.gif" width="177">
<font color="#001683" face="Arial">Payment Options </font>
</td>
</tr>
</table>
</span>
As you can see if you visit the page, the top bar is not formatted nicely. Once I remove the TD, TH, and P from the top of the skin1.css , it makes my bar how I want it.......