By goldschmidt.a on

Hi all,

I'm using Drupal 6.1 and the current version of Nice_Menus module.
Is there any way in the CSS to make it so that the first link in the menu (sometimes known as the first-child) can be a different text color than the rest of the links?
And, is there any way to control the text color on each individual link in the nice menu?

Thanks,
Andrew G

⋅ Categories: Drupal 6.x

Comments

add1sun’s picture

add1sun commented

Each LI has a unique id and class attribute so you can style each one however you want.

As for the first-child, that menu item doesn't get any special markup to identify it but you can always override the theme function and add your own logic/markup. Perhaps looking at how core is setting the first and last classes. Of course you can also use CSS first-child pseudo class but of course that doesn't work in IE6.

Lullabot loves you | Be a Ninja, join the Drupal Dojo

Drupalize.Me, The best Drupal training, available all the time, anywhere!

goldschmidt.a’s picture

goldschmidt.a commented

Thanks for the reply, but I'm still a little bit unclear. How do I find what the unique id and class attributes are? I looked at nice_menus.module file and found the line of code that probably tells me, but I'm not that good with php. I think it probably has something to do with line 300:
$output .= '<li id="menu-'. $mlid .'" class="menuparent '. $path_class .'">'. l($menu_item['link']['title'], $menu_item['link']['href']);

What would that give me for an id or class to use for my CSS file? Is it something like the following?

ul.nice-menu ul li a#menu-[some number] {
*css code in here*
}

What is the $mlid variable? Is that simply a number?

Thanks for your help add1sun!

Sincerely,
Andrew G

dman’s picture

dman commented

The menu id (if that's what mlid is) can be seen when editing menus on the admin manu page. But that's a long way around.
Just use the source.
View source to see what is being output, or use the developer toolbar to click/browse on them and find out the IDs.

Also, you should notice that the id from that snippet is on the LI, not the a, so maybe:

ul.nice-menu li#menu-nn a{}

That will have the effect of also coloring the nested menu links under that parent item - which may or may not be right for you.

PERSONALLY I prefer to tag and theme my menu items using munged versions of the menu text or path - much more logical when building the css than obscure system IDs.
But that requires more themeing skill.

eg, inspect the ids (and css) on the menus on http://solar.energywise.govt.nz/building-industry
Not nicemenus, but could be the same job.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

add1sun’s picture

add1sun commented

dman is correct (if you look higher up in the code). The mlid is the menu id. The $path_class variable is the path (e.g. class="menu-path-admin" for the Administer link) so you don't need to add that yourself with mad theming skillz. :-)

Lullabot loves you | Be a Ninja, join the Drupal Dojo

Drupalize.Me, The best Drupal training, available all the time, anywhere!

goldschmidt.a’s picture

goldschmidt.a commented

add1sun, dman, thanks so much!

I found the id's for my menus. Since I made a custom menu full of custom items, I had to search a little by calling up a quick view source to see what the links had for id's on them (just numbers, like li id="menu-594" and li id="menu-715"). There's probably a better way to determine what those numbers actually are (in like a table in my database), but ya know, whatever works. I created references to the right individual id's in my css:
ul.nice-menu li#menu-714 a { }
and the changes worked perfectly! I also see the class name as being the url path for each link (which I could probably use for applying a style to every link that goes to a certain page, such as admin or home). Thanks for the info, it all makes sense now.

Thanks,
Andrew G