Dashboards & Visualizations

Background color in navbar is gone in 7.1 and 7.2

lakromani
Builder

I do like to color the navbar to differentiate the apps. It makes it easy for the user to see on the bar what apps they are inn.
But on 7.1/7.2 this is gone due to the new design.

I add this
default/data/ui/nav/default.xml
nav color="#6699ff"

to get nice color.

Anyone know how to get back the color in 7.1/7.2 as it was in 7.0

UPDATE (still missing in 7.2)
You can use the information from alacercogitatus post and modify every dashboard, but if you have a default.xml like this:

<nav">
  <collection label="Views">
    <view name="my app#1" default='true'/>
    <view name="my app#2"/>
    <view name="my app#3"/>
  </collection>
  <view name="search"/>
  <view name="reports"/>
  <view name="alerts"/>
  <view name="dashboards"/>
</nav>

You only change color for my app#1 to my app#3
When you select search, reports, alerts and dashboard it goes back to default splunk color for the nav bar.

I the old way with nav color, color stayed on for all menu item....

<nav color="#d15c34"">
  <collection label="Views">
    <view name="my app#1" default='true'/>
    <view name="my app#2"/>
    <view name="my app#3"/>
  </collection>
  <view name="search"/>
  <view name="reports"/>
  <view name="alerts"/>
  <view name="dashboards"/>
</nav>
Tags (2)
1 Solution

spayneort
Contributor

You can change the color of this on all custom dashboards in an app by adding the following to the app's appserver/static/dashboard.css file:

.splunk-header.splunk-view.splunk-header.splunk-view > div[data-view="views/shared/appbar/Master"] {
    background-color: #742255;
}

View solution in original post

sonny_monti
Path Finder

This is my solution:

If you inspect the navbar you will se that its div element contains a attribute data-view="/views/shared/appbar/Master"
Whereas the buttons contains data-view="/views/shared/appbar/Button"

Thats it! simply use attribute selector of CSS

if you create a dashboard.css file under /appserver/static it will apply to every dashboard (even if it is not html), otherwise if you want to use the css only in some dashboards use the attribute stylesheet=".css" in the form or dashboard element of the xml.

To customize the navbar color write the following:

[data-view*="views/shared/appbar/Master"]{
background: <YOUR DESIRED COLOR HERE>;
}

[data-view*="views/shared/appbar/Button"]{
color: <YOUR DESIRED COLOR HERE>;
}

Simply find the data-view element you want to customize and create a css rule.

0 Karma

jotne
Builder

I do noe see any difference i this compare to the already accepted answer above. It does not solve the problem that in an app if you click on "search" "alerts" etc color is gone. This did work when color was set in the nav menu file.

0 Karma

AzJimbo
Path Finder

this was a bad change. Finally got around to upgrading a small dev environment from 6.x and don't like it at all. Such a major change w/o an easy way to opt out creates a bad customer experience. Why make it so hard to change it back? Also, the release notes for 7.1 don't really explain that the custom colors for apps will be majorly impacted. Screen captures in operational SOPs are now all obviously out of date and have to be rewritten as well as internal training documents. ...sigh. I understand the desire to keep the UI fresh, but this was not well thought out. Why not put a way to mod the dashboard.css in the UI? Still love Splunk - but this is frustrating.

lakromani
Builder

I do hope someone at Splunk read this and understand that this is some we need.

The workaround by color det navbar in one and on dashboard is not not working well.
If you add Search, Dashboard etc, to the navigation menu, you can not set the color for the navbar when selecting those menu item.

This is relay bad when you have lots of app in a distributed solution like we have.
Whit the color set in default.xml navigation menu it stayed correct for all the menu when that app was selected.

Still not fixed in 7.2
I will bump this post for every new version from Splunk until its fixed.

cafissimo
Communicator

This is my solution

1) create a pre built panel for every color you need to use for your backgrounds. I assume one per app.
2) Add at the end of every form/dashboard the pre built panel of the color you want to use.

Here it is an example of a prebuilt panel:

<panel>
  <html>
         <style>
           div[data-view="views/shared/appbar/Master"] {
             background-color: green;
             }
            div[data-role="underline"] {
             background-color:red;
            }
         </style>
       </html>
</panel>

If you are running your search head on linux (or you have "sed" command on windows) you can also then create a linux sed script that automatically changes the closing line of form/dashboard (that is "</form>" or "</dashboard>") with the prebuilt panel content and the closing line again.

This is a sample linux "sed" script:

/\<\/form>/{i\
<!-- INSERTED THIS BELOW LAST ROW AND BEFORE FORM\/DASHBOARD CLOSING TAG -->\
<row>\
<panel>\
<html>\
<style>\
div\[data-view="views\/shared\/appbar\/Master"\] \{\
background-color: green;\
\}\
div\[data-role="underline"\] \{\
background-color:red;\
\}\
<\/style>\
<\/html>\
<\/panel>\
<\/row>\
<\/form>
d
};
/<\/dashboard>/{i\
<!-- INSERTED THIS BELOW LAST ROW AND BEFORE FORM\/DASHBOARD CLOSING TAG -->\
<row>\
<panel>\
<html>\
<style>\
div\[data-view="views\/shared\/appbar\/Master"\] \{\
background-color: green;\
\}\
div\[data-role="underline"\] \{\
background-color:red;\
\}\
<\/style>\
<\/html>\
<\/panel>\
<\/row>\
<\/dashboard>
d
}

