UPCOMING WEBINAR: Build it once. Use it again: Create reusable charts with AI Register now >>

Articles in this section

See more

How to Hide the Document Name in View Mode

  • Updated
Follow

In Displayr, it is possible to customize the overall look of the off-page elements of a published document. For instance, it's possible to hide the document name. By default, Displayr places the name of the document in the top left-hand corner of the published dashboard. In the example below, a heading has been created in the yellow box on the page, so having the heading appear in the top left corner undermines the design. 

This post describes the steps required to take you from a state in which the Document name (e.g. Choice Simulator) appears...

Document_Name_Showing.PNG

...to a state where it is hidden:

Document_Name_Hidden.PNG

Requirements

  • A Professional Displayr license.
  • Logged into Displayr as an Administrator.
  • A Displayr Document published as a Web Page. 

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 and hide the document name:

  1. In the top right-hand corner click on the User Icon and select Account Settings.
  2. In Account Settings, select the Settings tab. 
  3. Scroll down the page, and select Edit theme CSS/HTML (advanced). This is where you can control the appearance of your published document.

  4. To turn off the document name for all documents, paste the following text into the Cascading Style Sheet (CSS) box:

    /* Turn off the document name for all documents in the company */
body.dashboard.view .project-name-text { display: none; }

    To turn off the document name for a specific document only, use the following text:

    /* Turn off the document name for a specific document */
body.project-XXXXXX.view .project-name-text { display: none;}

    replacing XXXXXX with the Project ID of the specific document. You can find the Project ID in the document's URL:
    Document_URL.PNG

  5. Click Save.
  6. Go back to your Document.
  7. Click on Share at the top of the page and then Publish to Web > Publish (or Publish > Republish if you have published the document previously).
  8. Select Open in new tab. A published version of the Document will open in a new tab with the document name hidden. 

  9. OPTIONAL: You can also hide the Last published text in the top left corner following the above steps, and replace the code in Step 5 with the below:

    /* Turn off the document name for all documents in the company */
body.dashboard.view .project-name-text { display: none; }

    or

    /* Turn off the last published text for a specific document */
body.project-XXXXXX.view .last-published-text {visibility: hidden;} 

Next

How to Customize the Navigation Pane 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