Where to change the styles/colors of the Apply" and "Cancel" buttons on a Multi-Picklist Filter"

Dave,

The css of the apply/cancel filter buttons are controlled by the primary button properties in the theme editor. Unfortunately, that means that if you change those properties for the apply/cancel it will potentially apply to other buttons on your page as well, which you may or may not want. Another option is to use custom CSS. Check out this general tutorial about custom CSS. You can add a css class to the table under Display->Advanced, and then use the chrome console to get the element class name of the buttons to change their properties. An example would be:

.tableClass .nx-header-right .ui-button {

   Background: black;  this changes the background color of the apply/cancel buttons

   Color: gray;  this changes the color of the button text

   border:1px solid black;  this controls the shadow property (visible in the theme editor)

}

I can’t guarantee this custom CSS will always work, but it should point you in the right direction.

Thanks!

Amy, thanks for the response, and that makes a lot of sense. I tried the custom css on the table and was able to change the colours for the Save and Cancel buttons. However, the colour of the buttons on the drop down for multi-select picklists remained the same. Have attached an example to further clarify. I think I just need to figure out which css property controls these specific buttons and I should be good to go. If you or anyone knows the property in question, or could direct me to how I can figure it out, it would be very much appreciated. Thanks again, Dave

I figured this out actually. I highlighted the button in question and then right clicked and pressed “Inspect” to take a look at the code that was driving the button. It turns out that .sk-timefilter-button is the one controlling this and I was able to successfully change it. Thanks for your help Amy!

I’m glad you figured it out! Using inspect is exactly what I would have suggested. It’s the best way to find the class of elements on your page so you can adjust their CSS. 

Thanks!
Amy