Change tab.tpl with css menu

buddy · #1 01-21-2008, 07:55 AM

Hi,
i would change the file tab.tpl with these code but i don't know what i have to do,someone can help me please? Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional series #1</title>
<style type="text/css">
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

</style>
</head>

<body>
<ul class="menu1">
<li><a href="#nogo">Home</a></li>
<li class="current"><a href="#nogo">Privacy Policy</a></li>
<li><a href="#nogo">Products</a></li>
<li><a href="#nogo">Where to find us</a></li>
<li><a href="#nogo">Contact us</a></li>
<li><a href="#nogo">Search</a></li>
</ul>
</body>
</html>

SpinyMan · #2 01-25-2008, 09:10 AM

Quote:

Originally Posted by buddy

Hi,
i would change the file tab.tpl with these code but i don't know what i have to do,someone can help me please? Thank you

1) put this code

Quote:

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

on the bottom of the main css file ("skin1.css" as default)

2) modify "customer/tab.tpl",
just put (empty file before):

Quote:

<li {if $current}class="current"{/if}>{$tab_title}</li>

3) modify "customer/top_menu.tpl" (or other file, if u have some modifications, that including "customer/tab.tpl") with one I attached.
DO NOT FORGET to edit condition in atacched file (I marked it by comment)

4) to menage your tab links just go to admin section "Speed Bar" and edit it in your wish



	X-Cart forums © 2001-2020