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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...