How to Hide Few Time Options from Time Input in Splunk Dashboard using CSS

Hi Guys!!!

Today we are going to show you how to hide a few Time Options from “Time Input” in Splunk Dashboard using CSS (Cascading Style Sheets) file.

We will remove the below options from the Time Input :

Presets, Real-Time, Relative, Advanced.

So, let’s start.

Step 1:

Here, we have created a dashboard named “Hide Time Options In Dashboard”, where we have configured a “Time Input” option.

Now, if we click on the Time Option, we can see all the time options are available in the Time Picker.

Now from here, we will hide the options mentioned above like Presets, Relative, Real-Time, Advanced.

So, let’s start.

Step 2:

Now, we have created a css file named “hide_time_options.css“ with the below content,

div[data-test-panel-id^='presets'],
div[data-test-panel-id^='advanced'],
div[data-test-panel-id^='relative'],
div[data-test-panel-id^='real']
{
display: none !important;
}

Explanation:

Here, we have used the div id which we want to hide, ‘presets’ stands for “Presets”, ‘advanced’ stands for “Advanced”, ‘relative’ stands for “Relative”, ‘real’ stands for “Real-time”.

Now, we have added, display: none !important; which will not display the above options.

NOTE: The css you save with any file name, but make sure it has the extension “.css”.

And we have put the “hide_time_options.css” file under,

$SPLUNK_HOME/etc/apps/search/appserver/static/

NOTE: Instead of “search” app, you can mention the app name where you have created the Dashboard.

Now, you need to restart Splunk using ./splunk restart command under $SPLUNK_HOME/bin/

Step 3:

So, let’s click on “Edit” option.

Step 4:

Now, click on the “Source” option.

Step 5:

Now, we have made some changes to the Source code.

Explanation:

Here, in the “form” tag, we have used the css file, “hide_time_options.css” like below.

<form stylesheet=”hide_time_options.css”>

Step 6:

Now, click on “Save” to save the changes.

NOTE: If you don’t want to restart splunk, you can use the below url to refresh,

 <splunk-server-ip_or_hostname>:8000/en-US/debug/refresh.

NOTE: If refresh does not work, then restart Splunk.

Step 7:

Explanation:

Now, as you can see, when we are clicking on the “Time” input, we can’t see the options Presets, Real-Time, Relative, Advanced are hidden, only “Date Range” and “Date & Time Range” are visible.

Hope you have enjoyed this blog, we will come back with new topics of Splunk. Until then goodbye and stay safe and strong.

Happy Splunking!!