Solved: Re: Background color in navbar is gone in 7.1 and ...

lakromani · ‎04-24-2018

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>

spayneort · ‎05-07-2018

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 · ‎03-04-2020

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.

jotne · ‎03-06-2020

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.

AzJimbo · ‎10-10-2018

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 · ‎10-14-2018

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 · ‎05-11-2018

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.

lakromani · ‎05-11-2018

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

niketn · ‎05-11-2018

@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!!!"

lakromani · ‎05-11-2018

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

niketn · ‎05-11-2018

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!!!"

spayneort · ‎05-07-2018

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 · ‎06-16-2019

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.

simpkins1958 · ‎05-23-2018

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 · ‎05-07-2018

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.

spayneort · ‎05-07-2018

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.

lakromani · ‎05-08-2018

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

alacercogitatus · ‎04-25-2018

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 · ‎05-02-2018

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

lakromani · ‎04-25-2018

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

fk319 · ‎04-25-2018

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 · ‎05-07-2018

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.

Background color in navbar is gone in 7.1 and 7.2

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

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

Monitoring Amazon Elastic Kubernetes Service (EKS)