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