Dashboards & Visualizations

Setting the text color in an apps navigation bar?

szabados
Communicator

I have an app, and I want to use custom colors in the navigation bar.
The background color was easy, by setting it in the /nav/default.xml.
But I want to change the text color too, so I looked up it with firebug, which CSS class belongs it to.
My problem is, I can't find the CSS file in which I should change the color. I searched for the name of that CSS class, but all matching CSS files are located in the share/search_mrsparkle/ folder.

How can I change this text color for just that one app?

0 Karma
1 Solution

LukeMurphey
Champion

You should place the CSS selector in the dashboard.css (e.g. etc/apps/your_app/appserver/static/dashboard.css) or application.css (e.g. etc/apps/your_app/appserver/static/application.css) file of the app where you want the customization.

You will also need to make your CSS selector more specific than the default one in order for it to override it. Below is an example:

.app-bar.shared-appbar .nav-pills>li>a{
    color: red; /* Sets to red */
}

View solution in original post

LukeMurphey
Champion

You should place the CSS selector in the dashboard.css (e.g. etc/apps/your_app/appserver/static/dashboard.css) or application.css (e.g. etc/apps/your_app/appserver/static/application.css) file of the app where you want the customization.

You will also need to make your CSS selector more specific than the default one in order for it to override it. Below is an example:

.app-bar.shared-appbar .nav-pills>li>a{
    color: red; /* Sets to red */
}

LukeMurphey
Champion

Did you create both the application.css and dashboard.css? You'll need both depending on whether the view is simple XML or advanced XML.

szabados
Communicator

Thanks, I needed the dashboard.css, not the application.
Now works fine.

0 Karma

szabados
Communicator

Thanks, I created the file, but It doesn't get applied. Im inspecting it with firebug, and I don't even see that css file in the css list.

0 Karma

LukeMurphey
Champion

You will need to restart your Splunk instance in order for it to recognize the file.

0 Karma

szabados
Communicator

Sorry, I forgot to write in my previous answer, I restarted Splunk, but didnt help

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...