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!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

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 ...