niftyCubes : cssmenu1 menu styling

[judeabb]

Hi everyone
I'm using niftyCubes : cssmenu1 for the menu on the following site http://abe.enixns.com/~kaleidos/
My client wants each of the menu headings - Sing, Drum, Dance, Projects - to have a different background colour.
I kind of know I probably need to assign a different class to each of the <li> headings which I then style in CSS, but looking at the menu template (reproduced below) I have to admit to not having a clue where to start. I don't want to be tweaking the code and messing it all up.

Any help much appreciated.

Thanks.

Jude x

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{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->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent" {else}
<li><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
</div>
{/if}

[spcherub]

One quick option is to:
a) Assign a color value in one of the page properties (Under Options) - you do this for each page
b) Read this page property in your menu template and use it to set the appropriate class
c) Add the classes into your CSS and associate the necessary background colors.

Let me know if you need detailed steps or if the above description is sufficient.

S

[judeabb]

This sounds promising but I think I may need the step-by-step guide!
Do I assign the colour under 'Extra Page Attribute 1:'? And do I write it as CSS?
Jude x

[spcherub]

Let's see if I can explain this without actually going into into the CMS

1. For every page that needs a custom color, go into Options and setup something in the Extra Page Attribute 1 (like you guessed). The easiest will be to put the name of the class you want to use in here.

2. When you call you call the menu in your template, make sure you add the loadprops parameter, so the call will look something like this:

Code: Select all

{menu loadprops=1 template='mytemplate'}

3. In your "mytemplate" menu template, you can add something like the following in the appropriate place:

Code: Select all

class="{$node->extra1}"

Of course where you add it depends on your template and CSS code - so it could be at the LI level, the A level or a SPAN within the A. For the sake of this example let's assume you add it to the LI tag, something like this:

Code: Select all

<li {if $node->extra1 != ''}class="{$node->extra1}"{/if}>....

4. In your CSS, you will need something like this:

Code: Select all

li.myclass1 {background-color:blue;}
li.myclass2 {background-color:red;}
etc..

Assuming you tagged the Extra Page Attribute with either myclass1 or myclass2, then this should work as you need it to.

Hope that helps.

S

[judeabb]

1. For every page that needs a custom color, go into Options and setup something in the Extra Page Attribute 1 (like you guessed). The easiest will be to put the name of the class you want to use in here.

So do I write class="dance" or dance, or 'dance'?

I'm going to apply myself to this properly tomorrow- I just wanted to at least get the first bit right.

Thanking you in advance - I think what I'm about to learn is going to help me massively.

Jude x

[spcherub]

Just use "dance" (without the quotes). This will keep it clean by not having html in the extra tag.

I just realized there is another way to accomplish this as well (a more automatic way). Instead of the extra parameter tag, you could simply use the page_alias as the class name. So your page alias is "dance", then all you need is a li.dance {background-color:red;} in your stylesheet and you don't have to worry about entering the extra parameter tags.

The code in the menu template will change to:

Code: Select all

<li class="{$node->alias}">....

The downside of this method is that you won't be able to re-use the styles since each alias will be unique. But that is easily controlled in the CSS anyway, so maybe this is a better way?

[judeabb]

Hmm … it all sounds so simple.
My problem (I think( is where exactly in the menu template to put the following:

Code: Select all

<li {if $node->extra1 != ''}class="{$node->extra1}"{/if}>

Here's the template with it put in somewhere randomly that doesn't work:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">

{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}
<li {if $node->extra1 != ''}class="{$node->extra1}"{/if}>
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

	<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" {else}
	<li><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
	</ul>
</div>
{/if}

I'm guessing this isn't the right place but have no idea where the right place is.

You knew I'd be back, right?
Sorry about this - I'm not a coder!

Thanks in advance.
Jude x

[spcherub]

Hey Jude (always wanted to say that!)

Can you paste your original menu template?

-S

[judeabb]

Here it is:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">

{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->parent == true or ($node->current == true and $node->haschildren == true)}

	<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" {else}
	<li><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
	</ul>
</div>
{/if}

[spcherub]

Ok - here is a version that works for me. The specifics of whether you style the <LI>, <A> or <SPAN> tags are dependent on the styling of your menu (CSS). In my example, I am styling the <LI> tag as mentioned before:

Code: Select all

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">

{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->parent == true or ($node->current == true and $node->haschildren == true)}
   <li class="menuactive menuparent{if $node->extra1 != ''} {$node->extra1}{/if}"><a class="menuactive menuparent" 
{elseif $node->current == true}
   <li class="menuactive{if $node->extra1 != ''} {$node->extra1}{/if}"><a class="menuactive" 
{elseif $node->haschildren == true}
   <li class="menuparent{if $node->extra1 != ''} {$node->extra1}{/if}"><a class="menuparent" 
{else}
   <li {if $node->extra1 != ''}class="{$node->extra1}"{/if}><a 
{/if}

href="{$node->url}">{$node->menutext}</a>
{/foreach}

   {repeat string="</li></ul>" times=$node->depth-1}</li>
   </ul>
</div>
{/if}

Again, simply pasting this into your menu template may not work for you - it depends on how you are styling the menu and which elements you need to set the background color for - but it illustrates the general principle of assigning a page-specific parameter and using that value to control styling.

Hope that helps.

-Sanjay

[judeabb]

Wow - thanks! It's working.

Jude x