akosh Posted March 6, 2004 Share Posted March 6, 2004 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 More sharing options...
241 Posted March 6, 2004 Share Posted March 6, 2004 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! Is your Osc dated try Phoenix raising oscommerce from the ashes. Link to comment Share on other sites More sharing options...
akosh Posted March 6, 2004 Author Share Posted March 6, 2004 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 More sharing options...
241 Posted March 6, 2004 Share Posted March 6, 2004 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! Is your Osc dated try Phoenix raising oscommerce from the ashes. Link to comment Share on other sites More sharing options...
akosh Posted March 6, 2004 Author Share Posted March 6, 2004 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 More sharing options...
241 Posted March 6, 2004 Share Posted March 6, 2004 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! Is your Osc dated try Phoenix raising oscommerce from the ashes. Link to comment Share on other sites More sharing options...
akosh Posted March 6, 2004 Author Share Posted March 6, 2004 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 More sharing options...
akosh Posted March 6, 2004 Author Share Posted March 6, 2004 Also, how would you change the width of the bar? Link to comment Share on other sites More sharing options...
241 Posted March 6, 2004 Share Posted March 6, 2004 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! Is your Osc dated try Phoenix raising oscommerce from the ashes. Link to comment Share on other sites More sharing options...
akosh Posted March 6, 2004 Author Share Posted March 6, 2004 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 More sharing options...
akosh Posted March 7, 2004 Author Share Posted March 7, 2004 anyone? Link to comment Share on other sites More sharing options...
Viking Posted March 7, 2004 Share Posted March 7, 2004 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 More sharing options...
Viking Posted March 7, 2004 Share Posted March 7, 2004 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 More sharing options...
akosh Posted March 7, 2004 Author Share Posted March 7, 2004 thanks, it works... 241, a thanks to you too. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.