Articles in this section

See more

How to Apply CSS Styling to Multiple Documents

  • Updated
Follow

When managing multiple customer accounts in Displayr, each customer may want their own unique CSS styling applied across several documents. Each new document requires its own individual CSS rules; adding a new document means duplicating every CSS customization and updating each one, which is time-consuming and error-prone. This article shows you how to group all of a customer's documents under a single CSS block, so that adding a new document requires you to only update one line of code, and adding a new style rule never requires touching the document list.

Requirements

  • A Professional or Enterprise Displayr license.
  • Your user account must be a member of the Administrator user group.
  • A little knowledge of CSS and HTML would 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

  1. Get the document ID by opening each document in Displayr. The document ID is visible in the browser URL bar. For example, for the URL app.displayr.com/Dashboard?project_id=-123456, the document ID is 123456.
  2. Open the CSS/HTML settings by clicking on your initials at the top right corner and clicking on Account Settings > Settings > Edit theme CSS/HTML (advanced).
  3. Create a client block by inserting the code below. Be sure to update "Client name" with your client's name. Then list all the document IDs formatted as .project-XXXXXX replacing "XXXXXX" with the ID from step 1.
    /* Client name */
body:is(
  .project-123456,
  .project-789112,
  .project-345678
).view {

}

  1. Inside the curly brackets, add each CSS rule on its own line, prefixed with &. The & refers back to the parent selector, so each rule only applies to the listed documents.

    /* Client 1 */
body:is(
  .project-123456,
  .project-789112,
  .project-345678
).view {
  & #filter-button { visibility: hidden; }
  & #export-button { display: none; }
  & #report-and-data-panel-right-side { background-color: #2986CC; }
  & .tree-view .tree-view-inner .item:hover {
    background-color: #2986CC;
    color: #000000;
    border: solid;
    font-weight: 1000;
  }
  & .tree-view .tree-view-inner .item {
    height: auto !important;
    padding-bottom: 0.3em;
    color: #384047;
    background-color: transparent;
    padding-top: 0.2em;
    border-bottom: 1px;
  }
}

Here is what each part of the example block above does:

CSS Function What it does
body:is(...).view Targets only the listed document IDs, and only in view mode. Documents that are not in the list are not affected.
& #filter-button Hides the filter button in view mode for all listed documents.
& #export-button Removes the export button from the interface.
& #report-and-data-panel-right-side Sets the background color of the right-side panel.
& .tree-view … .item Controls the height, padding, and colors of navigation items in the tree view.
& .tree-view … .item:hover Sets the hover state for navigation items.
  1. If you have a second customer who would like their own CSS/HTML styling, copy the existing code block and paste it below the code block you just created. Otherwise, click Save.
  2. If customizing the block for another customer, update the document IDs. For example:
    /* Client 1 */
body:is(
  .project-123456,
  .project-789112
).view {
  & #filter-button { visibility: hidden; }
}

/* Client 2 */
body:is(
  .project-101112,
  .project-131415
).view {
  & #filter-button { visibility: hidden; }
  & #report-and-data-panel-right-side { background-color: #E84393; }
}
  3. Update the name of the client(s).
  4. Update the CSS styling code.
  5. Click Save. The styles take effect immediately in view mode for all listed documents.
  6. Test by opening one of the listed documents in view mode. Confirm the styling has been applied.

Add a new document to an existing customer

If you create a new document for a customer that has existing custom CSS/HTML stylings, all you need to do is add the new document ID to the code block.

  1. Find the document ID for the new document.
  2. Add it to the customer's :is() list. Add a comma after the previous last item, then add the new document ID on a new line.
body:is(
  .project-123456,
  .project-789112,
  .project-9999999  ← new document added here
).view {
  ...
}

Add a new styling rule to all documents in a block

If your CSS/HTML styling needs to be updated to meet your customer's needs, you only need to update the styling section of the code block for that customer. 

  1. Go to that customer's CSS/HTML styling section.
  2. Add a new line inside the block's curly braces which starts after .view, prefixed with &. The rule immediately applies to every document in the list once you click on Save.
body:is(
  .project-872650,
  .project-1323469
).view {
  & #filter-button { visibility: hidden; }
  & #new-element { background-color: #E5E8EE; }  ← new rule
}

Troubleshooting

The styles are not appearing in view mode.
Check that the document ID in your CSS exactly matches the one shown in the URL when viewing the document. IDs are case-sensitive and must include the project- prefix.
 
The styles are applying to the wrong documents.
Verify that each customer block uses its own correct set of document IDs, and that IDs have not been accidentally duplicated across blocks.
 
A document ID in the list is causing a CSS error in View mode.
Check that every document ID in the :is() list except the last one is followed by a comma. A missing or extra comma will break the block.

Next

How to Remove the Header Strip in View Mode

How to Customize the Navigation Pane in View Mode

How to Hide the Document Name in View Mode

How to Hide Buttons in the Export Menu in View Mode

Related articles