ModxHost Template - in Blue

Here’s the blue version of the modxhost template, created at the same time the green version was produced.

We didn’t bother cutting it up, as we weren’t sure at the time if it was even going to be used.

If anyone needs the PSD, let me know - it should be reasonably easy to match the existing slices, and replace those using the 3 jpg’s attached.

Here’s a css mod to make your drop-down menu, "semi-transparent"

In the modxmenu.css file, locate this line of code

/* set dropdown */
li:hover li a, li.over li a {
color: #ffffff;
background-image: url(images/bullet_11x8.gif);
background-repeat: no-repeat;
text-align: left;
border-right: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-left: 1px solid #2f2f2f;
font-weight: normal;
width: 172px;
background-color: #000000;
background-position: left center;
text-indent: 8pt;
}

Change it to this:-

/* set dropdown */
li:hover li a, li.over li a {
color: #ffffff;
background-image: url(images/bullet_11x8.gif);
background-repeat: no-repeat;
text-align: left;
border-right: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-left: 1px solid #2f2f2f;
font-weight: normal;
width: 172px;
background-color: #000000;
background-position: left center;
text-indent: 8pt;
/*opacity for IE5+*/
filter: alpha(opacity=50);
/*opacity for older Mozilla browsers*/
-moz-opacity: 0.5;
/*opacity for mozilla/safari*/
opacity: 0.5;
}


You can view the results over at modxhost.

Nice blue version

note: i love alpha menu (i’ve used in a lot of websites), but opacity=xx does not validate your css

Quote from: banzai at Mar 04, 2007, 04:32 PM

Nice blue version

note: i love alpha menu (i’ve used in a lot of websites), but opacity=xx does not validate your css

Personally I prefer the green, but a blue was produced at the same time which had been sitting around gathering dust.

CSS: Sure, it’s entirely optional, and if css validation hangs on those line’s of code, remove them. Or, if you know a "valid" method of accomplishing the same result, without using png opacity or transparent gif’s, then I’d like to know more about it.

We have lots of "very happy" client’s using it - I thought it worthwhile sharing as it works with most browsers and doesn’t take long to implement.

Where can I download it???

Nice one... But how do you get the rounded Buttons at the first and last Link in the menu?

I installed Modx (0.9.5) and the background of all links is the same. (middle part of array_.jpg) I didn’t change anything! Could you please post your modxmenu.css? perhaps there’s a difference?!

Quote from: Starbuck at Mar 04, 2007, 04:23 PM

/* set dropdown */
li:hover li a, li.over li a {
color: #ffffff;
background-image: url(images/bullet_11x8.gif);
background-repeat: no-repeat;
text-align: left;
border-right: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-left: 1px solid #2f2f2f;
font-weight: normal;
width: 172px;
background-color: #000000;
background-position: left center;
text-indent: 8pt;
/*opacity for IE5+*/
filter: alpha(opacity=50);
/*opacity for older Mozilla browsers*/
-moz-opacity: 0.5;
/*opacity for mozilla/safari*/
opacity: 0.5;
}

This is CSS element template.

Where I can download graphics element this template?