• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: How to change color of single menu item?
PostPosted: Fri Jul 03, 2009 3:02 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jun 12, 2009 7:47 pm
Posts: 23
Location: Dallas, TX
Hello everyone & happy holidays to US members.  :D

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


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Fri Jul 03, 2009 3:28 pm 
Offline
Power Poster
Power Poster

Joined: Mon Jan 21, 2008 5:51 pm
Posts: 702
Location: MI
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.

_________________
Arvixe Hosting / CMSMS Community Liaison
Looking for quality CMSMS Hosting? Try Arvixe


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Fri Jul 03, 2009 10:16 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jun 12, 2009 7:47 pm
Posts: 23
Location: Dallas, TX
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


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Fri Jul 03, 2009 10:21 pm 
Offline
Power Poster
Power Poster

Joined: Mon Jan 21, 2008 5:51 pm
Posts: 702
Location: MI
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.

_________________
Arvixe Hosting / CMSMS Community Liaison
Looking for quality CMSMS Hosting? Try Arvixe


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Sun Jul 05, 2009 3:09 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jun 12, 2009 7:47 pm
Posts: 23
Location: Dallas, TX
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


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Sun Jul 05, 2009 3:34 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Mon Oct 08, 2007 12:56 pm
Posts: 643
Location: São Paulo, Brazil
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

_________________
PSD/PNG Images to Valid XHTML/CSS respecting WAI standards and CMSMS integration templates/modules at low rates. PM me.

The Object Tag - XHTML Compliant Flash, Windows Media and Quicktime!

Download the Object Tag
Object Tag 0.2 Howto

SEO - News title on the title of the page

[b]Portuguese Forum Moderator [b]
[b]CMSMS Enthusiast [b]

Latest CMSMS Experiments
Photo Studio WZ
Vento Haragano Steakhouse
Heineken Website
Kinoshita Website


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Tue Jul 07, 2009 2:48 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jun 12, 2009 7:47 pm
Posts: 23
Location: Dallas, TX
Thanks viebig - I'll give it a try.

Les


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Tue Jul 14, 2009 5:05 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jun 12, 2009 7:47 pm
Posts: 23
Location: Dallas, TX
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


Top
 Profile  
 
 Post subject: Re: How to change color of single menu item?
PostPosted: Wed Jul 15, 2009 4:57 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Mon Oct 08, 2007 12:56 pm
Posts: 643
Location: São Paulo, Brazil
This a menu template --- see Menu Manager -> Templates

Regards

_________________
PSD/PNG Images to Valid XHTML/CSS respecting WAI standards and CMSMS integration templates/modules at low rates. PM me.

The Object Tag - XHTML Compliant Flash, Windows Media and Quicktime!

Download the Object Tag
Object Tag 0.2 Howto

SEO - News title on the title of the page

[b]Portuguese Forum Moderator [b]
[b]CMSMS Enthusiast [b]

Latest CMSMS Experiments
Photo Studio WZ
Vento Haragano Steakhouse
Heineken Website
Kinoshita Website


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Arvixe - A CMSMS Partner