How to use Advanced CSS to change colour of text and rectangle outline in a filter widget?

xkexuan

Desired outcome: Change the "Select..." text and black outline into WHITE
Other info: Page theme is set to Light
Method: Advanced CSS



How can I use Advanced CSS to change the colours for this specific filter widget, to make it more readable?

Marissbc

Hi @xkexuan! 

I have included CSS below to help with styling, resulting in the filter look and feel below (just copy and paste it into the Advanced CSS section of the widget):


All CSS:

:host 

dato-trigger-multi{
  border-width: 0px 0px 0px 0px !important;
  padding: 10px 20px !important;
  
}
dato-select{
  background-color: #ffffff !important;
  border-radius: 5px !important;
  border: 1px solid #dbdbdb;
  max-height: 40px;
}
.dato-multi-search{
    font-size: 18px !important;
    font-weight: bold !important;
    opacity: 0 !important;
}
.widget-name-wrapper{ margin-left: 15px; }
.dato-icon-arrow-down{ margin-right: 10px;
margin-top: 6px; }
dato-select[datosize=sm] dato-trigger-multi .dato-trigger-multi__active {
  font-size: 12px !important;
  background: none;
  color: #616161;
  font-weight: 600;
  padding: 0px 3px;
}
da-interactive-filter-widget .dato-icon-close {
    display: none;
}

.editable-header, 
.title, 
.ellipsis, 
.pr-4, 
.ng-tns-c19-30, 
.ng-star-inserted {
  margin-left: 0px;
}

Marissbc

If you prefer to just isolate the background of the place where the values are input in the filter widget above, the code snippet below (taken from the code above) will isolate that portion: 

dato-select{
  background-color: #ffffff !important;
  border-radius: 5px !important;
  border: 1px solid #dbdbdb;
  max-height: 40px;
}

  

xkexuan

Thanks @Marissbc!

With a bit of tweaking I managed to achieve what I wanted

dato-trigger-multi{
  border-width: 0px 0px 0px 0px !important;
  padding: 10px 20px !important;
  color: #ffffff !important;
}

dato-trigger-single{
  color: #ffffff !important;
}

dato-select{
  border-radius: 5px !important;
  border: 1px solid #ffffff;
  max-height: 40px;
}

Additionally, I was able to tweak the font color for my date widget:

dato-trigger-multi{
  border-width: 0px 0px 0px 0px !important;
  padding: 10px 20px !important;
  color: #ffffff !important;
}

dato-date-picker{
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.ng-star-inserted{
  color: #ffffff;
}

Marissbc

xkexuan  you are so welcome! I'm so glad you could use the code to help make the changes you wanted!

BrunoT

Hi,
there is a way to change also the background color of the list appearing with the dropdown menu?

Marissbc

Hi @BrunoT, 

Yes, the following code can be used to change the background color of the dropdown menu items.

.dato-select__option, 

.dato-select__option--simple

.dato-select__option--hover {

  background-color: #008080 !important;

}

I hope this is hepful!
Thank you!
Marissa

BrunoT

Thanks a lot, it works!
Is there a detailed guide with all the objects that can be customized within each single widget?

Bruno

BrunoT

For example in a radar chart is it possible to skip the axis scale or at least customize?
Is it also possible order the dimension in alphabetical order to have them always at the same place?

shawnflanagan

BrunoT said:

Thanks a lot, it works!
Is there a detailed guide with all the objects that can be customized within each single widget?

Bruno

This would be an amazing resource!