In addition to the content and formatting that you use when creating a Displayr document, you can also:

  • Customize the overall look of the off-page elements of the document, such as the appearance of the navigation, and how the document name appears.
  • Customize the logo that is shown when people create a link to a Displayr document on an iPad.
  • Specify the language that is used by people in View mode (i.e., people that look at a published document), such as the words used on the login screens.

To modify these settings, log in to Displayr, click the cog at the top-right of the screen, select Account, and then switch to the Settings tab on your account page. If you scroll down you will see the options below, each of which can be clicked on.

The Create theme option will allow you to set the logo to use in the top left corner of your Displayr documents (in place of the Displayr logo), as well as setting colors for the buttons and links that appear in your published documents.

The Edit language option will allow you to override all of the text that appears in published documents. Thus, it allows you to control the phrasing that the end-users of your dashboard will see. For example. if you want to change the word Filters to "Subgroups" in your published document, you can change that here.

For the remainder of this post I will present some examples of modifying the most advanced setting here, Edit theme CSS/HTML. This option will allow the most control over the appearance of your published documents, but it does require a little knowledge of CSS and HTML.

Introduction: Specifying where your theme is applied

By default, any code you write into the Cascading Style Sheet (CSS) box will affect both the Displayr document's Edit Mode and its View Mode. It will also be applied to all the documents in your company.

Below, I will explain how to apply the css to the View Mode only and how to assign CSS to specific documents in your company.

To ensure that your css will only affect the document when it's in View Mode, use the following code before entering the css pertaining to the page element that needs to be changed:

 
body.dashboard.view 

The "dashboard" part of the code ensures that the css you are applying will affect all the documents in the company. This is especially handy if you are looking to apply consistent branding across all your documents.

To apply your css to a specific document in your company, simply replace "dashboard" with your document's project id which can be found in the URL when you are in Edit Mode. This will be explained more in Example 1 below.

Example 1: Hiding the document name for a document

By default, Displayr places the name of a document in the top left-corner of the web pages that are shared with users (i.e., dashboards). Sometimes this is undesirable. In the example below, a heading has been created in a yellow box on the page, so having the heading appear also at the top-left of the screen just undermines the design.

To turn it off for all documents in a company, modify the CSS by clicking on Edit theme/CSS (Advanced) /theme and pasting the following text into the Cascading Style Sheet (CSS) box.

body.dashboard.view .project-name-text { display: none; }

 

To turn it off for just a specific document, use:

body.project-213724.view .project-name-text {    display: none;}

where 213724 is the Project ID of the document, which is shown in a document's URL:

Example 2: Customizing the navigation bar

A screenshot of a document created in Displayr is shown below. Note that the navigation, shown on the left-side of the pages, is exactly as it looks within Displayr. It can be modified by changing the CSS.

Below is the reworked version, where I have changed the navigation.

I modified the CSS by clicking on Edit theme/CSS (Advanced) /theme and pasting the following text into the Cascading Style Sheet (CSS) box. This applies to all the dashboards in my company.

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: 16px; font-weight: 300; }
body.dashboard.view .tree-view .tree-view-inner .item { height: auto !important; margin-bottom: 0.3em; background-color: #00c8c8; color: white; padding-top: 0.2em; padding-bottom: 0.2em; border: none; }
body.dashboard.view .tree-view .tree-view-inner .item:hover { background-color: #3E7dcc; }
body.dashboard.view .tree-view .tree-view-inner .item.selected-item { background-color: #3E7dcc; }
body.dashboard.view .tree-view .tree-view-inner .item .item-title { top: -1px; }
body.dashboard.view .tree-view-long-item-tooltip-container { visibility: hidden; }

Example 3: Centering the page

The default appearance of a page centers the page of a document relative to the navigation bar. This code instead centers it relative to the entire screen. This changes is made for documents in a company (replace the # to limit it to a specific document, following example 1).

body.dashboard.view #left-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 }

Example 4: Removing the header strip

By default, when a dashboard is being viewed, Displayr shows a search box, filters, and various other details on the top:

These can be removed by adding the following line of code:

body.dashboard.view #header-strip { visibility: hidden; }

Example 5: Multiple changes

In the final example, I:

  • Make all the changes made in Example 2.
  • Make additional changes to the navigation for project 220178 (as shown to the right).
  • Hide the document name.
  • Align the page to the left.
/* Hiding the document name for all dashboards in the company. */

body.dashboard.view .project-name-text { display: none; }

/* Centering dashboards on the page, rather than in the space to the right of the navigation bar. */

body.dashboard.view #left-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 }

/* Changing the default appearance of the nagivation bar to remove the within-page items and to Displayr coloring */

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: 16px; font-weight: 300; }
body.dashboard.view .tree-view .tree-view-inner .item { height: auto !important; margin-bottom: 0.3em; background-color: #00c8c8; color: white; padding-top: 0.2em; padding-bottom: 0.2em; border: none; }
body.dashboard.view .tree-view .tree-view-inner .item:hover { background-color: #3E7dcc; }
body.dashboard.view .tree-view .tree-view-inner .item.selected-item { background-color: #3E7dcc; }
body.dashboard.view .tree-view .tree-view-inner .item .item-title { top: -1px; }
body.dashboard.view .tree-view-long-item-tooltip-container { visibility: hidden; }

/* Changing the navigation bar panels for dashboard 220178 */

body.project-220178.view .tree-view .tree-view-inner .item { height: auto !important; margin-bottom: 0.3em; background-color: #F1F1F1; color: #0078C0; padding-top: 0.2em; padding-bottom: 0.2em; border: none; }
body.project-220178.view .tree-view .tree-view-inner .item:hover { color: #F1F1F1; background-color: #0078C0; }
body.project-220178.view .tree-view .tree-view-inner .item.selected-item { color: #F1F1F1; background-color: #0078C0; }

/* Left-aligning the workarea dashboard for 223863 */

body.project-223863.view #workarea { left: 0 !important }

It is pretty straightforward to perform simple modifications of this code (e.g., change the color settings). It is possible to do a whole lot more, but to do this you need somebody with expertise in web development. Sadly, our support team cannot help with this, as it is well outside of our expertise! (Thanks go to Jan, the developer who helped me with this post.)