Hi,
I'm working on a new design and i guess pushing the limits on CMSMS.
My menu will be verical on the left side column. I'll just illustrate it here for clarity.
-----------------------my menu----
MAIN LINK1 (parent)
-link 1 (green text)
-link 2 (green text)
-link 3 (green text)
MAIN LINK2 (parent)
-link 1 (blue text)
-link 2 (blue text)
-link 3 (blue text)
How can i change the colors of the links, anyway to do this?
Thanks for your help
Menu with multi colored text links, based on parent [SOLVED]
Menu with multi colored text links, based on parent [SOLVED]
Last edited by mechatech on Thu Jul 23, 2009 3:08 pm, edited 1 time in total.
Re: Menu with multi colored text links, based on parent
There are quite a few posts on this topic on the Forum, but hey, I was a newbie once (and some consider me to still be one!), and if you don't know how to word your request these things can be hard to find. So here's a few pointers.
Take a look at this post:
http://forum.cmsmadesimple.org/index.ph ... 130.0.html
The trick is to use id="{$node->alias} -this will give each a unique id. Then write some css to style the main elements to give them the color you want. Here's a really quick (and none-too pretty) example of it in action:
If you want to keep the Main Level all one color, then alter the css accordingly, something like this:
Take a look at this post:
http://forum.cmsmadesimple.org/index.ph ... 130.0.html
The trick is to use id="{$node->alias} -this will give each a unique id. Then write some css to style the main elements to give them the color you want. Here's a really quick (and none-too pretty) example of it in action:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu Color Test</title>
<style type="text/css">
<!--
#main1 a, #main1 a:link, #main1 a:visited {
color: #ff0000;
}
#main2 a, #main2 a:link, #main2 a:visited {
color: #0033ff;
}
#main3 a, #main3 a:link, #main3 a:visited {
color: #00cc00;
}
#main1 a:hover, #main1 a:active, #main2 a:hover, #main2 a:active, #main3 a:hover, #main3 a:active {
color: #000;
}
-->
</style>
</head>
</__body>
<ul>
<li id="main1" class="parent"><a class="parent" href="#"><span>Main 1</span></a>
<ul>
<li id="sub11"><a href="#"><span>Sub 1.1</span></a> </li>
<li id="sub12"><a href="#"><span>Sub 1.2</span></a></li>
<li id="sub13"><a href="#"><span>Sub 1.3</span></a> </li>
</ul>
</li>
<li id="main2" class="parent"><a class="parent" href="#"><span>Main 2</span></a>
<ul>
<li id="sub21"><a href="#"><span>Sub 2.1</span></a> </li>
<li id="sub22"><a href="#"><span>Sub 2.2</span></a> </li>
<li id="sub23"><a href="#"><span>Sub 2.3</span></a> </li>
<li id="sub24"><a href="#"><span>Sub 2.4</span></a> </li>
<li id="sub25"><a href="#"><span>Sub 2.5</span></a> </li>
</ul>
</li>
<li id="main3" class="parent"><a class="parent" href="#"><span>Main 3</span></a>
<ul>
<li id="sub31"><a href="#"><span>Sub 3.1</span></a> </li>
<li id="sub32"><a href="#"><span>Sub 3.2</span></a> </li>
<li id="sub33"><a href="#"><span>Sub 3.3</span></a> </li>
</ul>
</li>
</ul>
<__body>
</__html>
Code: Select all
#main1 ul li a, #main1 ul li a:link, #main1 ul li a:visited {
color: #ff0000;
}
And repeat for all levels...
Re: Menu with multi colored text links, based on parent [SOLVED]
Awesome, thanks for directing me to that thread and going easy on my lack of search skills 
