Navigation Simple Horizontal individual colours

[jhoulston]

Hi,

I am trying to create an effect using navigation simple horizontal.  I will be having 8 links within my horizontal navigation section which will never change.  When the link on the nav is clicked it will then use ShadowMenu Vertical Navigation.

I have been playing around with the css with the navigation simple horizontal but instead of having the same colour for each link, I would like each link to have a different colour:

Link 1 - #000036
Link 2 - #F6A901
Link 3 - #0F4689
Link 4 - #311541
Link 5 - #6B192D
Link 6 - #000000
Link 7 - #0289C0
Link 8 - #898A8E

How would I go about doing this?

Any help would be greatly appreciated.

Many thanks,
James.

[Stom]

Easily done with your menu manager and stylsheet.

Go into each of your pages, go to the Options tab, under "Extra Page Attribute 1:" put in "link1", "link2" etc.

Then in your menu template, have something like

Code: Select all

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

Then make sure you have an entry for it in your css, eg:

Code: Select all

link1 {color:#000036;}
link2 {color:#F6A901;}
link3 {color:#0F4689;}
link4 {color:#311541;}
link5 {color:#6B192D;}
link6 {color:#000000;}
link7 {color:#0289C0;}
link8 {color:#898A8E;}

[jhoulston]

Stom,

Many thanks for your reply.  I have given that a go but no luck.

Would you mind taking a quick look at the css file for the navigation:

/********************MENU*********************/

/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#menu_horiz {
/* background color for the entire menu row */
background-color: #EEEEF0;
                border-left: 1px solid #cccccc;
                border-right: 1px solid #cccccc;
                border-top: 1px solid #cccccc;
/* insure full width */
width: 99.8%;
/* set height */
height: 49px;
margin: 0;
}
div#menu_horiz ul {
/* remove any default bullets */
list-style-type: none;
margin: 0;
/* pushes the menu div up to give room above for background color to show */
padding-top: 10px;
/* keeps the first menu item off the left side */
padding-left: 10px;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
float: left;
/* remove any default bullets */
list-style: none;
/* still no margin */
margin: 0;
}
/* the links, that is each list item */
div#menu_horiz a,
div#menu_horiz h3 {
/* pushes li out from the text, sort of like making links a certain size, if you
give them a set width and/or height you may limit you ability to have as much
text as you need */
padding: 12px 15px 15px 0px;
/* still no margin */
margin: 0;
/* removes default underline */
text-decoration: none;
/* default link color */
color: #000036;
/* makes it hold a shape, IE has problems with this, fixed above */
display: block;
}
/* hover state for links */
div#menu_horiz li a:hover,
div#menu_horiz li a.currentpage,
div#menu_horiz li.currentpage h3 {
/* set your image here, dark grey image with white text set above*/
background:  #000036;
color: #ffffff;
/*background:  url(uploads/ngrey/nav.png) repeat-x left -50px;*/
}
div#menu_horiz a span,
div#menu_horiz h3 span {
/* compensates for no left padding on the "a" */
padding-left: 15px;
}
div#menu_horiz li.parent a span,
div#menu_horiz li.parent h3 span  {
/* no left padding on the "a" we can set it here, it lets us use the span for an
image */
padding-left: 20px;
/* set your image here, down arrow to note it has children, left side of text */
/* background: url(uploads/ngrey/active.gif) no-repeat 0.3em center;*/
}
div#menu_horiz li.parent a:hover span,
div#menu_horiz li.parent h3:hover span {
padding-left: 20px;
/* hover replaces default with right arrow image */
/*background: url(uploads/ngrey/parent.gif) no-repeat 0.3em center;*/
}
div#menu_horiz li.menuactive a span,
div#menu_horiz li.menuactive h3 span {
padding-left: 20px;
/* menuactive replaces default with right arrow image */
/*background: url(uploads/ngrey/parent.gif) no-repeat 0.5em center;*/
color: #ffffff;
}
/* active parent, that is the first level parent of a child page that is the
current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover,
div#menu_horiz li.menuactive h3:hover {
/* set your image here, light image with #000/black text set below*/
background:  #000036;;
color: #000;
}

