XF 2.3 Customizing Filter Toggles & Open Menus

[himmelman]

Hello everyone,

I'm trying to customize the colors of certain elements in my XenForo style, and I've run into a bit of a snag.

When experimenting with the color palette, I noticed that the small blocks within the filter block (specifically, class="filterBar-filterToggle" and filterBar-menuTrigger.is-menuOpen.) are showing a greenish color.

I've checked the style properties, but I don't see any specific options that directly control these elements.

Could anyone guide me on how I can change the background color for filterBar-filterToggle and filterBar-menuTrigger.is-menuOpen?

Any help or CSS snippets would be greatly appreciated!

Thanks in advance.

 

[Paul B]

There aren't style properties for many elements.

You can use the extra.less template to apply styling.

For example:

.filterBar-menuTrigger.is-menuOpen
{
    background-color: orange;
}

 

[himmelman]

Thanks for the suggestion! I actually tried using the extra.less template, but I couldn't quite figure out the correct CSS code to target those specific elements (.filterBar-filterToggle and .filterBar-menuTrigger.is-menuOpen).

Would you be able to provide a quick example of what the CSS snippet should look like? I'd really appreciate the help!

 

[himmelman]

Got it!
Need add !important

 

[Paul B]

You can make the selector more specific to avoid using !important but in this case it likely won't affect anything.