X-Cart forums

[ARW VISIONS]

well the iamge will only change on hover. There can only be one BG image for each <a> tag, so yes I don't think you can change the right potion with just CSS.

Ash

[gizmo]

Just an update for light and lucid tabs, my dev site I have so far done this:

EXAMPLE:

http://forum.x-cart.com/attachment.php?attachmentid=1811&stc=1&d=126352523 6

I Have used 2 images:

tab_l.png (10x25) There original was 600x25 - And tab_r.png (10x25) Same size as orig


CODE And BOLDED IS WHAT'S ADDED TO BRING INLINE WITH MY TABS
.tabs {
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 0px;
height: 25px;
width: 80%;
text-align: right;

}
.tabs ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.tabs li {
float: right;
margin: 0px 1px 0px 0px;
padding: 0px;
background: transparent url(images/tab_r.png) no-repeat right top ;
background-color:#d8e7f3;
height: 25px;
}
.tabs a:link,
.tabs a:visited,
.tabs a:hover,
.tabs a:active
{
display: block;
background: transparent url(images/tab_l.png) no-repeat left top;
margin: 0px 5px 0px 0px;
padding: 5px 10px 5px 15px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: #253161;
text-decoration: none;
font-weight: bold;
font-size: 11px;
height: 25px;
outline-style: none;
}
.tabs a:hover {
color: #2863c2;
}

Of course this is nothing fancy, if I wanted a nice border I would have to redo css, I'm not sure if this helps original poster, but you could use that code on what ever template your using, but check code, and of course you have to create the tabs like I redone.

You could also use inline css within skin1/customer/tabs.tpl

[JeanB]

Originally Posted by gizmo

Yep I'm UK as well, Near Gatwick, Still have lots of snow on the ground etc, and fed-up with it now, been non stop cold really for about a month, heat wave coming at weekend with daytime temps at 6' C instead of minus, lol....

Back on track Did you get it sorted then?

Worcestershire, here - We had about 7 inches, then a further 3-4 the other day - It's been chaos!

I've not sorted it yet, no - I've been working on something else as well, but I will go back in to it this afternoon and take a look.

well the iamge will only change on hover. There can only be one BG image for each <a> tag, so yes I don't think you can change the right potion with just CSS.

Darn - I feared that! Thanks for confirming, Ashley.

I wonder if there's a sneaky way I can get the same effect, but with using only one image ... I feel a clever bit of graphics coming on!

[gizmo]

Jean, If your not to bovvered about perfect rounded affects on Hover how about this:

http://forum.x-cart.com/attachment.php?attachmentid=1812&stc=1&d=126356276 2

The Shopping Cart Link in pic, shows the mouse over:

CSS:

/* header tabs abeez_skyblue_topnav */
.abeez_skyblue_topnav{
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding : 0px;
height: 25px;
width: 100%;
text-align: right;
}

.abeez_skyblue_topnav ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(abeez_sources/sky_blue/images/bg_green_top.png) center center repeat-x; /*default background of menu bar*/
}

.abeez_skyblue_topnav ul li{
display: inline;
}

.abeez_skyblue_topnav ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}

.abeez_skyblue_topnav ul li a:visited{
color: white;
}

.abeez_skyblue_topnav ul li a:hover, .abeez_skyblue_topnav ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(abeez_sources/sky_blue/images/bg_hover_top.png) center center repeat-x;
}

And edited
skin1/customer/head.tpl

And put this in first part of head.tpl: (But mine is custom design) the important thing if anyone needed was the css for straightforward tabs.
<div class="line2">{include file="customer/tabs.tpl"}</div>

And of course using 2 very simple images,

[JeanB]

Thanks fantastic, gizmo - Cheers!

I've got rid of the rounded boxes - It would have been nice to keep them, but it's not really too important!!

Works a treat!

Thanks everyone for their input!

[ARW VISIONS]

DO you ahve to ahve the speed bar? you could hard code links, and them make background images.

[JeanB]

Hi Ashley,
I'd love to! The content of our site isn't always static though, really - So I think I'd prefer to be able to easily control that from the admin side, really.

Thanks though