X-Cart forums - Change tab.tpl with css menu

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Change tab.tpl with css menu (https://forum.x-cart.com/showthread.php?t=36898)

Change tab.tpl with css menu

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>

Re: Change tab.tpl with css menu

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