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 pane has been changed:
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:
- Click on the initials icon in the top right-hand corner of the screen.
- Select Account Settings, and then switch to the Settings tab on your account page.
- Scroll down the page and click on the Edit theme CSS/HTML (advanced) option at the bottom of the Announcement Message section.
- 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 */
To apply this to a specific document, replace
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; }
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: - Click Save.
- 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)
- 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 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