Join our Community in its new Home - The Datorama Trailblazer Community Group!

It's been an amazing 3 years coming together in this forum to collaborate, innovate, support, and inspire each other about our shared usage of Datorama. While this is not quite a goodbye, we are excited to announce that we are getting a fresh start in our new home within the Salesforce Trailblazer Community. We have a ton of fun new content planned and you may even see the revival of some of our most popular posts from the past few years.

We’ll be keeping this group around for a bit for you to peruse, but as of November 15, we will no longer be allowing new posts or comments. Be sure to join our new group at https://www.salesforce.com/success-datorama to keep the conversation going.

We can’t wait to see you there!

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

Comments

  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    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;
    }
    
    
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    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;
    }
     :) 
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    xkexuan  you are so welcome! I'm so glad you could use the code to help make the changes you wanted!
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    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

Sign In or Register to comment.