Joomla Templates Club 406,261 posts

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#159427

Is it possible to change the color of each of my Menu items in the main menu? For example, Home can stay the default blue, About Us green, Contact Us violet, etc…

Just wondering if this was possible?

Thanks!

Jimmy

[kenkel22 Friend kenkel22Join date: August 2006Posts: 81Downloads:0Uploads:6 Thanks: 21 Thanked: 5 times in 1 posts]

#374789

this may or may not help you but i needed a similiar option in a different template. Take a look at this link. I will try to find out more but it’s been a couple of years ago.

http://www.joomlart.com/forums/topic/modifying-top-menu-tab/

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#374828

<em>@jewellman 218099 wrote:</em><blockquote>Is it possible to change the color of each of my Menu items in the main menu? For example, Home can stay the default blue, About Us green, Contact Us violet, etc…

Just wondering if this was possible?

Thanks!

Jimmy</blockquote>

Please consult this post
http://www.joomlart.com/forums/topic/custom-colors-per-menu-mega-menu/#post-358537

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#374858

Don Lee- I read over your post and tried your recommendations. I just added this code at the bottom of the template.css file and nothing changed- ._red{
background: red;
}

Was I supposed to add the code in a specific section of the template.css file?

Thanks!

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#374949

I was able to do this on the JA Purity II template and the menus cahanged colors –

#menu53 {background: url(../images/grad1-mask.png) repeat-x bottom left #666;}
#menu53:hover {background: #666;}
#menu72 {background: url(../images/grad1-mask.png) repeat-x bottom left #900;}
#menu72:hover {background:#900;}
#menu56 {background: url(../images/grad1-mask.png) repeat-x bottom left #260;}
#menu56:hover {background:#260;}
#menu77 {background: url(../images/grad1-mask.png) repeat-x bottom left #069;}
#menu77:hover {background:#069;}

However, I tried something similar to this for the JA Droid template and it didn’t change anything…

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#375030

<em>@jewellman 219036 wrote:</em><blockquote>Don Lee- I read over your post and tried your recommendations. I just added this code at the bottom of the template.css file and nothing changed- ._red{
background: red;
}

Was I supposed to add the code in a specific section of the template.css file?

Thanks!</blockquote>

Please make sure you added a space character before additional class name. Its supposed to be: ” _red”
Then you can add the code to any place in template.css file.

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#375117

Still no luck. I did the following-

1. Added _red to additional class for one of my menu items.
2. Added this code to the template.css file located at /templates/ja_droid/css and the template.css file located at /templates/ja_droid/core/themes/green/css-
._red{
background: red;
}

Is there nothing else I am supposed to be doing?

Thanks!

Jimmy

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#375277

Don- Anything else I can try to make the menus all a different color? The code in the template.css file just isn’t working for me.

Thanks!

Jimmy

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#375336

<em>@jewellman 219644 wrote:</em><blockquote>Don- Anything else I can try to make the menus all a different color? The code in the template.css file just isn’t working for me.

Thanks!

Jimmy</blockquote>

Can you PM me your site URL, admin account and FTP account for checking?

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#375890

Don- Did you get the PM I sent you a few days ago?

Jimmy

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#375949

<em>@jewellman 220399 wrote:</em><blockquote>Don- Did you get the PM I sent you a few days ago?

Jimmy</blockquote>

Hi Jimmy,

Sorry for this late reply, I got your PM. Can you let me know which menu item you added the class?

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#375951

Yes, I added _red to Additional Class for the menu item “About Dr. Danzer” and then added-
._red{
background: red;
}
to the template.css file

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#375965

<em>@jewellman 220496 wrote:</em><blockquote>Yes, I added _red to Additional Class for the menu item “About Dr. Danzer” and then added-
._red{
background: red;
}
to the template.css file</blockquote>

Jimmy,

You forgot adding a space before the class name. It is expected to be ” _red” rather than “_red”. Moreover, in the css file, try to edit a bit:

._red{
background: red !important;
}

Good luck!

1 user says Thank You to Don Lee for this useful post

1. jewellman

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#376042

It’s working now. Changing the template.css file located at /templates/ja_droid/core/themes/green/css did the trick. One last question- do you know how many colors I can use?

Jimmy

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#376054

<em>@jewellman 220611 wrote:</em><blockquote>It’s working now. Changing the template.css file located at /templates/ja_droid/core/themes/green/css did the trick. One last question- do you know how many colors I can use?

Jimmy</blockquote>

You can use any color you want, consult the color chart here http://www.somacon.com/p142.php

Then find the suitable color to get the color code. For example, I found the code of red color is #FF0000 so I add the css:

._red{
background: #FF0000 !important;
}

But if I want it to be blue I add:

._red{
background: #0000FF !important;
}

1 user says Thank You to Don Lee for this useful post

1. jewellman

[Author]

Posts