Dashboards & Visualizations

how to change the background color of appHeader

disha
Contributor

I am writing my own application.css to override default.css rules. I need to change the appHeader background color which hsould include till App Bar. Tried to changed appHeaderWrapper background color but no luck. when I refresh the page it shows my color at the blick of the eye but then it set to default color. I have used !important tag also but not helped.
Any suggest?
Thanks in advance

Tags (1)
1 Solution

callan_splunk
Splunk Employee
Splunk Employee

In Splunk 6.x, the proper way to change your app color is to edit the nav tag in appDir/default/data/ui/nav/default.xml:

<nav color="#0000FF">

View solution in original post

callan_splunk
Splunk Employee
Splunk Employee

In Splunk 6.x, the proper way to change your app color is to edit the nav tag in appDir/default/data/ui/nav/default.xml:

<nav color="#0000FF">

SirHill17
Communicator

And what about the font color?
Does that should work ?

0 Karma

MHibbin
Influencer

***Below is the answer for Splunk 4.x and 5.x ***

Hi,

Where is the file located? - It will need to be in the <appName>/appserver/static/ directory.

You will need to call the file "application.css".

And you should restart Splunkweb (or just Splunk in general) when you first add the CSS file.

Can you post the actual CSS you are using please, this may help in t'shooting, you can also use Firebug with FireFox to allow to select and test modifications to the CSS.

EDIT: Example from docs (located here😞

/*
 * Top app banner section
 */
.AccountBar {
    background-image: url(/static/app/samples/samples_header.png);
    background-repeat: no-repeat;
    background-color: #79a60b;
    height: 140px;
}

.AccountBar .appLogo,
.AccountBar p.appName {
    display: none;
}

.AccountBar .accountBarItems {
    background-color: #000;
    opacity: .5;
    filter: alpha(opacity=50);
}

EDIT: Just played with one of my configs, I changed it by using the following:

.appHeaderWrapper {
    background-color: #79A60B;
    /*..ommited stuff*/
}
div.AccountBar {
    background-color: #79A60B;
}

Hope this helps.

MHibbin

disha
Contributor

.appHeaderWrapper h1{} is coloring the text color in appbar but .appHeaderWrapper{} and .div.AccountBar {} together done the magic. Thankyou so much.

0 Karma

disha
Contributor

Hi MHibbin,
I have already done all this. Issue is this all other changes i have made in application.css are reflecting, so i thik issue is not with these points. To the point I want to ask is what to write in application.css to change the background color of application header.

0 Karma
Get Updates on the Splunk Community!

Splunk Decoded: Service Maps vs Service Analyzer Tree View vs Flow Maps

It’s Monday morning, and your phone is buzzing with alert escalations – your customer-facing portal is running ...

What’s New in Splunk Observability – September 2025

What's NewWe are excited to announce the latest enhancements to Splunk Observability, designed to help ITOps ...

Fun with Regular Expression - multiples of nine

Fun with Regular Expression - multiples of nineThis challenge was first posted on Slack #regex channel ...