Edit Navigation <li>'s

[soy]

Hey,

currently I am migrating an existing website to GetSimple. This is super easy, except of one problem:

How can I give links an extra CSS class?

Currently the navigation is "multi-colored" with CSS classes like

Code:

<li class="yellow">Lore</li>
<li class="green">Ipsum</li>

Happy about any ideas to archieve this!

With best regards,
soy.

//woop, went in the wrong section. I am not able to delete or move, so if there is any authorized person please move this thread! I am sorry!

[shawn_a]

you cannot, unless you using jquery or something to add them.

But the menu items already have the slug as a class I think.
So you can just target those classes.

[soy]

Thanks a lot shawn_a, the slugs are an excellent quick solution, while I have more time to search for a more flexible way with jQuery!

[Connie]

you can style that with CSS in my opinion ;=)

see here: http://reference.sitepoint.com/css/pseudoclass-nthoftype

[soy]

This is a lovely, so far unknown to me, system, but unfortunately it does not support IE. As often Thanks a lot Connie for this suggestion!

[mvlcek]

This is a lovely, so far unknown to me, system, but unfortunately it does not support IE. As often Thanks a lot Connie for this suggestion!

nth-of-type is supported by IE9+.
The alternative are rules with +, they are supported by IE7+:

Code:

ul.menu li { ... }
ul.menu li + li { ... }
ul.menu li + li + li { ... }
ul.menu li + li + li + li { ... }
...

[bhwebco]

This is what I do for that type of effect. Currently im working on a web design project for small business emphasizing ultra clean design and what I have done is every single page is the same layout but all of the colors are different from page to page

About me is orange themed, front and services are blue themes, blog red themes etc. What I do is make use of GS's body id= ability and create all my styles based off this specific id. So body id="portfolio" is the green variation of my layout and hence loads all the CSS that relates to that specific id, almost like individual pages built directly in to the CSS and just retaining the generic defaults but modifying the colors as needed.

You dont even need separate templates for this and GS includes a class="current on each li of the current page anyway so changing the color is just a matter of targeting the li within that body tag".

My nav rollovers and everything functions.

Of course if your entire page uses multiple colors for links for whatever reason the nth child selector does work with most current browsers and you could always just target an alternative for ie users such as make them all gray and just use a little jquery to activate a specific color on hover or something. Microsoft should be releasing ie 10 before too much longer though and its user base is consistently declining since new browsers seem to be popping up pretty regularly.

[soy]

Thanks a lot for these suggestions! Good to know for further projects!