Articles in this section

See more

How to Customize the Navigation Pane in View Mode

  • Updated
Follow

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:

Document_Default_Menu.PNG

 

To a customized version where the navigation has been changed:

 

Document_Customized_Menu.PNG

 

Requirements

  • A Professional Displayr license.
  • Logged into Displayr as an Administrator.
  • A little knowledge of CSS and HTML will be advantageous.

Please note this requires the Data Stories module or a Displayr license.

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 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 the Announcement Message section. 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:

    Document_URL.PNG

  5. Click Save.
  6. Go back to your dashboard. If you have previously published your document then click Share > Republish, otherwise, if this is the first time you are publishing, select Share > 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

 

Related articles