[solved] how to convert an HTML/CSS menu to work in CMSMS

[jpatti]

OK, I have a horizontal menu with 5 items across the top.  It's very simple, got background images, doesn't "light up" when on the active page or on hover, no drop-downs, just a plain vanilla horizontal menu.  However, one link is to an external URL and it needs to have different background images than all the rest.  

I've a screenshot attached taken from the HTML/CSS version I'm trying to turn into a CMSMS template.  Note that Little Black Datebook is NOT a page on the current site, we're not on this page, we're not hovering, none of that.  It's a link to the "sister" site, an external link.  

I've looked at the HTML written by menu.tpl and menu.tpl itself and the description of the parameters it takes, and I'm unsure how to accomplish this, how to tell CMSMS this one item needs an additional class so I can style it differently.  

[uniqu3]

I don't know how exactly menu.tpl looks like but you could try:

Code: Select all

{if $node->alias !="aliasforexternalpage"}
<a class="extraclasstostyle" 

[jpatti]

Thanks uniq, twice you've been very helpful to me.

It appears I need to go learn smarty...

[jpatti]

I found a better solution, so decided it should be here for the next person searching for an answer to this.

My solution is better in that it's pure CSS and doesn't involve mucking about with the tpl file, instead just using attribute selectors in the stylesheet.  You just refer to the item you want to give a different background as  a[href='http://specific_url_here'] {styles go here}

I've never played with attribute selectors before.  There's spotty support for the entire specification, but the simple [attribute='value'] is well-supported in all modern browsers plus IE7 and up according to documentation I can find.  That's good enough for me, YMMV.

I've personally tested in IE8, Firefox 3.6.3 and Chrome 5.0.375.99 and all is good.

[uniqu3]

Yes you are right, unfortunately i still have to deal with IE6 support in many cases that's why i prefer an extra class.

[Dr.CSS]

You can import the menu template of your choice and add {$node->alias} to all the li or a href calls then all the menu items will have their page alias as a class then just use that pages alias in your css call...

li.'pagealias' or a.'pagealias' {your style calls}...