Introduction
In Displayr, it is possible to customize the overall look of the off-page elements of the document. By default, when a dashboard has been published and is being viewed, Displayr shows Filters, Explore, Export, a Search Box, Zoom settings, and various other details in the Header strip at the top of the screen. This article describes how to go from a view that looks similar to below:
To a view where these details have been removed:
Requirements
- Logged into Displayr as an Administrator.
- You need 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 hide the header strip:
- Click on the User 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, 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.
- To remove the header strip for all documents in the company, paste the following text into the Cascading Style Sheet (CSS) box:
/* Turn off the header strip for all documents in the company */
body.dashboard.view #header-strip { visibility: hidden; }
To remove the header strip for a specific document, use:
/* Turn off the header strip for a specific document */
body.project-XXXXXX.view #header-strip { visibility: hidden; }
where XXXXXX is the Project ID of the document, which is shown in the document's URL: - Click Save.
- Click on Publish at the top of the page and then Publish as Web Pages > Publish (or Publish > Republish if you have published the document previously).
- Click Open in new tab and observe that the Header Strip is now removed.
- OPTIONAL: It is also possible to remove individual elements of the header strip. For example:
-
- To remove the Filter button replace #header-strip with #filter-button.
- To remove the Explore button replace #header-strip with #explore-menu-button.
- To remove the Search bar replace #header-strip with #documentsearch.
-
See Also
How to Customize the Navigation Bar
How to Hide the Document Name for a Document
How to Center the Document Relative to the Entire Screen
Comments
0 comments
Article is closed for comments.