topic Re: Background color in navbar is gone in 7.1 and 7.2 in Dashboards & Visualizations

Background color in navbar is gone in 7.1 and 7.2

lakromani — Tue, 24 Apr 2018 18:34:19 GMT

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>

Re: Background color in navbar is gone in 7.1 and 7.2

fk319 — Tue, 24 Apr 2018 22:34:30 GMT

The background of the icon in the upper right changes its background color.

Re: Background color in navbar is gone in 7.1 and 7.2

alacercogitatus — Wed, 25 Apr 2018 14:04:11 GMT

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>

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Wed, 25 Apr 2018 14:43:15 GMT

I do not see my old color behind my icon, just the new grey color.

Re: Background color in navbar is gone in 7.1 and 7.2

fk319 — Wed, 25 Apr 2018 15:12:03 GMT

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.

Re: Background color in navbar is gone in 7.1 and 7.2

alacercogitatus — Wed, 25 Apr 2018 15:24:09 GMT

The icon should be a transparent background, to deal with app bar color changes such as this. @lakromani See Answer Below on how to change per-dashboard.

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Wed, 25 Apr 2018 19:30:24 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

cchoowee — Wed, 02 May 2018 20:00:48 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

spayneort — Mon, 07 May 2018 17:52:45 GMT

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;
}

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Mon, 07 May 2018 20:59:52 GMT

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.

Re: Background color in navbar is gone in 7.1 and 7.2

rjthibod — Mon, 07 May 2018 21:39:26 GMT

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.

Re: Background color in navbar is gone in 7.1 and 7.2

spayneort — Mon, 07 May 2018 23:54:31 GMT

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.

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Tue, 08 May 2018 21:28:24 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

cafissimo — Fri, 11 May 2018 15:04:24 GMT

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.

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Fri, 11 May 2018 17:06:22 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

niketn — Fri, 11 May 2018 17:21:58 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

lakromani — Fri, 11 May 2018 18:23:41 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

niketn — Fri, 11 May 2018 18:39:34 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

simpkins1958 — Wed, 23 May 2018 15:44:52 GMT

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

Re: Background color in navbar is gone in 7.1 and 7.2

AzJimbo — Wed, 10 Oct 2018 23:20:11 GMT

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.