Transparent separator

[farouche]

Hi

Have been looking around the samples for an example of how to make a transparent separator between menu items.


Found a sample (sample 20) which did it using a transparent image and images for on and off BG.


My question is: Will it be possible to do the same without using images ??

Thanks in advance

Allan

[vikenk]

Hi,

I replied earlier but my message got lost when I tried to post. I went through this very same thing last week. Reference my post viewtopic.php?t=6905

Basically, I made the separator width 0.001, which basically made it invisible. If you add separator padding it gives the illusion of transparent separator. In my case, I have background images and no BGCOLOR set.

BUT....it only works if you do not have any colors set for the background, so you should have: onbgcolor=""; and offbgcolor="";

If you have background colors, the separator padding will assume the bgcolor. Also, if you try to set separatorcolor=""; and add padding, the padding will assume the "onbgcolor".

That's as far as I could get...

Viken K.

[Ruth]

Hi,

I've been playing around and finally figured it out.

Think of the menu more or less as a container box which then has little item boxes. When you set offbgcolor and onbgcolor that is for the little item boxes, if you have not set a color for the container then it becomes those colors. So, if you set the menubgcolor to transparent, and set the separatorcolor to transparent, then you will have a separator that has no color, it will show whatever the background of the page is as it's 'color'

So, separatorsize=2;separatorcolor="transparent";menubgcolor="transparent"; should do the trick. Of course you can make the separatorsize whatever you want.

Ruth

[vikenk]

Ruth,

Is "transparent" a valid value? That would be good to know. I thought that leaving the value blank meant it would default to transparent.

Thant's good to know.

Viken K.

[Ruth]

Hi,

As far as I know it is a valid. The thing is that it works different for different things, and experimenting is what gives me most of my information. It's because of how things interact, and at the beginning some complaints about some colors wanting some default things. So, this is what I've found out in experimenting.

menubgcolor=""; is not transparent, it assumes the offbgcolor;

separatorcolor=""; is not transparent, it assumes the offcolor;

separatorcolor="transparent"; will not be transparent if you have no menubgcolor set or if you have menubgcolor=""; the separator will take the offcolor value still.

The only way to get them transparent, is to set both to transparent.

I hope this doesn't change, I like it for design reasons. For example try the two examples below.

1. In the menuStyle for the main menu

Code: Select all

bordercolor="#ff0000"; menubgcolor="transparent";
separatorsize=3;
separatorcolor="transparent"; 

and then put a margin=3; in the actual menu and take a look at it. You should get a border that looks as if it sits 3px from the menu with your page background color showing through and the same at the separators.

2. this and set the margin to 1px;

Code: Select all

bordercolor="#ff0000";
borderstyle="outset";
borderwidth=4;
menubgcolor="transparent";
separatorcolor="transparent";
separatorsize=1;

This makes it look like a menu with a bordercolor the same as your page background that is sitting inside a 'box' with a 3px outset border.

Anyway, hope this gives you some more info with which to play around

Ruth

[vikenk]

Anyway, hope this gives you some more info with which to play around

Yes... that opens up a whole new world of experimentation for me. Good to know!

:>)

Viken K.

[farouche]

Yep


Works just great...

Thanks again