Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

graphical header and footer bars


akosh

Recommended Posts

how do I make the header and footer bars graphical instead of the solid color?

please don't just say "change somethings in header.php and footer.php", because that doesn't really help.

Link to comment
Share on other sites

Just change something in the catalog/stylesheet.css :P

 

If it is a background image in the bar then add the path in either TR.headernavigation or TD.headernavigation

TR.footer or TD.footer

like this

BACKGROUND-IMAGE: url(images/header_bar_bluelines.gif) repeat;

 

or add to the header.php or footer.php

<td width="130" height="76" align="right" valign="middle">
     <?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>'; ?>
       <?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>'; ?>  <?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; include(DIR_WS_BOXES . 'languages.php'); ?></td>
 

something along these lines

No longer giving free advice. Please place deposit in meter slot provided.  Individual: [=] SME: [==] Corporation: [===]
If deposit does not fit one of the slots provided then you are asking too much! :P

Is your Osc dated try Phoenix  raising oscommerce from the ashes.

Link to comment
Share on other sites

Just change something in the catalog/stylesheet.css :P

 

If it is a background image in the bar then add the path in either TR.headernavigation or TD.headernavigation

TR.footer or TD.footer

like this

BACKGROUND-IMAGE: url(images/header_bar_bluelines.gif) repeat;

something along these lines

so which one would I add

BACKGROUND-IMAGE: url(images/header_bar_bluelines.gif) repeat;

to?

 

TR.header {
 background: #ffffff;
}

TR.headerNavigation {
background: #4E7CD8;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #4E7CD8;
 color: #ffffff;
 font-weight : bold;
}

 

just one of them?

Link to comment
Share on other sites

TR.headernavigation to affect the row or TD.headernavigation to affect the division of the row and remember that you need to make the path to an image that is allready loaded to images directory

TR.headerNavigation {
background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header_bar_bluelines.gif) repeat;
}

this will give a repeated image across the entire row

 

TR.headerNavigation {
background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header_bar_bluelines.gif);
}

this will give an image stretched across the entire row

No longer giving free advice. Please place deposit in meter slot provided.  Individual: [=] SME: [==] Corporation: [===]
If deposit does not fit one of the slots provided then you are asking too much! :P

Is your Osc dated try Phoenix  raising oscommerce from the ashes.

Link to comment
Share on other sites

hmmm...mine looks like this

 

TR.headerNavigation {
background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
}

 

I uploaded header.gif to /images, but nothing chnages.

Link to comment
Share on other sites

sorry try this

TR.headerNavigation {
// background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
}

No longer giving free advice. Please place deposit in meter slot provided.  Individual: [=] SME: [==] Corporation: [===]
If deposit does not fit one of the slots provided then you are asking too much! :P

Is your Osc dated try Phoenix  raising oscommerce from the ashes.

Link to comment
Share on other sites

hmm...still no go

 

TR.header {
?background: #ffffff;
}

TR.headerNavigation {
// background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
}

TD.headerNavigation {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?background: #4E7CD8;
?color: #ffffff;
?font-weight : bold;
}

A.headerNavigation { 
?color: #FFFFFF; 
}

 

do you see anything wrong?

Link to comment
Share on other sites

TR.header {
background: #ffffff;
}

TR.headerNavigation {
// background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
}

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
//background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
color: #ffffff;
font-weight : bold;
}

A.headerNavigation { 
color: #FFFFFF; 
}

No longer giving free advice. Please place deposit in meter slot provided.  Individual: [=] SME: [==] Corporation: [===]
If deposit does not fit one of the slots provided then you are asking too much! :P

Is your Osc dated try Phoenix  raising oscommerce from the ashes.

Link to comment
Share on other sites

It still doesn't work....

 

TR.header {
background: #ffffff;
}

TR.headerNavigation {
// background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
}

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
//background: #4E7CD8;
BACKGROUND-IMAGE: url(images/header.gif) repeat;
color: #ffffff;
font-weight : bold;
}

A.headerNavigation { 
color: #FFFFFF; 
}

A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #00ff00;
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

 

...images/header.gif is uploaded for sure...

Link to comment
Share on other sites

You need to do this instead:

 

TR.headerNavigation {

?  BACKGROUND-IMAGE: url(../images/header.gif) ;

}

 

TD.headerNavigation {

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

? font-size: 10px;

? color: #ffffff;

? font-weight : bold;

}

Link to comment
Share on other sites

actually thatll throw a curve at some browsers try this and I added height as well:

TR.headerNavigation {

BACKGROUND-IMAGE: url(../images/headerbar.gif) ;

height: 32px;

}

 

TD.headerNavigation {

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

font-size: 10px;

font-weight : bold;

}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...