Speedbar Rollover
 

Hi Again, all!

Just trying to make a rollover for the speedbar! :D

I've managed to get this far:

http://i16.photobucket.com/albums/b49/BeanJardo/Work/speedbarscreenshot.jpg

But I can't work out how to get the last little bit to appear! :(


This is my CSS:




Please don't tell me you can't have 2 background images on a css rollover...? lol :(


The two images are as below:



Any help greatly appreciated!

Thank you!! :)

Re: Speedbar Rollover
 

Monday Morning Bump! :)

Re: Speedbar Rollover
 

Another Monday morning Bump!? :)

Re: Speedbar Rollover
 

Anyone? :(

Re: Speedbar Rollover
 

I'll download the images, and try it out for you. (Least I can do Is try for ya)

But I am only using 4.3.0 and skin light and lucid. (Which is re-designed apart form tabs and other areas)

What skin are you using? could you pm me your site?

Re: Speedbar Rollover
 

Hmm strange In Light and lucid I have this:
}
.tabs li {
float: right;
margin: 0px 1px 0px 0px;
padding: 0px;
background: transparent url(images/tab_r.png) no-repeat right top; (Renamed that to find out what's happening)
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; (Renamed that to find out what's happening)
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;

After doing that I still had an image appearing on right, went to images and took a look and theres another image > named "tab_r.gif" size 5x25 so I renamed and image gone, that's as far as I have got, but it looks like theres another image for you to modify, well there is in light and Lucid.. (Haven't started looking for css yet, but it's not in main within css) At a guess I bet it's in ie6/7.css as PNG issue

It's a starting point for you.
I was going to work on my custom tabs, and now it's given me a starting point.

Hope this helps in some way.

Re: Speedbar Rollover
 

This may help out those also learning .css. You may want to first correct the styles in your .css. The beginning is missing on two of the styles, an added comma was inserted (remove the comma), a class name is missing, and change the closing style for the two that had the opening missing.

/* header tabs */
.tabs {
position: absolute;
top: 7px;
right: 6px;
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_right_roll.png") no-repeat right top;
height: 25px;
overflow: hidden;
}
.tabs a:link, {
.tabs a:visited,
.tabs a:hover,
.tabs a:active
}
Class Name missing {
display: block;
background: transparent url("images/tab_left_roll.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;
background-position: 0 -25px;
}

Re: Speedbar Rollover
 

Not sure where you going with this, what do you mean by "css learners" the code is wrong?

First I didn't paste all code, as I only posted some to illistrate to the user how the images are working, as this was the talking point. which I have now below (This is Light and Lucid For 4.3)


The css is fully compliant with w3c You can try here http://jigsaw.w3.org/css-validator/#validate_by_input

By Pasting the css into the link above, I gather you may have assumed that was complete code within my post reply!

Re: Speedbar Rollover
 

Hi Both,

Thanks so much for your input, it's very much appreciated!

Gizmo - My huge apologies for not seeing this thread sooner, I've not been in the office (Very heavy snow in the UK!) Thanks for the input/help!

Lock15 - Thanks for your messages, it's certainly helped.


However,

I have a hard-copy of the original CSS here, which actually has those omitted, before I've even delved into the tabs section?

Also, looking at the "skin1_original" folder, the css is there and is as follows:


Thanks again, Jean.

Re: Speedbar Rollover
 

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?

Re: Speedbar Rollover
 

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

Re: Speedbar Rollover
 

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

Re: Speedbar Rollover
 

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.


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! :)

Re: Speedbar Rollover
 

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,

Re: Speedbar Rollover
 

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! :)

Re: Speedbar Rollover
 

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

Re: Speedbar Rollover
 

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 :)