{"id":1173,"date":"2026-10-14T11:13:18","date_gmt":"2026-10-14T11:13:18","guid":{"rendered":"https:\/\/documentlibrary.pro\/docs\/custom-css\/"},"modified":"2026-10-14T11:22:19","modified_gmt":"2026-10-14T11:22:19","slug":"custom-css","status":"publish","type":"doc","link":"https:\/\/documentlibrary.pro\/fr\/docs\/custom-css\/","title":{"rendered":"CSS personnalis\u00e9"},"content":{"rendered":"

Vous pouvez styliser des parties de votre biblioth\u00e8que que l'onglet Design de la biblioth\u00e8que ne couvre pas, comme l'arri\u00e8re-plan derri\u00e8re la biblioth\u00e8que ou les espacements \u00e0 l'int\u00e9rieur d'une carte.<\/p>\n

O\u00f9 le trouver<\/h2>\n

Ouvrez Param\u00e8tres<\/strong>, acc\u00e9dez \u00e0 l'onglet Avanc\u00e9<\/strong> et collez votre CSS dans le champ CSS personnalis\u00e9<\/strong> pr\u00e9vu \u00e0 cet effet. Cela s'applique \u00e0 votre biblioth\u00e8que partout o\u00f9 elle appara\u00eet : l'int\u00e9gration sur votre propre site web et la page de votre biblioth\u00e8que sur documentlibrary.app.<\/p>\n

Pourquoi le CSS de votre propre site ne peut pas le faire<\/h2>\n

Votre biblioth\u00e8que se charge dans un iframe. Le navigateur garde les deux pages s\u00e9par\u00e9es, donc le CSS de votre site s'arr\u00eate au bord de la biblioth\u00e8que et n'y entre jamais. Le champ CSS personnalis\u00e9 se charge \u00e0 l'int\u00e9rieur de la biblioth\u00e8que.<\/p>\n

La m\u00eame limite s'applique dans l'autre sens. Le CSS personnalis\u00e9 stylise votre biblioth\u00e8que et rien d'autre sur votre page. L'espacement, la largeur ou l'arri\u00e8re-plan autour de la biblioth\u00e8que rel\u00e8vent de votre propre site.<\/p>\n

Ce que vous pouvez styliser<\/h2>\n

Voici les s\u00e9lecteurs pris en charge.<\/p>\n

    \n
  • L'arri\u00e8re-plan de la biblioth\u00e8que<\/strong> \u2013 body.dlp-embed<\/code> pour l'int\u00e9gration, body.dlp-standalone<\/code> pour la page de votre biblioth\u00e8que. Omettez le s\u00e9lecteur pour styliser les deux.<\/li>\n
  • Une carte de grille<\/strong> \u2013 .dlp-grid-card-inner<\/code><\/li>\n
  • Le titre d'une carte de grille<\/strong> \u2013 .dlp-grid-card-title<\/code><\/li>\n
  • Le tableau<\/strong> \u2013 .data-table<\/code> pour le tableau lui-m\u00eame, .table-cell<\/code> pour une cellule<\/li>\n
  • Une seule colonne du tableau<\/strong> \u2013 .col-title<\/code>. Les autres colonnes sont .col-excerpt<\/code>, .col-file_type<\/code>, .col-file_size<\/code>, .col-date_modified<\/code>, .col-doc_categories<\/code>, .col-link<\/code> et .col-button<\/code><\/li>\n
  • Les boutons T\u00e9l\u00e9charger et Aper\u00e7u<\/strong> \u2013 .dlp-download-button<\/code> et .dlp-preview-button<\/code><\/li>\n
  • Le champ de recherche<\/strong> \u2013 .search-input<\/code><\/li>\n
  • Un menu d\u00e9roulant de filtre<\/strong> \u2013 .select-display-trigger<\/code><\/li>\n
  • La ligne sous la biblioth\u00e8que qui contient les num\u00e9ros de page<\/strong> \u2013 .footer-controls<\/code>, et des .pagination-btn<\/code> pour un num\u00e9ro de page<\/li>\n<\/ul>\n

    Exemples<\/h2>\n

    Laisser une image d'arri\u00e8re-plan appara\u00eetre \u00e0 travers les cartes :<\/p>\n

    body.dlp-embed .dlp-grid-card-inner {\n    background-color: rgba(255, 255, 255, 0.8);\n}<\/pre>\n
    Masquer une colonne sur l'int\u00e9gration et laisser la page de votre biblioth\u00e8que intacte :<\/p>\n
    body.dlp-embed .col-excerpt {\n    display: none;\n}<\/pre>\n
    Agrandir les titres de documents partout :<\/p>\n
    .col-title {\n    font-size: 17px;\n}<\/pre>\n
    Bon \u00e0 savoir<\/h2>\n
      \n
    • Votre CSS se charge apr\u00e8s le n\u00f4tre, donc les r\u00e8gles simples l'emportent et vous avez rarement besoin de !important<\/code>. Quelques styles de cellules se chargent en dernier, ajoutez donc !important<\/code> si une r\u00e8gle ne s'applique pas.<\/li>\n
    • Regardez d'abord dans l'onglet Design de la biblioth\u00e8que. Les mod\u00e8les, les couleurs, les boutons et les colonnes affich\u00e9es sont tous des r\u00e9glages qui s'y trouvent. Les r\u00e9glages ne sont pas touch\u00e9s lorsque nous mettons la biblioth\u00e8que \u00e0 jour.<\/li>\n
    • Nous prenons en charge les s\u00e9lecteurs list\u00e9s ci-dessus. Tout le reste du markup est \u00e0 votre charge.<\/li>\n
    • 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.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
      You can style parts of your library that the Library design tab doesn\u2019t 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: […]<\/p>\n","protected":false},"menu_order":165,"template":"","meta":{"footnotes":""},"doc_category":[4],"class_list":["post-1173","doc","type-doc","status-publish","hentry","doc_category-building-your-library"],"yoast_head":"\nCustom CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/documentlibrary.pro\/fr\/docs\/custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom CSS\" \/>\n<meta property=\"og:description\" content=\"You can style parts of your library that the Library design tab doesn\u2019t 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: […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/documentlibrary.pro\/fr\/docs\/custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Document Library Pro\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-14T11:22:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/documentlibrary.pro\/wp-content\/uploads\/2026\/08\/dlp-og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/custom-css\\\/\",\"url\":\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/custom-css\\\/\",\"name\":\"Custom CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#website\"},\"datePublished\":\"2026-10-14T11:13:18+00:00\",\"dateModified\":\"2026-10-14T11:22:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/custom-css\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/custom-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/custom-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/documentlibrary.pro\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https:\\\/\\\/documentlibrary.pro\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Custom CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#website\",\"url\":\"https:\\\/\\\/documentlibrary.pro\\\/\",\"name\":\"Document Library Pro\",\"description\":\"Searchable document libraries for any website\",\"publisher\":{\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/documentlibrary.pro\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#organization\",\"name\":\"Document Library Pro\",\"url\":\"https:\\\/\\\/documentlibrary.pro\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/documentlibrary.pro\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/favicon-512.png\",\"contentUrl\":\"https:\\\/\\\/documentlibrary.pro\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/favicon-512.png\",\"width\":512,\"height\":512,\"caption\":\"Document Library Pro\"},\"image\":{\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"description\":\"Document Library Pro is hosted document library software that lets you publish searchable, filterable libraries of PDFs, documents and resources on any website or platform.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS personnalis\u00e9","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/documentlibrary.pro\/fr\/docs\/custom-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Custom CSS","og_description":"You can style parts of your library that the Library design tab doesn\u2019t 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: […]","og_url":"https:\/\/documentlibrary.pro\/fr\/docs\/custom-css\/","og_site_name":"Document Library Pro","article_modified_time":"2026-10-14T11:22:19+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/documentlibrary.pro\/wp-content\/uploads\/2026\/08\/dlp-og-image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/documentlibrary.pro\/docs\/custom-css\/","url":"https:\/\/documentlibrary.pro\/docs\/custom-css\/","name":"CSS personnalis\u00e9","isPartOf":{"@id":"https:\/\/documentlibrary.pro\/#website"},"datePublished":"2026-10-14T11:13:18+00:00","dateModified":"2026-10-14T11:22:19+00:00","breadcrumb":{"@id":"https:\/\/documentlibrary.pro\/docs\/custom-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/documentlibrary.pro\/docs\/custom-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/documentlibrary.pro\/docs\/custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/documentlibrary.pro\/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https:\/\/documentlibrary.pro\/docs\/"},{"@type":"ListItem","position":3,"name":"Custom CSS"}]},{"@type":"WebSite","@id":"https:\/\/documentlibrary.pro\/#website","url":"https:\/\/documentlibrary.pro\/","name":"Document Library Pro","description":"Biblioth\u00e8ques de documents consultables pour tout site web","publisher":{"@id":"https:\/\/documentlibrary.pro\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/documentlibrary.pro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/documentlibrary.pro\/#organization","name":"Document Library Pro","url":"https:\/\/documentlibrary.pro\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/documentlibrary.pro\/#\/schema\/logo\/image\/","url":"https:\/\/documentlibrary.pro\/wp-content\/uploads\/2026\/06\/favicon-512.png","contentUrl":"https:\/\/documentlibrary.pro\/wp-content\/uploads\/2026\/06\/favicon-512.png","width":512,"height":512,"caption":"Document Library Pro"},"image":{"@id":"https:\/\/documentlibrary.pro\/#\/schema\/logo\/image\/"},"description":"Document Library Pro est un logiciel de biblioth\u00e8que de documents h\u00e9berg\u00e9 qui vous permet de publier des biblioth\u00e8ques consultables et filtrables de PDF, de documents et de ressources sur tout site web ou plateforme."}]}},"_links":{"self":[{"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/doc\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":1,"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/doc\/1173\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/doc\/1173\/revisions\/1174"}],"wp:attachment":[{"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/documentlibrary.pro\/fr\/wp-json\/wp\/v2\/doc_category?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}