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

  • 2
  • Question
  • Updated 2 years ago
  • Answered
In the theme editor I can't seem to find where I can change the styles/colours of the "Apply" and "Cancel" buttons on a multi-picklist table filter. Right now, the text and background of the apply button are both white, so you really can't see it. Any help would be much appreciated
Photo of Dave Dewan

Dave Dewan

  • 460 Points 250 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
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
Photo of Dave Dewan

Dave Dewan

  • 460 Points 250 badge 2x thumb
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
Photo of Dave Dewan

Dave Dewan

  • 460 Points 250 badge 2x thumb
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!
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
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