To use this script:

sed -E -i <dashboard_name>.xml -f <sed_script_name> <dashboard_name>.xml

Also, you could run this script recursively, maybe with a "find . -name ...", on all your local dashboard directories, but that could be a little risky, so first take a backup of everything.

Changes are made on original files!

Best regards.

0 Karma

lakromani
Builder

This seem to be way to complicated and add lots of code to each dashboard.
nav color="#6699ff"
This worked before. Added one place and did give nice bar for all dashboard in one app.
So Splunk, please make this work again.......

0 Karma

niketn
Legend

@lakromani, You should get Splunk 7.1 Overview App from Splunkbase which lists out new features of Splunk 7.1 including the move towards Modern Look & Feel and Style Consistency across Splunk.

From Splunk product's perspective I would say that it gives it a consistent look and feel where Custom Splunk Apps created within Splunk will have their own Icon Color and Navigation Menu Highlight color.

In your case, instead of Distinguishing Color from App Bar, it is now App Icon, which to me is a changed for us to get used to 🙂 Do get the Splunk 7.1 Overview app to check these out. Or else refer to answer where example screenshots are attached with App Icon Color change instead of App Bar: https://answers.splunk.com/answers/657095/where-is-my-app-navigation-bar-color-in-splunk-71.html

Also, with the launch of newer versions corresponding Overview apps are also published on Splunkbase for us to check out the new features being introduced and get hands dirty to see whether they fit our needs.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

lakromani
Builder

I guess that you need transparent App Icon to get it to change color and it also need space for the transparent part.

0 Karma

niketn
Legend

You are right about that. PNG icons can be created like that.

Refer to documentation for Sample Icons with transparent Background: http://dev.splunk.com/view/SP-CAAAE86#icons

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

spayneort
Contributor

You can change the color of this on all custom dashboards in an app by adding the following to the app's appserver/static/dashboard.css file:

.splunk-header.splunk-view.splunk-header.splunk-view > div[data-view="views/shared/appbar/Master"] {
    background-color: #742255;
}

lakromani
Builder

It does work, just needed the _bump.

But it still is not as good as the old nav color, since it only sets color on custom view, not the search/alert/dashboard/reports etc.
Its better than adding the panel, that needed to be added to all, one by one.

0 Karma

simpkins1958
Contributor

This works but it is not a great user experience since the menu bar is the default color initially and then changes to the new color. Really want the old functionality back...

lakromani
Builder

Did not work.
From what I do read here: https://answers.splunk.com/answers/492530/how-to-change-the-default-color-of-dashboards-foot.html
it looks like you need to convert dashboard to html for this to work.

0 Karma

spayneort
Contributor

It should not require html dashboards. After adding the dashboard.css to your app, you may need to restart Splunk or access https://<yoursplunk>/en-US/_bump and click the button.

0 Karma

lakromani
Builder

I have restarted Splunk. (_bump) does not seem to work on the free version. Still no color on the bar.

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

Yes, with any new design some people like it one way, some the other. BUT if you notice, the color isn't totally gone. The hover color of the navigation menus are the same color as the title bar was before.

BUT IF You STILL WANT TO CHANGE IT - Add the below to Simple XML Dashboards to change the color of the bar. This only works on dashboards. views/shared/appbar/Master is the background of the main bar, and underline is the background color for whatever dashboard you are on.

 <row depends="$no_show$">
    <panel>
      <html>
        <style>
          div[data-view="views/shared/appbar/Master"] {
            background-color: green;
            }
           div[data-role="underline"] {
            background-color:red;
           }
        </style>
      </html>
    </panel>
  </row>

cchoowee
Engager

This is a major pain. I will have to redo all my applications. Will hold at 7.0.x for now.

lakromani
Builder

I do mark this as accepted since it works. But I am not sure if this small change is to the better.
Needing to mod all dashboard in all my app, not some I like to do. Also this will add some bytes to all dashboard and not the small setting in default.xml

0 Karma

fk319
Builder

whether I like the new UI or not, is not really relative. Splunk made a change, that affects every implementation. I have 50-100 different apps, most are in use, and unrelated. I have knowledge articles with pictures and everyone has to be updated. There was no warning or option not to change.
True I do not have to upgrade yet, but when I do I have a lot of work that should not be done.
These changes should be limited to major changes, not feature updates.

rjthibod
Champion

I feel your pain.

Sadly, this is not the first nor will it likely be the last time breaking changes happen to app/UI related items for Splunk. Semantic versioning seems to only apply to under-the-hood indexing and search related things. Le sigh ...

I wouldn't bet on it changing back.

0 Karma
Get Updates on the Splunk Community!

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation

As of Splunk Cloud Platform 9.3.2408 and Splunk Enterprise 9.4, classic dashboard export features are now ...