Page 1 of 1
Re: Each menu item a separate CSS class
Posted: Tue Dec 05, 2006 10:43 am
by 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/
Re: Each menu item a separate CSS class
Posted: Tue Nov 27, 2007 6:49 pm
by 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
Re: Each menu item a separate CSS class
Posted: Tue Nov 27, 2007 11:52 pm
by 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}
Re: Each menu item a separate CSS class
Posted: Wed Nov 28, 2007 12:08 am
by Nullig
In your menu template, change the class statements to:
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
Re: Each menu item a separate CSS class
Posted: Wed Nov 28, 2007 12:29 am
by 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}
Re: Each menu item a separate CSS class
Posted: Wed Nov 28, 2007 12:40 am
by Nullig
I don't think you need to use it for:
id}">
as currentpage is already styled differently.
I would leave the
alone.
Nullig
Re: Each menu item a separate CSS class
Posted: Wed Nov 28, 2007 12:52 am
by 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
Re: Each menu item a separate CSS class
Posted: Wed Dec 05, 2007 12:26 pm
by alejandro
now i get it, valious info, thanks
Re: Each menu item a separate CSS class
Posted: Tue Dec 18, 2007 7:46 am
by 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; }