How to change color of single menu item?

leshall · **Posted:** Fri Jul 03, 2009 3:02 pm

Hello everyone & happy holidays to US members.

I am building a site with a horizontal menu. Client wants just one top level menu item to have a different color bgnd.

Where would I make that change? I found some older posts address this but couldn't quite grock how to do it....

Any help gratefully received.

Thanks. Les Hall

Jeff · **Posted:** Fri Jul 03, 2009 3:28 pm

What is the criteria this color change? If it is just, I want page "X" then I would suggest putting a special word in one of the page "extra" fields and checking it in the menu template.

leshall · **Posted:** Fri Jul 03, 2009 10:16 pm

I didn't explain very well.

In the horizontal CSS menu you can change the CSS so that when there is a mouse-over a page link text (menu item) the background changes color and or the text changes color.

I want just one link text to change to different color. e.g. I want all of them to change bgnd to grey and one to change it's bgnd to red...

Thanks. Les

Jeff · **Posted:** Fri Jul 03, 2009 10:21 pm

Still not sure what you want. But if it is on the fly (other than using hover) background changing you can use javascript to modify the CSS for different objects.

leshall · **Posted:** Sun Jul 05, 2009 3:09 am

Not sure how to make this clearer...

With the Horizontal CSS menu when you mouse over a link the bgnd of that link name changes.

What I want to do is to make the color of a link bgnd to be different in the static, nothing happening nothing moving over it stage.

I just want one single menu item to have a different color bgnd or different color text.

Can't think how to explain that any clearer.

Sorry.

Les

viebig · **Posted:** Sun Jul 05, 2009 3:34 am

ok!

hands at work!

we can add s special class to an element using the $node->alias var inside the menu template..

for example... the minimal_menu template looks like:

Code:

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{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><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

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

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

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

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

for example if you have a page with the alias "special"

Code:

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{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}

{* Special Alias *}

{if $node->alias == "special"}
<li class="special"><a href="{$node->url}" class="special"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
 
{* and include elseif on the statement, to mantain the logic *}

{elseif $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

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

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

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

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

now you can add a specific class targeting any elements there (li or in this case), looking closer:

Code:

{if $node->alias == "special"}
<li class="special"><a href="{$node->url}" class="special"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

Be sure that the next statement has a "elseif" instead of a "if", since the "if" is for the beggining of the block.

Also, note that depending on your css, you need to make sure that other classes will not override the "special" class you´ve created.

Regards

G

leshall · **Posted:** Tue Jul 07, 2009 2:48 pm

Thanks viebig - I'll give it a try.

Les

leshall · **Posted:** Tue Jul 14, 2009 5:05 pm

I'm sorry viebig - I looked at your code and simply do not know how to use it. I barely getting my head around CSS let alone PHP.

So I was wondering if there is an easier method?

Doesn't each menu item have an alias or something like that. The menu item I want to be red is called "Shopping". The site is not going to have the top menus changed so that is always going to be the same...

Isn't there a technique where you can have 'random' bits of HTML put in every page? COuldn't I put some style in that tells every sample of Shopping to be red?

Excuse my naivety if this is total crap!

Thanks. Les

viebig · **Posted:** Wed Jul 15, 2009 4:57 pm

This a menu template --- see Menu Manager -> Templates

Regards

How to change color of single menu item?

Who is online