Multicolor menu

1
2
3

info565
Topic Author
Offline

More

4 years 5 months ago #6926 by info565

info565 created the topic: Multicolor menu

Hello,

i have a menu with 5 items, now i would like to give every item (included subitems) a separate color.
Can I change something in the css file, maybe that I create for every "dj-up itemid***"
a css class?

Kind regards,

Basti

Please Log in or Create an account to join the conversation.

marcin
Offline

More

4 years 5 months ago - 4 years 5 months ago #6927 by marcin

marcin replied the topic: Multicolor menu

Hello,

Yes. Each menu item has its own class with item ID.

You can use a web inspector to check the current item id of menu item or you can check it in Joomla back-end in the Menus section. Then you need to add styles to custom.css file as follows:

.dj-main li.itemid435 a.dj-up_a {color: red;}

Regards,
Marcin

Attachments:

Last Edit: 4 years 5 months ago by marcin.

Please Log in or Create an account to join the conversation.

info565
Topic Author
Offline

More

4 years 4 months ago - 4 years 4 months ago #6932 by info565

info565 replied the topic: Multicolor menu

Hey,
thanks for the fast reply.
That was what I looking for.
Now I created for every menu item a special class in the custom css file.

If you select a subitem of a item the main item is always highlighted.
The problem is that these two borders always take the color of the last item in the css file. So that means the active menu is always green (itemid786).

On mouseover you can see the correct color. So I probably miss a tag? On the picture you can see the menu and here is my custom.css file:

/*--------------------------------------------------------------
# Copyright (C) joomla-monster.com
# License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
# Website: http://www.joomla-monster.com
# Support: info@joomla-monster.com
---------------------------------------------------------------*/

/* ==========================================================================
   CUSTOM styles
   ========================================================================== */
  
/* Here you can add LESS styles to override the default template styles */

.testsuffix {
  background: #8cc63f;
  color:black;
}
    
.dj-main li.itemid782 a.dj-up_a {
color: #fab700;
  
}

}

.dj-main li.itemid782.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #fab700;
border-bottom: 7px solid #fab700;
}
.dj-main li.itemid782.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #fab700;  }
.dj-main li.itemid782.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #fab700;}
.dj-main li.itemid782.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #fab700;}

   

.dj-main li.itemid783 a.dj-up_a {
color: #46a5d3;
}

.dj-main li.itemid783.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #46a5d3;
border-bottom: 7px solid #46a5d3;
}
.dj-main li.itemid783.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #46a5d3;  }
.dj-main li.itemid783.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #46a5d3;}
.dj-main li.itemid783.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #46a5d3;
}

    

.dj-main li.itemid784 a.dj-up_a {
color: #ac4f11;
}

.dj-main li.itemid784.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #ac4f11;
border-bottom: 7px solid #ac4f11;
}
.dj-main li.itemid784.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #ac4f11;  }
.dj-main li.itemid784.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #ac4f11;}
.dj-main li.itemid784.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #ac4f11;
}

    

.dj-main li.itemid787 a.dj-up_a {color: #006591;}

.dj-main li.itemid787.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #006591;
border-bottom: 7px solid #006591;
}
.dj-main li.itemid787.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #006591;  }
.dj-main li.itemid787.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #006591;}
.dj-main li.itemid787.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #006591;
}



.dj-main li.itemid785 a.dj-up_a {color: #4a1f10;}
.dj-main li.itemid785 a.dj-up_a active {color: #4a1f10;}


.dj-main li.itemid785.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #4a1f10;
border-bottom: 7px solid #4a1f10;
}
.dj-main li.itemid785.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #4a1f10;  }
.dj-main li.itemid785.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #4a1f10;}
.dj-main li.itemid785.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #4a1f10;
}
    



.dj-main li.itemid786 a.dj-up_a {color: #7cc623;}
.dj-main li.itemid786 a.dj-up_a active {color: #7cc623;}

.dj-main li.itemid786.hover a.dj-up_a:before, .dj-main li:hover a.dj-up_a:before, .dj-main li.active a.dj-up_a:before {
border-top: 7px solid #7cc623;
border-bottom: 7px solid #7cc623;
}
.dj-main li.itemid786.hover a.dj-up_a:after, .dj-main li:hover a.dj-up_a:after, .dj-main li.active a.dj-up_a:after { border-top: 6px solid #7cc623;  }
.dj-main li.itemid786.hover ul.dj-submenu li a, .dj-main li:hover ul.dj-submenu li a {color: #7cc623;}
.dj-main li.itemid786.hover ul.dj-submenu li a:hover:before, .dj-main li:hover ul.dj-submenu li a:hover:before, .dj-main li ul.dj-submenu li > a.active:before{border-bottom: 7px solid #7cc623;
}

Attachments:

Last Edit: 4 years 4 months ago by info565.

Please Log in or Create an account to join the conversation.

marcin
Offline

More

4 years 4 months ago #6947 by marcin

marcin replied the topic: Multicolor menu

Hello,

It seems that you have not added the itemid for the active list.
You need to do the same thing for them as for hover list.

Regards,
Marcin

Attachments:

Please Log in or Create an account to join the conversation.

tisbacker
Offline

More

4 years 4 months ago #7035 by tisbacker

tisbacker replied the topic: Multicolor menu

Hello Marcin,

I'm trying to change only the colour of the submenu item when the mouse cursor touch them.
For example: the submenu are blue and i want that they turn red on mouse over.

Thank you in advance for your support.

Attachments:

Please Log in or Create an account to join the conversation.

marcin
Offline

More

4 years 4 months ago #7042 by marcin

marcin replied the topic: Multicolor menu

Hello,

The submenu list is using the same LESS variable for the font color as the 1st level menu list. So the best way is to create a new variable (which you can define in the template_variables.less file) or you can simply enter the color value:

Source:
/templates/jm-services/less/djmenu_fx.less
/templates/jm-services/less/djmenu.less

Please note: djmenu_fx.less is used for DJ-Menu module with the animated effects enabled. If the effects are disabled then the djmenu.less file is taken. You can simply change the value for both files if you are not sure.

Attachments:

Please Log in or Create an account to join the conversation.

1
2
3

Time to create page: 0.407 seconds

Powered by Kunena Forum

intro good news