Dashboards & Visualizations

Dashboard page accountbar style

dipanjan80
Explorer

Hi,
For my dashboard page, I need to customize the account bar (e.g. remove Messages, Settings, Activity, Help links).
I see there are separate JS file for other pages (e.g. searchpage.js, reportspage.js), where I can modify the template with custom css or html elements.
But I am not able to locate the js which renders/creates the custom dashboard page. (there is a dashboardspage.js, but it only changes the page which hosts all the dashboard names).

Please help.

1 Solution

ShaneNewman
Motivator

Ok, I see the image now.

First, to remove the Splunk logo in application.css

.navbar .brand {
font-family: "Splunk Icons";
font-weight: normal;
color: #ffffff;
padding: 0 0px 0 20px;
height: 0px;
line-height: 0px;
font-size: 17px;
text-shadow: none;
border-right: 1px solid transparent;
margin: 0;
}

To get your text to show up in the navbar area, you will have to add the text to the HTML file in the correct div for the base dashboard.

View solution in original post

ShaneNewman
Motivator

Ok, I see the image now.

First, to remove the Splunk logo in application.css

.navbar .brand {
font-family: "Splunk Icons";
font-weight: normal;
color: #ffffff;
padding: 0 0px 0 20px;
height: 0px;
line-height: 0px;
font-size: 17px;
text-shadow: none;
border-right: 1px solid transparent;
margin: 0;
}

To get your text to show up in the navbar area, you will have to add the text to the HTML file in the correct div for the base dashboard.

ShaneNewman
Motivator

inside the .xml file for the view:

  <label>Your Label Name</label>

  <module name="AccountBar" layoutPanel="appHeader">
    <param name="popupTitle">Your title/param>
    <param name="mode">popup</param>
  </module>

  <module layoutPanel="navigationHeader" name="AppBar"/>
  <module name="SideviewUtils" layoutPanel="appHeader"/>
  <module name="TitleBar" layoutPanel="viewHeader">
    <param name="showActionsMenu">False</param>
  </module>

ShaneNewman
Motivator

I do not see a screen capture.

0 Karma

dipanjan80
Explorer

Thanks ShaneNewman for your response.

One last question, this way will I be able to change the text in the account bar. If you have checked the screenshot / image, I have totally got rid of the account bar and brought in 'Hello World' and kept only App list dropdown and Username.

0 Karma

ShaneNewman
Motivator

My apologies.

In $SPLUNK_HOME\etc\apps\your_app\appserver\static

You will create your "custom" application.css and application.js/html.

Then bump the version by going to http://splunk_url:8000/info and click "Static resource cache control"

application.css example:

.appLogo {
height: 42px;
width: 104px;
background: url(your_logo.png) no-repeat 0 0;
}

.AccountBar .popupAppLogoContainer {
height: 46px;
}

0 Karma

dipanjan80
Explorer

I am not sure if I was clear explaining my need.
I want to customize the accountbar all together and have my own stuff. I am attaching one screenshot to depict it clearly. The screenshot is for the search screen. I have been able to modify the layout of the accountbar for this page.
I need similar changes for the dashboard page.

0 Karma

ShaneNewman
Motivator

This will work on version 5...

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...