Eigenes CSS

Du kannst Teile deiner Bibliothek gestalten, die der Tab Bibliotheksdesign nicht abdeckt, etwa den Hintergrund hinter der Bibliothek oder die Abstände innerhalb einer Karte.

Wo du es findest

Öffnen Einstellungen, gehe zum Tab Erweitert und füge dein CSS in das Feld Eigenes CSS ein. Es gilt für deine Bibliothek, wo auch immer sie erscheint: die Einbettung auf deiner eigenen Website und deine Bibliotheksseite auf documentlibrary.app.

Warum das CSS deiner eigenen Website das nicht kann

Deine Bibliothek lädt in einem iframe. Ein Browser hält die beiden Seiten getrennt, deshalb endet das CSS deiner Website am Rand der Bibliothek und reicht nie in sie hinein. Das Feld Eigenes CSS lädt stattdessen innerhalb der Bibliothek.

Die Grenze gilt auch umgekehrt. Eigenes CSS gestaltet deine Bibliothek und nichts anderes auf deiner Seite. Abstand, Breite oder Hintergrund rund um die Bibliothek gehören zu deiner eigenen Website.

Was du gestalten kannst

Dies sind die unterstützten Selektoren.

• Der Hintergrund der Bibliothek - body.dlp-embed für die Einbettung, body.dlp-standalone für deine Bibliotheksseite. Lass den Selektor weg, um beide zu gestalten.
• Eine Rasterkarte - .dlp-grid-card-inner
• Der Titel einer Rasterkarte - .dlp-grid-card-title
• Die Tabelle - .data-table für die Tabelle selbst, .table-cell für eine Zelle
• Eine einzelne Tabellenspalte - .col-title. Die anderen Spalten sind .col-excerpt, .col-file_type, .col-file_size, .col-date_modified, .col-doc_categories, .col-link und .col-button
• Die Buttons Download und Vorschau - .dlp-download-button und .dlp-preview-button
• Das Suchfeld - .search-input
• Ein Filter-Dropdown - .select-display-trigger
• Die Zeile unter der Bibliothek mit den Seitenzahlen - .footer-controlsund .pagination-btn für eine Seitenzahl

Beispiele

Ein Hintergrundbild durch die Karten scheinen lassen:

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

Eine Spalte in der Einbettung ausblenden und die Bibliotheksseite unverändert lassen:

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

Die Dokumenttitel überall größer machen:

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

Gut zu wissen

• Dein CSS wird nach unserem geladen, deshalb setzen sich normale Regeln durch und du brauchst nur selten !important. Ein paar Tabellenzellen-Stile werden zuletzt geladen, füge daher !important hinzu, wenn eine Regel nicht greift.
• Schau zuerst im Tab Bibliotheksdesign. Vorlagen, Farben, Buttons und welche Spalten erscheinen, sind alle Einstellungen dort. Einstellungen sind nicht betroffen, wenn wir die Bibliothek aktualisieren.
• Wir unterstützen die oben aufgeführten Selektoren. Alles andere im Markup pflegst du selbst.
• Das Feld nimmt nur CSS an. Es entfernt alles, was kein Stil ist, du kannst darüber also keine Skripte oder HTML einfügen.