CSS personalizzato

Puoi dare uno stile alle parti della tua libreria che la scheda Design libreria non copre, come lo sfondo dietro la libreria o la spaziatura dentro una card.

Dove trovarlo

Apri Impostazioni, vai alla scheda Advanced e incolla il tuo CSS nel campo CSS personalizzato dedicato. Vale per la tua libreria in qualsiasi punto appaia: l'embed sul tuo sito e la pagina della tua libreria su documentlibrary.app.

Perché il CSS del tuo sito non può farlo

La tua libreria si carica dentro un iframe. Il browser tiene separate le due pagine, quindi il CSS del tuo sito si ferma al bordo della libreria e non entra mai al suo interno. Il campo CSS personalizzato si carica invece dentro la libreria.

Lo stesso confine vale al contrario. Il CSS personalizzato dà uno stile alla tua libreria e a nient'altro nella tua pagina. Spaziatura, larghezza o sfondo attorno alla libreria appartengono al tuo sito.

Cosa puoi personalizzare

Questi sono i selettori supportati.

• Lo sfondo della libreria - body.dlp-embed per l'embed, body.dlp-standalone per la pagina della tua libreria. Ometti il selettore per applicarlo a entrambe.
• Una card della griglia - .dlp-grid-card-inner
• Il titolo di una card della griglia - .dlp-grid-card-title
• La tabella - .data-table per la tabella stessa, .table-cell per una cella
• Una singola colonna della tabella - .col-title. Le altre colonne sono .col-excerpt, .col-file_type, .col-file_size, .col-date_modified, .col-doc_categories, .col-link e .col-button
• I pulsanti Download e Anteprima - .dlp-download-button e .dlp-preview-button
• Il campo di ricerca - .search-input
• Un menu a tendina di filtro - .select-display-trigger
• La riga sotto la libreria con i numeri di pagina - .footer-controls, e .pagination-btn per un numero di pagina

Esempi

Far trasparire un'immagine di sfondo attraverso le card:

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

Nascondere una colonna nell'embed e lasciare intatta la pagina della tua libreria:

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

Rendere più grandi i titoli dei documenti in ogni punto:

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

Cose da sapere

• Il tuo CSS si carica dopo il nostro, quindi le regole semplici vincono e raramente ti serve !important. Alcuni stili delle celle si caricano per ultimi, quindi aggiungi !important se una regola non viene applicata.
• Guarda prima nella scheda Design libreria. Modelli, colori, pulsanti e quali colonne compaiono sono tutte impostazioni che stanno lì. Le impostazioni non vengono toccate quando aggiorniamo la libreria.
• Supportiamo i selettori elencati sopra. Tutto il resto nel markup lo mantieni tu.
• Il campo accetta solo CSS. Rimuove tutto ciò che non è uno stile, quindi non puoi aggiungere script o HTML.