Joomla Templates Club 406,261 posts

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#149829

Hello,

I would like to have different background colors for different menu items when hover and active.
Here, in default theme, it’s all red background for active and hover items, I would like one red, one green, etc…

I think this should be possible, because each menu item has a different class when I look at the source code (menu-item0, menu-item1, etc…), I made several tries in the CSS, but I can’t get it done… :((

I’m using moomenu.

Could you please help me here ? I really need to get this done…

I also tried to install JA Extended plugin, to do this easier, but it doesn’t seem to work with JA Lead (even if the installation went fine).

Hoping for answers,
Best regards
David aka Shapes

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#337864

Hi shapes

In Moo Menu every link as it own id. For example:

<li class=””>
<a id=”menu62″ class=”first-item” title=”Default color” href=”/Bostongolf/?ja_color=default”>
<span class=”menu-title”>Default color</span>
</a>
</li>
<li class=””>
<a id=”menu63″ title=”Blue color” href=”/Bostongolf/?ja_color=blue”></a>
</li>

In css you can style by id and assigned a different background for each menu link.
If you have any problem solving this I’ll be glad to help you.

Best regards

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#337889

Hello vitormarques,

Thanks for your answer.

Yes, I’ve noticed that the menu items have different classes,
but I made several tries in the ja.moomenu.css file, but with no success…

I can’t find the right syntax I think.

Would you have it ?
Could you give me some help on how to achieve this ?

Hoping for answers,
Best regards,
David aka Shapes

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#337891

Hi again.

Please try this way:

#ja-cssmenu li ul a#menu63{ /* menu63 is just a reference.. i don’t know if it exists */
/* css code here */
}

If this doesn’t work please let me know.
Best regards

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#337896

Hi again,

Thanks for your quick answer !
But it doesn’t seem to work…

I allready found the way to change the font color of a menu item when not hover or active,

I replaced in the ja.moomenu.css file :

#ja-cssmenu li a {
background: #666666;
display: block;
text-decoration: none;
font-size: 10px;
color: #cccccc;
padding: 11px 13px 11px 12px;
font-weight: normal;
text-transform: uppercase;
}

with

#ja-cssmenu li a {
background: #666666;
display: block;
text-decoration: none;
font-size: 10px;
padding: 11px 13px 11px 12px;
font-weight: normal;
text-transform: uppercase;
}

and I added :

.menu-item1 {
color: #20265c;
}

It worked fine, but what I want, is the background color to change only when hover and active…

And there, I can’t find the right syntax… :-[

You can see the website under construction at :
http://www.shapes.fr/Bostongolf/

Any ideas ?

Best regards,
David aka Shapes

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#338030

Hi shapes.

Ok I see what you want. I’m going to work on this and when I’ll get back at you when I have an answer for you.

Best regards

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#338034

Ok.

So please try this:

.menu-item1:hover, #ja-cssmenu li.active .menu-item1{
color: #20265c;
}

Best regards

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#338226

Hello vitormarques,

Thanks again for your help !

It’s almost right…
For active items, it’s OK, when on page :
http://www.shapes.fr/Bostongolf/index.php?option=com_content&view=frontpage&Itemid=53
I have a different background for the item.

But for the mouseover effect, it’s still all red.

I made some tries around the syntax you sent me, but I can’t get it done, feeling a bit stupid here… :-[

Would you know how to fix this ?

Best regards,
David aka Shapes

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#338282

Hi again.

I’ll do some tests and see what’s happening. I’ll get back at you when I have some news.

Cheers

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#340342

Hello vitormarques,

I’m just passing by to ask if you had time to check and made some tries…

Any new ideas for me ?

Hoping for answers,

Best regards,
David aka Shapes

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#340416

Dear David aka Shapes!

You would like have to different background color for each menu item in the list. i have checked the html mockup of the ja menu, so you only apply this feature for the parent menu of level top, all submenus could not apply.

can you please give me more information about the problem happening, i ‘ll resolve this issue for you

Thanks

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#340913

Hello tienhc,

As I said, I would like to have different background colors for different menu items when hover and active. Here, in default theme, it’s all red background for active and hover items, I would like one red, one green, etc…

Thanks to vitormarques, I have get it done for the “active” effect :
If you go on page :
http://www.shapes.fr/Bostongolf/index.php?option=com_content&view=article&id=75&Itemid=154
and on page :
http://www.shapes.fr/Bostongolf/index.php?option=com_content&view=article&id=131&Itemid=75
For example, the backgrounds of the menu items are different.

Now, I would like the same thing for the “hover / mouseover” effect, and if possible, for the effects in each sublevels.

Hope I’m understandable…

Hoping for answers,
Best regards,
David aka Shapes

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#341137

Dear shapes!

here is the solution to resolve your issue:

example with this menu : http://www.shapes.fr/Bostongolf/index.php?option=com_content&view=article&id=75&Itemid=154

1) open the file templates/ja_lead/ja_menus/ja_moomenu/ja.moomenu.css file and find code”

.menu-item2:hover, #ja-cssmenu li.active .menu-item2{
background-color: #811539;
}

and replace:

.menu-item2:hover, #ja-cssmenu li.active .menu-item2{
background-color: #811539!important;
}

Good luck

1 user says Thank You to Saguaros for this useful post

1. David Porré

[David Porré Friend David PorréJoin date: September 2014Posts: 194Downloads:44Uploads:5 Thanks: 23 Thanked: 9 times in 1 posts]

#341175

Hello tienhc,

Thanks ! Indeed, it works…
The only little problem remaining was that I was losing the background color when going on the sublevels with the mouse…

So I replaced your code :

.menu-item2:hover, #ja-cssmenu li.active .menu-item2{
background-color: #811539!important;
}

With :

.menu-item2:hover, #ja-cssmenu li.active .menu-item2,
#ja-cssmenu li.focus .menu-item2,
#ja-cssmenu li.sfhover .menu-item2,
#ja-cssmenu li.havechildsfhover .menu-item2,
#ja-cssmenu li.havechild.activesfhover .menu-item2{
background-color: #811539!important;
}

And now it’s OK.

Thanks again !!!

Best regards,
David aka Shapes

[Author]

Posts