Navigation Simple Horizontal individual colours
Navigation Simple Horizontal individual colours
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.
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.
Re: Navigation Simple Horizontal individual colours
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
Then make sure you have an entry for it in your css, eg:
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}
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;}
Re: Navigation Simple Horizontal individual colours
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:
This is what I am getting when the page loads:
James.
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:
Thanks,class="link1"
Current page is 1:About King's
class="link2"
2:Acremont
James.
Re: Navigation Simple Horizontal individual colours
Post your menu template, we need to add the bit there
Re: Navigation Simple Horizontal individual colours
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"
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"
Re: Navigation Simple Horizontal individual colours
Oh, also, your stylesheet entries have to have . before them to make them classes... eg
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:
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.
Code: Select all
.link1 {color:#000036;}
.link2 {color:#F6A901;}
...
Code: Select all
<li class="currentpage"><h3{if $node->extra1!==''} class="{$node->extra1}"{?if}>About King's</li>
Re: Navigation Simple Horizontal individual colours
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:
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}
Re: Navigation Simple Horizontal individual colours
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:
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}
Re: Navigation Simple Horizontal individual colours
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!
I can manage simple css etc. but I will succeed with this!
Code: Select all
{if $node->extra1!==''} class="{$node->extra1}"{/if}
Re: Navigation Simple Horizontal individual colours
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
- not -
class="foo"
See herefor more info on css classes
Re: Navigation Simple Horizontal individual colours
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....
...
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....