topic Re: Change App navigation header color in Dashboards & Visualizations

Change App navigation header color

ddarmand — Mon, 18 Nov 2013 09:48:14 GMT

Hello,

I just update Splunk to version 6 and i have a first issue, i use to change the color of the navigation bar by using this in css :

.splHeader-navigation {
background-color:red;
}

But it's not working anymore, i tried this :

.navigationHeader {
min-height: 30px;
background-color: red;
}

And it's not working...

Help me please !

Re: Change App navigation header color

ddarmand — Mon, 18 Nov 2013 11:20:02 GMT

i found it, you have to edit /nav/default.xml and add something like that

Re: Change App navigation header color

Rocket66 — Mon, 18 Nov 2013 11:39:42 GMT

Hello,

a bunch of things were changed in Splunk 6 GUI - and so the CSS classes (from Splunk 5) won't work anymore!

You have to look at the classes (via Firebug, etc.) and change them in your CSS!

Here is a little overview of some new classes (for the header)

Level 1:

.header class contains .navbar & .app-bar

Level 2:

.navbar class contains .navbar-inner with subclasses .nav & .nav.pull-right

.app-bar class contains .nav & .app-name .pull-right

Here is a smal code-block, you might use :

 /* 1. Headers */
.header { background-color:#032644!important; }

/* 1.1. APP-bar in Header */
.app-bar { background:#fff !important; }

.app-bar .nav-pills>li>a { color:#5379af; }

.app-bar .nav-pills>li>a:hover { color:#032644; }

.app-bar .app-name { line-height: 40px; font-size: 18px; font-weight: 200; color:#5379af; }

.app-bar .pull-right { background-color:#fff; }

/* 1.2. NAVI in Header */

.nav { background:#fff; color:black; }

.navbar .navbar-inner { background: #1f6cae; }

.navbar .nav.pull-right { background-color:#fff; }

.navbar .nav>li>a { color: #fff; background: #032644; }

.navbar .nav>li.active.dropdown>a.dropdown-toggle:hover,.navbar .nav>li>a:hover{
 color:#ffffff;background:#1f6cae;border-left:1px solid #111;border-right:1px solid #111;
}

.navbar .nav>li>a.active { background: #1f6cae; border-left: 1px solid #111; border-right: 1px solid #111; }

.nav-footer { background: #fff; color: #333; }

Hope that helps ....

Re: Change App navigation header color

andrewkenth — Tue, 14 Jan 2014 19:36:41 GMT

Which file is this that you need to create or edit?

Re: Change App navigation header color

Rocket66 — Wed, 15 Jan 2014 09:08:29 GMT

Hi Andrew, you can create a new (CSS)File within your $Splunkhome$/etc/apps/$App$/appserver/static context.

Eg. custom.css and bind that within your XML-Dashboard:

<dashboard stylesheet="custom.css">

Please mind following links, when migrate Splunk 5 to Splunk 6 :
http://docs.splunk.com/Documentation/Splunk/6.0/AdvancedDev/Migration

and

http://docs.splunk.com/Documentation/Splunk/6.0.1/AdvancedDev/UseCSS

hope that helps, Robert

Re: Change App navigation header color

callan_splunk — Tue, 04 Mar 2014 02:55:09 GMT

This is correct. However, you should use a HEX value, such as "#0000FF", and NOT the english word for the color.

Re: Change App navigation header color

ddarmand — Thu, 22 May 2014 13:49:02 GMT

it doesn't work anymore in 6.1.1 now... have you an idea why ?

Re: Change App navigation header color

ddarmand — Thu, 22 May 2014 13:49:11 GMT

it doesn't work anymore in 6.1.1 now... have you an idea why ?

Re: Change App navigation header color

andrewkenth — Thu, 22 May 2014 13:52:15 GMT

You may need to reapply the changes. Did you do that?

Re: Change App navigation header color

mikaelbje — Fri, 28 Nov 2014 08:34:19 GMT

Yep, change nav/default.xml and add the color="" attribute to the nav node, i.e.

...