Dashboards & Visualizations

TimeRangePicker and splButton CSS Colour

calump90
Engager

Hello,

I am having trouble with two css elements.

1) I am unable to change the colour of the TimeRangePicker (button titled 'AllTime' ?) using the following css:

.TimeRangePicker {
color: #112442;
background-color: #112442;

}

or

.TimeRangePicker .timeRangeActivatorWrapper {
color: #112442;
background-color: red;

}

2) I can change the colour of the splButtons, however when I mouse over (hover) the magnifying glass icon disappears and it just displays a block. Here is my code:

.splButton-primary {
background-color: #112442;   
color: ;
background-image: url(overlay_softgradient_28.png); 

}

.splButton-primary:hover, input.searchButton:hover {
background-color: #102950;
background-image: url(overlay_softgradient_28.png); 

}

The css file I am editing is application.css contain within the static dir of my app.

Appreciate the help.

Tags (4)

Flynt
Splunk Employee
Splunk Employee

Your TimeRangePicker color can be changed with the following -

.TimeRangePicker .timeRangeActivatorWrapper {
background-image: none;
background-color:yourcolor;
}

As far as the search button, I'd just have the hover portion change the background color and omit the image unless you want your image to be different when you hover over it.

Get Updates on the Splunk Community!

Security Professional: Sharpen Your Defenses with These .conf25 Sessions

Sooooooooooo, guess what. .conf25 is almost here, and if you're on the Security Learning Path, this is your ...

First Steps with Splunk SOAR

Our first step was to gather a list of the playbooks we wanted and to sort them by priority.  Once this list ...

How To Build a Self-Service Observability Practice with Splunk Observability Cloud

If you’ve read our previous post on self-service observability, you already know what it is and why it ...