Page 1 of 1

Possible to change just one menu item color?

Posted: Thu Feb 05, 2015 7:04 pm
by earcandy

[The extension txt has been deactivated and can no longer be displayed.]



I am far from a stylesheet expert but my initial guess is what I want to do is not possible. I would like to change just ONE menu item to bright yellow for color. From what I see not possible to do with this template/stylesheet?

Attached both as text files as pasting here exceeds character limit.

Re: Possible to change just one menu item color?

Posted: Thu Feb 05, 2015 7:47 pm
by velden
Well, it usually is perfectly possible. However, it would require a little customization of the menu template.

For example: you could use the menu manager template to add the alias as an id/class to the menu-item.

Then use a stylesheet to give a specific id/class the yellow color.

Re: Possible to change just one menu item color?

Posted: Fri Feb 06, 2015 1:38 am
by earcandy
Thank you Velden!

No idea how to do this (yet) but you have at least helped me in that now I know what I need to learn to do! Thank you.

Re: Possible to change just one menu item color?

Posted: Fri Feb 06, 2015 10:26 am
by velden
Use menu manager to import menu template to database (use icon behind the default templates)

For this example I imported 'minimal_menu.tpl (read only)' and called it 'minimal'. This one you can edit.

From Menu manager help:
$node->alias -- Page alias
$node->extra1 -- This field contains the value of the extra1 page property, unless the loadprops-parameter is set to NOT load the properties.
So, now you can change the template to include either (or both) a class name based on alias or a inline style based on extra1 value (extra1-3 are on options tab of Edit page in admin).

Add page alias as a class:

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 {$node->alias}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent {$node->alias}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader {$node->alias}">{$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} class="{$node->alias}"> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Use extra1 value to add color:
On the Options tab of the specific page you should then type a valid css color value in the 'Extra Page Attribute 1' text input. (e.g. 'yellow' or '#FFFF00' without the quotes)

Code: Select all

{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}

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}{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}>{$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}{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
ps. I did not test the code above so it might contain errors :)

Re: Possible to change just one menu item color?

Posted: Sat Feb 14, 2015 4:22 pm
by earcandy
So far unable to get this to work without errors :(.

I copied the menu template, made the changes, and then set the template to use the changed menu.

Unable to load template module_db_tpl 'MenuManager;tpl-buddy-006JEFFONLY'


Must be some way to do what would be a very simple thing outside of CMSMS?

Re: Possible to change just one menu item color?

Posted: Sat Feb 14, 2015 6:39 pm
by calguy1000
instead of logic like this:

{if !empty($node->extra1)} style="color:{$node->extra1};"{/if}

I would just add {$node->alias} to the class section.
then you could style the menu items for each page any way you wanted in CSS.

Re: Possible to change just one menu item color?

Posted: Tue Feb 17, 2015 6:02 pm
by earcandy
Thanks for the effort but none of this is working at all - likely due to me.

Looks like we'll have to hire someone to do this for us.

Thanks again though!

Re: Possible to change just one menu item color?

Posted: Tue Feb 17, 2015 6:51 pm
by velden
Feel free to contact me (private message) or post in the 'Commercial Help' forum http://forum.cmsmadesimple.org/viewforum.php?f=34