You can style parts of your library that the Library design tab doesn’t cover, such as the background behind the library or the spacing inside a card.
Where to find it
Open Settings, go to the Advanced tab, and paste your CSS into the Custom CSS box. It applies to your library wherever it appears: the embed on your own website and your library page on documentlibrary.app.
Why your own site’s CSS can’t do this
Your library loads inside an iframe. A browser keeps the two pages apart, so the CSS on your website stops at the edge of the library and never reaches inside it. The Custom CSS box loads inside the library instead.
The same boundary applies in reverse. Custom CSS styles your library and nothing else on your page. Spacing, width or background around the library belongs to your own website.
What you can style
These are the supported selectors.
- The library background -
body.dlp-embedfor the embed,body.dlp-standalonefor your library page. Leave the selector off to style both. - A grid card -
.dlp-grid-card-inner - A grid card title -
.dlp-grid-card-title - The table -
.data-tablefor the table itself,.table-cellfor a cell - A single table column -
.col-title. The other columns are.col-excerpt,.col-file_type,.col-file_size,.col-date_modified,.col-doc_categories,.col-linkand.col-button - The Download and Preview buttons -
.dlp-download-buttonand.dlp-preview-button - The search box -
.search-input - A filter dropdown -
.select-display-trigger - The row under the library holding the page numbers -
.footer-controls, and.pagination-btnfor a page number
Examples
Let a background image show through the cards:
body.dlp-embed .dlp-grid-card-inner {
background-color: rgba(255, 255, 255, 0.8);
}
Hide a column on the embed and leave your library page alone:
body.dlp-embed .col-excerpt {
display: none;
}
Make the document titles bigger everywhere:
.col-title {
font-size: 17px;
}
Things to know
- Your CSS loads after ours, so plain rules win and you rarely need
!important. A few table-cell styles load last, so add!importantif a rule doesn’t take. - Check the Library design tab first. Templates, colors, buttons and which columns show are all settings there. Settings aren’t affected when we update the library.
- We support the selectors listed above. Anything else in the markup is yours to maintain.
- The box accepts CSS only. It strips anything that isn’t a style, so you can’t add scripts or HTML through it.