Dashboards & Visualizations

How to change background colour on click tab active in splunk dashboard?

karthi2809
Builder

Hi Guys,

Thanks in Advance,

How to changes background colour when i am click on the tab should be active.Now its showing active on click.But now i want to change the background colour as well on clicking on the tab.

          #input_link_split_by.input-link button{
            width: 120px !important;
            border-top-color: rgb(255, 255, 255);
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: rgb(255, 255, 255);
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: rgb(255, 255, 255);
            border-left-style: solid;
            border-left-width: 1px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
Labels (3)
0 Karma
1 Solution

danspav
SplunkTrust
SplunkTrust

Hi @karthi2809,

Try this CSS:

#input_link_split_by {width:fit-content!important;}
#input_link_split_by.input-link button{
    width: fit-content!important;
    margin-right:2px;
    background-color: #3c444d;
    border-top-color: #3c444d;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: #3c444d;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-color:#3c444d;
    border-left-style: solid;
    border-left-width: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: background-color 0.5s ease;
    transition: border-color 0.5s ease;
}


#input_link_split_by button:hover{
    background-color:#d2e3a0;
    border-right-color: #d2e3a0;
    border-top-color:#d2e3a0;
    border-left-color:#d2e3a0;
    color: black;
}

#input_link_split_by button[aria-checked="true"]{
    background-color: #d2e3a0;
    color: black;
}

 

That gives you tabs that keep their colour after you have selected them:

danspav_0-1712190148752.png

The key bit is: 

#input_link_split_by button[aria-checked="true"]

Which is the CSS to identify a selected tab.

 

Cheers,
Spav

View solution in original post

danspav
SplunkTrust
SplunkTrust

Hi @karthi2809,

Try this CSS:

#input_link_split_by {width:fit-content!important;}
#input_link_split_by.input-link button{
    width: fit-content!important;
    margin-right:2px;
    background-color: #3c444d;
    border-top-color: #3c444d;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: #3c444d;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-color:#3c444d;
    border-left-style: solid;
    border-left-width: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: background-color 0.5s ease;
    transition: border-color 0.5s ease;
}


#input_link_split_by button:hover{
    background-color:#d2e3a0;
    border-right-color: #d2e3a0;
    border-top-color:#d2e3a0;
    border-left-color:#d2e3a0;
    color: black;
}

#input_link_split_by button[aria-checked="true"]{
    background-color: #d2e3a0;
    color: black;
}

 

That gives you tabs that keep their colour after you have selected them:

danspav_0-1712190148752.png

The key bit is: 

#input_link_split_by button[aria-checked="true"]

Which is the CSS to identify a selected tab.

 

Cheers,
Spav

Get Updates on the Splunk Community!

Buttercup Games: Further Dashboarding Techniques (Part 5)

This series of blogs assumes you have already completed the Splunk Enterprise Search Tutorial as it uses the ...

Customers Increasingly Choose Splunk for Observability

For the second year in a row, Splunk was recognized as a Leader in the 2024 Gartner® Magic Quadrant™ for ...

Bridging the Gap: Splunk Helps Students Move from Classroom to Career

The Splunk Community is a powerful network of users, educators, and organizations working together to tackle ...