Vous pouvez styliser des parties de votre bibliothèque que l'onglet Design de la bibliothèque ne couvre pas, comme l'arrière-plan derrière la bibliothèque ou les espacements à l'intérieur d'une carte.
Où le trouver
Ouvrez Paramètres, accédez à l'onglet Avancé et collez votre CSS dans le champ CSS personnalisé prévu à cet effet. Cela s'applique à votre bibliothèque partout où elle apparaît : l'intégration sur votre propre site web et la page de votre bibliothèque sur documentlibrary.app.
Pourquoi le CSS de votre propre site ne peut pas le faire
Votre bibliothèque se charge dans un iframe. Le navigateur garde les deux pages séparées, donc le CSS de votre site s'arrête au bord de la bibliothèque et n'y entre jamais. Le champ CSS personnalisé se charge à l'intérieur de la bibliothèque.
La même limite s'applique dans l'autre sens. Le CSS personnalisé stylise votre bibliothèque et rien d'autre sur votre page. L'espacement, la largeur ou l'arrière-plan autour de la bibliothèque relèvent de votre propre site.
Ce que vous pouvez styliser
Voici les sélecteurs pris en charge.
- L'arrière-plan de la bibliothèque -
body.dlp-embedpour l'intégration,body.dlp-standalonepour la page de votre bibliothèque. Omettez le sélecteur pour styliser les deux. - Une carte de grille -
.dlp-grid-card-inner - Le titre d'une carte de grille -
.dlp-grid-card-title - Le tableau -
.data-tablepour le tableau lui-même,.table-cellpour une cellule - Une seule colonne du tableau -
.col-title. Les autres colonnes sont.col-excerpt,.col-file_type,.col-file_size,.col-date_modified,.col-doc_categories,.col-linket.col-button - Les boutons Télécharger et Aperçu -
.dlp-download-buttonet.dlp-preview-button - Le champ de recherche -
.search-input - Un menu déroulant de filtre -
.select-display-trigger - La ligne sous la bibliothèque qui contient les numéros de page -
.footer-controls, et des.pagination-btnpour un numéro de page
Exemples
Laisser une image d'arrière-plan apparaître à travers les cartes :
body.dlp-embed .dlp-grid-card-inner {
background-color: rgba(255, 255, 255, 0.8);
}
Masquer une colonne sur l'intégration et laisser la page de votre bibliothèque intacte :
body.dlp-embed .col-excerpt {
display: none;
}
Agrandir les titres de documents partout :
.col-title {
font-size: 17px;
}
Bon à savoir
- Votre CSS se charge après le nôtre, donc les règles simples l'emportent et vous avez rarement besoin de
!important. Quelques styles de cellules se chargent en dernier, ajoutez donc!importantsi une règle ne s'applique pas. - Regardez d'abord dans l'onglet Design de la bibliothèque. Les modèles, les couleurs, les boutons et les colonnes affichées sont tous des réglages qui s'y trouvent. Les réglages ne sont pas touchés lorsque nous mettons la bibliothèque à jour.
- Nous prenons en charge les sélecteurs listés ci-dessus. Tout le reste du markup est à votre charge.
- Le champ n'accepte que du CSS. Il retire tout ce qui n'est pas un style, vous ne pouvez donc pas y ajouter de scripts ni de HTML.