Change color of left vertical navigation menu

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
herbert00
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Apr 15, 2010 5:49 am

Change color of left vertical navigation menu

Post by herbert00 » Mon Apr 19, 2010 4:50 pm

Hello,

I am using the JA_Purity Theme and I would like to change the color of the left vertical navigation menu.
I read a lot of things about changing the color, but I didn't get it right.
Can anybody explain it for a dummy? :-[

Thanks and best regards
Herbert

User avatar
PhilOSparta
Joomla! Guru
Joomla! Guru
Posts: 534
Joined: Sun Feb 25, 2007 10:44 pm
Location: New Jersey, USA
Contact:

Re: Change color of left vertical navigation menu

Post by PhilOSparta » Tue Apr 20, 2010 8:30 pm

To make the changes, edit /css/menu.css at the following code. Note the colors blue, red, green and silver were used to create the following image.
/* Default Joomla! Menu */
#ja-container2 ul.menu {
margin: 0;
padding: 1px 0 0;
list-style: none;
background: url(../images/hdot2.gif) repeat-x top;
}

#ja-container2 ul.menu li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}

#ja-container2 ul.menu li a {
padding: 2px 0;
display: block;
color: #333333;
background: url(../images/hdot2.gif) repeat-x bottom blue;
text-decoration: none;
outline: none;
}

#ja-container2 ul.menu li a span {
padding-left: 16px;
background: url(../images/bullet.gif) no-repeat 5px 5px red;
}

#ja-container2 ul.menu li a:hover,
#ja-container2 ul.menu li a:active,
#ja-container2 ul.menu li a:focus {
color: #333333;
background: url(../images/hdot2.gif) repeat-x bottom green;
text-decoration: none;
}

#ja-container2 ul.menu li.active a {
background: url(../images/hdot2.gif) repeat-x bottom silver;
color: #7BA566;
font-weight: bold;
text-decoration: none;
}
menu-colors.png
I hope that helps.

Phil
You do not have the required permissions to view the files attached to this post.

Roef
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Wed Apr 07, 2010 2:42 pm

Re: Change color of left vertical navigation menu

Post by Roef » Tue Jun 15, 2010 10:04 am

very helpfull thanks,

but I how do I change so the submenu got a different color than the main one?

So far I managed to change background and active/hover/focus color for submenu (default Joomla! Overview -> "whats new in 1.5") but I got the same main color on both.

example; I want to click "joomla overview" that is in white text, but want the submenu "whats new in 1.5" to appear in black text, can anyone point me to the right direction?

thank you!


Locked

Return to “Templates for Joomla! 1.5”