Two Border Colors

Poster: Alan
Dated: Saturday October 13 2007 - 17:32:41 BST

Hi,

I'm using MM5.784.

I've built a simple horizontal menu and I would like to have different border colors on the top and bottom of the horizontal bar.

At the moment I'm using:
bordercolor="#96A7CB";
borderstyle="solid";
borderwidth=1;

Is there any way to have one border color at the top of the main bar and another on the bottom?

Thanks for any advise!

Re: Two Border Colors

Poster: Ruth
Dated: Saturday October 13 2007 - 18:36:57 BST

Hi,

Could you give me your style and I'll set something up. It is much harder to explain than do.

That border goes around the whole menu, it is a Milonic menu property and does not have a corresponding css property. It can only be one color. You can get the look by eliminating that and creating css classes and calling them in the items. And, because you are now putting borders on the items, you'd have to eliminate any separators since that would make the borders look like they were 'split' instead of linking together and looking like one border going around the whole menu, so instead of the separators you'd create your border classes so the middle items contained border sides that would give you the look of separators. Here is a demo/samples of border setups though it doesn't include that particular layout. Anyway, if you could give me what you want, including if you are now using separators and their colors and sizes I can post the code back on it and tell you how to set it up. It would be best if you actually posted your menu data file, at least the styles, here with which I can work.

http://support.milonic.com/beginners/borders.htm

Ruth

Re: Two Border Colors

Poster: Alan
Dated: Monday October 15 2007 - 5:54:28 BST

Hi Ruth,

I have this code:

with(menuStyle=new mm_style()){
bordercolor="#c88d8d";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontstyle="normal";
offbgcolor="#bfcdea";
offcolor="#323150";
onbgcolor="#FDE581";
oncolor="#323150";
rawcss="padding:2 8 2 8";
separatorcolor="#999999";
separatorsize=1;
subimage="graphics/00000001/arrow.gif";
subimagepadding=6;
}



The bordercolor="#c88d8d"; is correct for the top of the bar, but I would like #556771 for the border at the bottom of the bar.

Many thanks for any assistance!

Re: Two Border Colors

Poster: Ruth
Dated: Monday October 15 2007 - 7:09:37 BST

Hi,

OK, I put some stuff in so you could see what's going on. The css classes I created are being applied to each item, not the 'whole' menu. So that you could have a visual of how that's working, I left the border in the menuStyle, and colored the menubg a dark lilac/purple. Just for testing purposes so you can see things, put margin=4; in your main menu, up by the top/left/etc. When you view the menu you'll see there is a black dashed border around the whole menu, and that the lilac/purple background shows in the 4px margin area, and then your css classes work together on the items to create the border you want.

Your css classes are as follows. You can put them on the html page or in your css file. Since they need to be available for all pages where the menu is, probably the css file is best.



Here's your menuStyle and the main menu from the download so you can see how I called the css classes.


You can use the combination of css borders, margin, menubgcolor and the menu bordercolor etc to create some interesting designs for your menu. Anyway, to get what you want, delete the borderstyle etc from the menuStyle I posted, and the menubgcolor, and then in your main menu, in the first item you put the borderLeft for the on and offclass, in the middle items you use borderMid, and the last item is borderRight. Just so you know, if you wanted to create 3 more classe, i.e. borderLeftOn, you could do that and put in different colors for the borders then call onclass=borderLeftOn; for that to show when the mouse in on the menu.

Hope this helps.

Ruth

Re: Two Border Colors

Poster: Alan
Dated: Monday October 15 2007 - 14:38:47 BST

WOW!

Thanks Ruth ! !

Awesome - I'll give it a try.