UPCOMING WEBINAR: Run Research Your Way With AI Skills Register now >>

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 header and navigation pane 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 pane 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: 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 initials 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 and click on the Edit theme CSS/HTML (advanced) option at the bottom of the Announcement Message section.

  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.
    1.  If you have previously published your document, click Share > Go to view mode. 
    2. Otherwise, if this is the first time you are publishing, select Share > Publish to web and follow the instructions found here: How to Publish a Document as a Web Page (Dashboard). Once done, 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 code below 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 in View Mode

How to Remove the Header Strip in View Mode

How to Center the Document Relative to the Entire Screen in View Mode

Related articles