how to insert css buttons created with CSS Tab Designer 2?

**lankeeyankee** · 24 Mar 2007, 06:49 PM

So, I create some horizontal tabs and both generated the HTML code and also copied the CSS code. I uploaded the needed images to /images folder as well as my custom template/images folder in zc. I've messed around ad naseum trying to insert the code in various stylesheets in my custom template folder and various tpl_ files but I can't get the tabs to show up on the site. I'm doing this on a test server with 1.3.7 running in xampp for windows v1.4.16 with php 5.0.5 and mysql 4.1.14.

Do I need to create an override? What do I need to modify to add the css tabs? I wanted them to replace the ezpages links at the bottom of the header.

I've also tried to replace the standard css buttons on the css flyout header by jadetrue with these tabs that I've made but I can't seem to change the button style and I have tried all sorts. Of course, I am a total noob to all of this and have been leaning by trial and (tons of) error.

Below is the css code generated by css tab designer 2. Any help would be greatly appreciated. There are 5 image files with the code, if I need to upload them to help figure it out let me know.

Thanks!

Matt

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
        <head>
                <title>Sliding Doors Preview</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
<!--
BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
        FONT-SIZE: small
}
#header {
        FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
        PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
        PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
        PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
        FLOAT: none
}
#header A:hover {
        COLOR: #333
}
#header #current {
        BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
        BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
-->
</style>
        </head>

        <body>
                <div id="header">
                        <ul>
                                <!-- CSS Tabs -->
<li id="current"><a href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>

                        </ul>
                </div>
        </body>
</html>