{"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\/nl\/docs\/custom-css\/","title":{"rendered":"Eigen CSS"},"content":{"rendered":"

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.<\/p>\n

Waar je dit vindt<\/h2>\n

Openen Instellingen<\/strong>, ga naar het tabblad Advanced<\/strong> en plak je CSS in het veld Eigen CSS<\/strong> 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.<\/p>\n

Waarom de CSS van je eigen site dit niet kan<\/h2>\n

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.<\/p>\n

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.<\/p>\n

Wat je kunt vormgeven<\/h2>\n

Dit zijn de ondersteunde selectors.<\/p>\n

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

    Voorbeelden<\/h2>\n

    Een achtergrondafbeelding door de kaarten laten schijnen:<\/p>\n

    body.dlp-embed .dlp-grid-card-inner {\n    background-color: rgba(255, 255, 255, 0.8);\n}<\/pre>\n
    Een kolom in de insluiting verbergen en je bibliotheekpagina ongemoeid laten:<\/p>\n
    body.dlp-embed .col-excerpt {\n    display: none;\n}<\/pre>\n
    De documenttitels overal groter maken:<\/p>\n
    .col-title {\n    font-size: 17px;\n}<\/pre>\n
    Goed om te weten<\/h2>\n
      \n
    • Jouw CSS laadt na die van ons, dus gewone regels winnen en je kunt vaak zonder !important<\/code>. Een paar celstijlen laden als laatste, gebruik daarom !important<\/code> als een regel niet aanslaat.<\/li>\n
    • 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.<\/li>\n
    • Wij ondersteunen de selectors hierboven. Al het andere in de markup houd je zelf bij.<\/li>\n
    • Het veld accepteert alleen CSS. Het haalt alles weg wat geen stijl is, dus je kunt er geen scripts of HTML door toevoegen.<\/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\/nl\/docs\/custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\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\/nl\/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\":\"nl-NL\",\"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\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/documentlibrary.pro\\\/#organization\",\"name\":\"Document Library Pro\",\"url\":\"https:\\\/\\\/documentlibrary.pro\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@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":"Eigen CSS","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\/nl\/docs\/custom-css\/","og_locale":"nl_NL","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\/nl\/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":"Eigen 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":"nl-NL","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":"Zoekbare documentbibliotheken voor elke 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":"nl-NL"},{"@type":"Organization","@id":"https:\/\/documentlibrary.pro\/#organization","name":"Document Library Pro","url":"https:\/\/documentlibrary.pro\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@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 gehoste documentbibliotheeksoftware waarmee u doorzoekbare, filterbare bibliotheken met PDF's, documenten en bronnen op elke website of platform kunt publiceren."}]}},"_links":{"self":[{"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/doc\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":1,"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/doc\/1173\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/doc\/1173\/revisions\/1174"}],"wp:attachment":[{"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/documentlibrary.pro\/nl\/wp-json\/wp\/v2\/doc_category?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}