Dashboards & Visualizations

Change App navigation header color

ddarmand
Communicator

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 !

Tags (3)
0 Karma
1 Solution

ddarmand
Communicator

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

View solution in original post

ddarmand
Communicator

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

0 Karma

andrewkenth
Communicator

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

0 Karma

ddarmand
Communicator

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

0 Karma

Rocket66
Communicator

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 ....

Rocket66
Communicator

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

0 Karma

andrewkenth
Communicator

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

0 Karma

ddarmand
Communicator

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

callan_splunk
Splunk Employee
Splunk Employee

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

0 Karma

mikaelbje
Motivator

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

...

0 Karma
Get Updates on the Splunk Community!

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...

Want to Reduce Costs, Mitigate Risk, Improve Performance, or Increase Efficiencies? ...

Splunk Lantern is Splunk’s customer success center that provides advice from Splunk experts on valuable data ...