How to change color of single menu item?

[leshall]

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]

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]

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]

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]

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]

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: Select all

{* 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: Select all

{* 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: Select all

{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]

Thanks viebig - I'll give it a try.

Les

[leshall]

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]

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

Regards