Eigen CSS

Je kunt delen van je bibliotheek vormgeven die het tabblad Bibliotheekontwerp niet dekt, zoals de achtergrond achter de bibliotheek of de ruimte binnen een kaart.

Waar je dit vindt

Openen Instellingen, ga naar het tabblad Advanced en plak je CSS in het veld Eigen CSS dat daarvoor bedoeld is. Het geldt voor je bibliotheek waar die ook verschijnt: de insluiting op je eigen website en je bibliotheekpagina op documentlibrary.app.

Waarom de CSS van je eigen site dit niet kan

Je bibliotheek laadt in een iframe. Een browser houdt de twee pagina's apart, dus de CSS op je website stopt aan de rand van de bibliotheek en komt er nooit binnen. Het veld Eigen CSS laadt juist binnen de bibliotheek.

Diezelfde grens werkt ook omgekeerd. Eigen CSS geeft je bibliotheek vorm en niets anders op je pagina. Ruimte, breedte of achtergrond rondom de bibliotheek horen bij je eigen website.

Wat je kunt vormgeven

Dit zijn de ondersteunde selectors.

De achtergrond van de bibliotheek - body.dlp-embed voor de insluiting, body.dlp-standalone voor je bibliotheekpagina. Laat de selector weg om ze beide vorm te geven.
Een rasterkaart - .dlp-grid-card-inner
De titel van een rasterkaart - .dlp-grid-card-title
De tabel - .data-table voor de tabel zelf, .table-cell voor een cel
Eén tabelkolom - .col-title. De andere kolommen zijn .col-excerpt, .col-file_type, .col-file_size, .col-date_modified, .col-doc_categories, .col-link en .col-button
De knoppen Downloaden en Voorbeeld - .dlp-download-button en .dlp-preview-button
Het zoekveld - .search-input
Een filterdropdown - .select-display-trigger
De rij onder de bibliotheek met de paginanummers - .footer-controls, en .pagination-btn voor een paginanummer

Voorbeelden

Een achtergrondafbeelding door de kaarten laten schijnen:

body.dlp-embed .dlp-grid-card-inner {
    background-color: rgba(255, 255, 255, 0.8);
}

Een kolom in de insluiting verbergen en je bibliotheekpagina ongemoeid laten:

body.dlp-embed .col-excerpt {
    display: none;
}

De documenttitels overal groter maken:

.col-title {
    font-size: 17px;
}

Goed om te weten

Jouw CSS laadt na die van ons, dus gewone regels winnen en je kunt vaak zonder !important. Een paar celstijlen laden als laatste, gebruik daarom !important als een regel niet aanslaat.
Kijk eerst op het tabblad Bibliotheekontwerp. Templates, kleuren, knoppen en welke kolommen te zien zijn, staan daar allemaal als instelling. Instellingen blijven zoals ze zijn wanneer wij de bibliotheek bijwerken.
Wij ondersteunen de selectors hierboven. Al het andere in de markup houd je zelf bij.
Het veld accepteert alleen CSS. Het haalt alles weg wat geen stijl is, dus je kunt er geen scripts of HTML door toevoegen.