Possible to change just one menu item color?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
earcandy
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 11, 2014 4:37 pm

Possible to change just one menu item color?

Post 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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Possible to change just one menu item color?

Post 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.
earcandy
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 11, 2014 4:37 pm

Re: Possible to change just one menu item color?

Post 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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Possible to change just one menu item color?

Post 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 :)
earcandy
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 11, 2014 4:37 pm

Re: Possible to change just one menu item color?

Post 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?
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: Possible to change just one menu item color?

Post 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.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
earcandy
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 11, 2014 4:37 pm

Re: Possible to change just one menu item color?

Post 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!
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Possible to change just one menu item color?

Post by velden »

Feel free to contact me (private message) or post in the 'Commercial Help' forum http://forum.cmsmadesimple.org/viewforum.php?f=34
Post Reply

Return to “Layout and Design (CSS & HTML)”