CSS personalizado

Puedes dar estilo a partes de tu biblioteca que la pestaña Diseño de la biblioteca no cubre, como el fondo detrás de la biblioteca o el espaciado dentro de una tarjeta.

Dónde encontrarlo

Abre Ajustes, ve a la pestaña Avanzado y pega tu CSS en el campo CSS personalizado correspondiente. Se aplica a tu biblioteca donde sea que aparezca: la inserción en tu propia web y la página de tu biblioteca en documentlibrary.app.

Por qué el CSS de tu propia web no puede hacerlo

Tu biblioteca se carga dentro de un iframe. El navegador mantiene separadas las dos páginas, así que el CSS de tu web se detiene en el borde de la biblioteca y nunca llega a su interior. El campo CSS personalizado se carga dentro de la biblioteca.

El mismo límite se aplica al revés. El CSS personalizado da estilo a tu biblioteca y a nada más de tu página. El espaciado, el ancho o el fondo alrededor de la biblioteca son cosa de tu propia web.

Qué puedes personalizar

Estos son los selectores admitidos.

  • El fondo de la biblioteca - body.dlp-embed para la inserción, body.dlp-standalone para la página de tu biblioteca. Omite el selector para dar estilo a las dos.
  • Una tarjeta de la cuadrícula - .dlp-grid-card-inner
  • El título de una tarjeta de la cuadrícula - .dlp-grid-card-title
  • La tabla - .data-table para la tabla en sí, .table-cell para una celda
  • Una sola columna de la tabla - .col-title. Las demás columnas son .col-excerpt, .col-file_type, .col-file_size, .col-date_modified, .col-doc_categories, .col-link y .col-button
  • Los botones Descargar y Vista previa - .dlp-download-button y .dlp-preview-button
  • El campo de búsqueda - .search-input
  • Un desplegable de filtro - .select-display-trigger
  • La fila bajo la biblioteca con los números de página - .footer-controls, y .pagination-btn para un número de página

Ejemplos

Dejar que una imagen de fondo se vea a través de las tarjetas:

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

Ocultar una columna en la inserción y dejar la página de tu biblioteca intacta:

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

Hacer más grandes los títulos de los documentos en todas partes:

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

Cosas que conviene saber

  • Tu CSS se carga después del nuestro, así que las reglas normales ganan y rara vez necesitas !important. Algunos estilos de celda se cargan al final, así que añade !important si una regla no surte efecto.
  • Mira primero en la pestaña Diseño de la biblioteca. Las plantillas, los colores, los botones y las columnas que se muestran son ajustes de ahí. Los ajustes no se ven afectados cuando actualizamos la biblioteca.
  • Admitimos los selectores de la lista de arriba. Todo lo demás del markup lo mantienes tú.
  • El campo solo acepta CSS. Elimina todo lo que no sea un estilo, así que no puedes añadir scripts ni HTML por ahí.

Artículos relacionados

¿Listo para organizar tus documentos en una biblioteca con búsqueda?

Configura tu primera biblioteca en minutos: como plugin de WordPress, insertada en cualquier sitio, o como una biblioteca alojada propia.

Empieza gratis

Prueba gratuita 14 días Cancela cuando quieras