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!

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...

Edge Processor Scaling, Energy & Manufacturing Use Cases, and More New Articles on ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Get More Out of Your Security Practice With a SIEM

Get More Out of Your Security Practice With a SIEMWednesday, July 31, 2024  |  11AM PT / 2PM ETREGISTER ...