How to Remove the Header Strip in View Mode

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:
1. - 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.