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!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...