Append class (color) for menu items

Community
1

I want to be able to adjust colors for circular menu items (both on and off states)

Is it doable using only css, or do I have to get into the JS-side of things as well? (if so - where do i start?)

2

Hi,
Using the css property you should be able to customize the menu item like this;

.item {
  /* on and off state */
}
.item.on {
  /* on state */
}

Using the browser inspector (F12) helps finding out how thing are laid out and which css selector can be used to target the elements in a widget.

Getting into the js-side of things won’t help here unless you’re willing to edit the sources and make you’re own flavor of the program.

3

Thanks for the fast response!
This code does make the :nth item white… but it nothing changes when hovering or after I’ve clicked an item:

.item:nth-child(1) {
background: #ffffff;
}
.item.on:nth-child(1) {
background: #333333;
}

4

My bad, got confused regarding the light opaque effect thats active during hovering .item.on:nth-child(1) does work!

But, I’m still having a hard time figuring out how to make items change background-color when hovering…

5 
.item:nth-child(1):hover {
  background: red;
}
6

Hey! This is working great, except I can't get this working for nth:child(1) when I have a class listed in the theme css doc

eg. I have

class:EQButton

the 2nd, 3rd and 4th menu item works for colour but not the first one. Is there a way to put the item coloring details into the class? Like do you need to do something like EQButton.item:nth-child(1)?

Screenshot (229)
Screenshot (229)1802×1219 373 KB

Screenshot (231)
Screenshot (231)714×499 18.7 KB

7

Edit: modified my answer to be correct

Sorry! Just figured it out!

You can't put things like font-size at the beginning. You have to put it in the class css file.

So not like this

font-size:300%;
border-radius: 10%;
class:EQButton;

.item:nth-child(1) {
background: #3b3b3b;
opacity: 1;
}

But like this

class:EQButton;

.item:nth-child(1) {
background: #3b3b3b;
opacity: 1;
}

8

Inline syntax and selector syntax (CSS Tips - Open Stage Control) should not be mixed, this should work:

:host {
 font-size:300%; 
 border-radius: 10%;
 class:EQButton;
}
.item:nth-child(1) {
 background: #3b3b3b;
 opacity: 1;
}
1 Like
9

It works thank you!!