Happy Sale Day!

30%OFF on all
Use coupon: IFTS
Joomla Module OT Testimonial powered by OmegaTheme.com

Multicolor menu

More
6 years 7 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.

More
6 years 7 months ago - 6 years 7 months ago #6927 by marcin
marcin replied the topic: Multicolor menu
Hello,

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

itemid.jpg


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: 6 years 7 months ago by marcin.

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

More
6 years 7 months ago - 6 years 7 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: [email protected]
---------------------------------------------------------------*/

/* ==========================================================================
   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: 6 years 7 months ago by info565.

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

More
6 years 7 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.

liactive.png


Regards,
Marcin
Attachments:

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

More
6 years 6 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.

change_2015-01-08.jpg
Attachments:

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

More
6 years 6 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:

submenu-color.png


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.

Time to create page: 0.664 seconds
Secured payments Payment Methods

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.