Dashboards & Visualizations

Change App navigation header color

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

Communicator

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

View solution in original post

Communicator

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

0 Karma

Communicator

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

0 Karma

Communicator

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

0 Karma

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

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

Communicator

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

0 Karma

Communicator

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

View solution in original post

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

Motivator

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

...

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!