How to Customize the Navigation Pane in View Mode

In Displayr, it is possible to customize the overall look of the off-page elements of the document. This article describes how to customize the navigation pane, to go from the example below that shows how the navigation pane looks within Displayr by default:

To a customized version where the navigation has been changed:

Requirements

• A Professional Displayr license.
• A little knowledge of CSS and HTML will be advantageous.

Please Note: While this article can serve as a guide, our support team cannot help with custom CSS coding, as it is well outside of our expertise

Method

To modify the settings to to customize the navigation pane:

1. Click on the user icon in the top right-hand corner of the screen.
2. Select Account Settings, and then switch to the Settings tab on your account page.
3. Scroll down the page, you will see Edit theme CSS/HTML (advanced) option below Billing details. Click on the Edit theme CSS/HTML (advanced) option. This is where you can control the appearance of your published document.
4. To modify the CSS as shown above, paste the following code into the Cascading Style Sheet (CSS) box. This applies to all the dashboards in your company.
   

   /* Customize the navigation pane for all documents in the company */
   body.dashboard.view .item-expander-group--1 { display: none !important; }
   body.dashboard.view .item-icon { display: none !important; }
   body.dashboard.view #report-tree { font-size: 10px; font-weight: 300; }
   body.dashboard.view .tree-view .tree-view-inner .item { height: auto !important; margin-bottom: 0.3em; background-color: #FB9B37; color: white; padding-top: 0.2em; padding-bottom: 0.2em; border: none; }
   body.dashboard.view .tree-view .tree-view-inner .item:hover { background-color: #FD0100; }
   body.dashboard.view .tree-view .tree-view-inner .item.selected-item { background-color: #FD0100; }
   body.dashboard.view .tree-view .tree-view-inner .item .item-title { top: -1px; }
   body.dashboard.view .tree-view-long-item-tooltip-container { visibility: hidden; }

   
   To apply this to a specific document, replace
   
   

   body.dashboard.view 

   
   with
   
   

   body.project-XXXXXX.view

   
   where XXXXXX is the Project ID of the document, which is shown in the document's URL:
   
   
   
   
5. Click Save.
6. Go back to your dashboard. If you have previously published your document then click Publish > Republish, otherwise, if this is the first time you are publishing, select Publish > Publish as Web Pages and follow the instructions found here: How to Publish a Document as a Web Page (Dashboard)
7. Then click on Open in new tab and the Navigation pane will reflect the changes you have made.
   
   

Notes

You can also apply styling to an individual page in your navigation pane. Following a similar method as above, you'll need the unique code for the individual page you want to stylize in the pane. You can get this from the URL in the address bar after #page=. For example the below code will bold the page's name in the pane:

body.dashboard.view .tree-view .tree-view-inner .item[id='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'] .item-title { font-weight: bold; }

Next

How to Hide the Document Name for a Document

How to Remove the Header Strip in View Mode

How to Center the Document Relative to the Entire Screen