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

In Displayr, it is possible to customize the overall look and feel of your document. When a document has been published as an online dashboard, by default the page centers relative to the navigation bar. This article describes how to center the document relative to the entire screen.

Requirements

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

Please note these steps require a Displayr license.

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 center the document relative to the entire screen:

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

To apply the change to all documents, paste the following text into the Cascading Style Sheet (CSS) box:

/* Center the document relative to the entire screen for all documents in the company */
body.dashboard.view #report-and-data-panel { z-index: 1000 }
body.dashboard.view #workarea { transform-origin: 50% top 2px !important; }
body.dashboard.view #workarea-container, body.dashboard.view #workarea { left: 0 !important; right: 0 !important; margin: 0 auto; position: absolute; }
body.dashboard.view #workarea-container { background: none !important }

To apply the change to a specific document only, use:

/* Center the document relative to the entire screen for  a specific document */
body.project-XXXXXX.view #report-and-data-panel { z-index: 1000 }
body.project-XXXXXX.view #workarea { transform-origin: 50% top 2px !important; }
body.project-XXXXXX.view #workarea-container, body.dashboard.view #workarea { left: 0 !important; right: 0 !important; margin: 0 auto; position: absolute; }
body.project-XXXXXX.view #workarea-container { background: none !important }

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

Click Save.
Go back to your Document.
Click on Share at the top of the page and then Publish as Web Pages > Publish (or Publish > Republish if you have published the document previously).
Select Open in new tab. A published version of the Document will open in a new tab with the page centered relative to the screen.