Dashboards & Visualizations

where to make changes to change background color of navigation menu options dropdown.

disha
Contributor

Trying to ask very internal thing but this is te requirement of my app. I want to change the background color of navigation menu options dropdown which is white by default.
I am not able to find out which css or js file I need to approch for doing that.
Any help?

Tags (1)
0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

Well, technically there isn't any CSS that sets the background color, because the background color is white.

That said, this CSS technically changes the background color to an off-white.

.splMenu-primary, 
.splMenu-primary a {
    background-color:#eee;
    color:#000;
} 

But you're only at the beginning, because once the background color isn't white there are some other problematic CSS rules that you then have to fight, like :

-- You'll have to tinker with .splShadow because the above CSS will produce some less-than-ideal off-white dropshadows.

-- the ul elements in the menus have some default margin that will now show up as white gaps. And you'll have to deal with that.

And very probably several other side quests that I haven't thought of.

One idea is to simply look through the Splunkbase apps, try and find one that changes the look and feel, download them, take a look at their CSS in Firebug and get some ideas there.

View solution in original post

sideview
SplunkTrust
SplunkTrust

Well, technically there isn't any CSS that sets the background color, because the background color is white.

That said, this CSS technically changes the background color to an off-white.

.splMenu-primary, 
.splMenu-primary a {
    background-color:#eee;
    color:#000;
} 

But you're only at the beginning, because once the background color isn't white there are some other problematic CSS rules that you then have to fight, like :

-- You'll have to tinker with .splShadow because the above CSS will produce some less-than-ideal off-white dropshadows.

-- the ul elements in the menus have some default margin that will now show up as white gaps. And you'll have to deal with that.

And very probably several other side quests that I haven't thought of.

One idea is to simply look through the Splunkbase apps, try and find one that changes the look and feel, download them, take a look at their CSS in Firebug and get some ideas there.

disha
Contributor

Thanks for guiding me one the right path. I have downloaded some apps and looked the css. Its working now.
Thankyou so much.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...