Each menu item a separate CSS class

[Dr.CSS]

Try a{node->id} the a is because this will give you the page number as in Home = a15, once you make this addition to the menu render the page and right click view source to see which page gets which number then use that info for styling...

Site using this method... look under Products to see multi various color scheme...

http://blueoakom.com/

[alejandro]

Can you please tell what do I must modify in order to add diferents ids or classes to the elements of the menu?
thankyou

[carasmo]

I've messed with the menu system and I can't figure out a way to assign specific ids to a menu, however the page that is current automatically classes the  containing list item li.currentpage and then they put an h3 tag in there to make the current page bold, so there's two sets of things to style.

So this is what I would do (if you use the menu system). I'd assign a body tag to each page by assigning a new content tag where the body tag goes in the template:





Then, as you create that section, besure to put the class name of the style in those sections/pages:


Thus your rendered html will be





Then, you would do this in your style sheet



body.purple #content OR #maincol {newbackgroundcolor} -- whatever your container is called that you want to color.


body.purple li.currentpage a {style goes here}

(whether or not your styling the a tag inside that or not)


*****You have to learn about CSS and specificity if you don't know it, but what you're proposing with CMSMS is doable.


The thing that I would do, rather than mess with the menus, and if you don't need to have the customer add menu items on the fly, is create a global content with the menu xtml and style it with CSS as usual then use the body id tag.



Purple Page

Green Page






body.purple #content {newbackgroundcolor}


body.purple ul#menu li a.purple {style goes here}

[Nullig]

In your menu template, change the class statements to:

Code: Select all

<li class="a{$node->id}">

or something like that. Then your "li" elements will have a class of a15, a16, a17, etc., which you can style accordingly.

You don't have to use "a{$node->id}" if you don't want to, it was just the example given above. You could use "item{$node->id}" or "menuitem{$node->id}", if it makes it easier to remember.

Nullig

[carasmo]

Something like this:

Code: Select all

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}

<li class="currentpage a{$node->id}"><dfn>Current page is {$node->hierarchy}: </dfn><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{elseif $node->parent == true}
<li class="activeparent"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li class="a{$node->id}"><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[Nullig]

I don't think you need to use it for:

id}">

as currentpage is already styled differently.

I would leave the



alone.

Nullig

[carasmo]

yes, but he's interested in making the menus match with the background of the page, so I don't think you need to put a node at all, just make a body class and use the body class and the current page to make the tab red and the bar red, for example.

current page can be removed if the style is not used. I removed the h3 and the lack of clickability on the current page on my menu

[alejandro]

now i get it, valious info, thanks

[gt23]

I like the idea about using the node id, but I found it hard to keep track of them in the stylesheet.

Instead, I used Smarty to transform the menu text by taking the first 4 letters and lowercasing them, and then using that code as a class identifier.

So, in the template under the menu manager, it looks like this:

Code: Select all

<li class="currentpage {$node->menutext|lower|truncate:4:""}">

Then the page "About Us" would become "abou", "Portfolio" would become "port" and you can put this in your stylesheet:

Code: Select all

.abou { background: #abcdef; }
.port { background: #fedcba; }