link1 {color:#000036;}
link2 {color:#F6A901;}
link3 {color:#0F4689;}
link4 {color:#311541;}
link5 {color:#6B192D;}
link6 {color:#000000;}
link7 {color:#0289C0;}
link8 {color:#898A8E;}

This is what I am getting when the page loads:

class="link1"
                 Current page is 1:About King's

class="link2"
                 2:Acremont

Thanks,
James.

[Stom]

Post your menu template, we need to add the bit there

[Jos]

Instead of manually putting a classname into the 'extra' field, you may find some use in the smarty index or iteration in foreach function:
http://www.smarty.net/manual/en/languag ... oreach.php

or (more easy) the {counter} function:
http://www.smarty.net/manual/en/languag ... ounter.php

btw: to use the 'extra' field, you have to call the menu with loadprops="1"

[Stom]

Oh, also, your stylesheet entries have to have . before them to make them classes... eg

Code: Select all

.link1 {color:#000036;}
.link2 {color:#F6A901;}
...

Plus, in your source code, the classes aren't appearing in any of your elements, they're just floating, they need to be included inside a link or someting. Eg:

Code: Select all

<li class="currentpage"><h3{if $node->extra1!==''} class="{$node->extra1}"{?if}>About King's</li>

Also, as Jos says, a count would be easier, this method has more control. You coudl specify colour values in the extra fields etc. Also, in CMSMS 1.6.6 this is working without the loadprops parameter.

[jhoulston]

Thanks for the reply, i have added the dot to before the link reference in the css file.
Here is accessible_simple_navigation.tpl which I am working with:

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{if $count > 0}
  {* there are nodes available for display *}
 
  {foreach from=$nodelist item=node}
    {if $node->depth > $node->prevdepth}
      {* depth of menu has increased *}
      {repeat string="" times=$node->depth-$node->prevdepth}
    {elseif $node->depth prevdepth}
      {* depth of menu has decreased *}
      {repeat string="" times=$node->prevdepth-$node->depth}
    {/if}

    {if $node->parent == true or ($node->current == true and $node->haschildren == true)}
      {* display the active parent with children *}
      url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}:{$node->menutext}

    {elseif $node->haschildren == true}
      {* display the active parent *}
      url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}:{$node->menutext}

    {elseif $node->current == true}
      {* display the current page differently *}
      Current page is {$node->hierarchy}:{$node->menutext}

    {elseif $node->type == 'sectionheader'}
      {* display section headers *}
      {$node->menutext}

    {elseif $node->type == 'separator'}
      {* display separators *}
     

    {else}
      {* normal menu items *}
      url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}:{$node->menutext}

    {/if}

  {/foreach}

  {* close any remaining unordered lists *}
  {repeat string="" times=$node->depth-1}
 
{/if}

[Stom]

Is that just a stock template or have you stripped it down to what you need? I'll do the work for you if you're really stuck but better you learn how to do this yourself.

Basically, all you need to do for each tag is a quick check of $node->extra1 and see what it's value is. Eg, previous example:

Code: Select all

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

[jhoulston]

Does that mean that if I have within the menu template I need to insert the code after it or does it need to be added into the etc.

I can manage simple css etc. but I will succeed with this!

Code: Select all

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

[Stom]

Yes, the attribute need to be within the element tag, otherise your code is broken.


- not -
class="foo"

See herefor more info on css classes

[Dr.CSS]

You can add more than one class to an item...

...

If you do anything with numbers like hierarchy you need to add a letter in front of it, you can't use numbers for css calls...

You can use hierarchy number to do this so you wont have to have any page changes/additions...

class="a{$node->heirarchy}"  will give you class="a1",  class="a2",  class="a3", etc....