Targeting the CSS of a specific menu item

Post a reply

Smilies
:D :) :( :o :-? 8) :lol: :x :P :oops: :cry: :evil: :roll: :wink:

BBCode is ON
[img] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Targeting the CSS of a specific menu item

Re: Targeting the CSS of a specific menu item

by tbm72 » Sun Feb 11, 2024 6:46 am

Yes, that works perfectly, thanks! :)

Re: Targeting the CSS of a specific menu item

by drakinite » Sat Feb 10, 2024 8:43 pm

No prob!

You can also use less's lighten/darken functions if you want to lighten or darken an existing color, btw: https://lesscss.org/functions/#color-operations-lighten

Re: Targeting the CSS of a specific menu item

by tbm72 » Sat Feb 10, 2024 8:09 pm

Thanks, that sounds perfect!

I'm not in front of my PC to try it right now but I don't mind if all radio buttons are affected (in fact it's probably good if they are).

I've used @materialColor to change some parts of the UI to a darker colour. When it's also applied to the radio buttons it makes them hard to see because of the radio button's small size so I just wanted those to be a lighter colour.

Thanks for your help!

Re: Targeting the CSS of a specific menu item

by drakinite » Sat Feb 10, 2024 7:26 pm

Do you mean this radio button here?

Image

If so, unfortunately I don't think it's possible to uniquely identify the View -> Skin submenu in CSS. As far as I'm aware, if you want to change the color of this radio button, you'd have to change the color of all radio buttons across the UI.

If that's what you're looking for, then you can do it via this selector:

Code: Select all

input[type="radio"]:checked, input[type="checkbox"]:checked

Targeting the CSS of a specific menu item

by tbm72 » Sat Feb 10, 2024 8:24 am

Does anyone know how to target the css element of a specific menu item. I'm trying to change the colour of the circle selector for the chosen skin under:

Menu>View>Skin

It looks like it takes on the colour specified in:

@materialColor: #fb8c00; // PRIMARY COLOR

But I want to make it different than that one. Is it possible to target that menu item specifically?

Top