Guía de estilos CSS

La lista de archivos simple está diseñada para adoptar la apariencia del tema de su sitio web de manera predeterminada. Sin ninguna modificación del estilo, debería verse presentable en su sitio web de WordPress.

Sin embargo, si desea ajustar la apariencia, puede usar CSS dentro del tema de su sitio web. Al seleccionar los siguientes elementos HTML, puede anular los estilos integrados con su propio CSS.

Consulte estas Ejemplos de CSS si necesita ayuda para comenzar.

Elementos comunes en todas las vistas de listas de archivos

Envoltorio y contenedor de listas de archivos

  • .eeSFL:El contenedor principal para listas de archivos en todas las vistas.
  • .eeFiles:Un contenedor que contiene los elementos del archivo.

Estructura del elemento del archivo

  • .eeSFL_Item:Representa un archivo individual con detalles, acciones y metadatos.
  • .eeSFL_Thumbnail:Contiene la imagen en miniatura del archivo.
  • .eeSFL_FileName:Muestra el nombre del archivo y proporciona un enlace.
  • .eeSFL_FileDetails:Contiene metadatos (tamaño del archivo, fecha de carga).
  • .eeSFL_ListFileActions:Contiene los botones de acción para cada archivo (abrir, descargar, editar, eliminar).

Elementos específicos de la vista de tabla

La vista de tabla utiliza una tabla HTML tradicional para mostrar los archivos. Esta vista es adaptable y se convertirá en una vista en línea simple en pantallas pequeñas.

Tabla Contenedora y Estructura

  • .eeSFL actúa como el contenedor principal para la vista de tabla.
  • .eeFiles forma la estructura de la tabla.
  • Columnas de la tabla
    • .eeSFL_Thumbnail representa una columna para la miniatura.
    • .eeSFL_FileName Columna para el nombre del archivo.
    • .eeSFL_FileSize Columna para el tamaño del archivo.
    • .eeSFL_FileDate Columna para la fecha.
  • Fila de la tabla
    • .eeSFL_Item representa la fila completa de un archivo.
      Cada columna (Miniatura, Nombre, Tamaño, Fecha) es una celda dentro .eeSFL_Item.

Elementos específicos de la vista de mosaicos

La vista de mosaicos utiliza un diseño de cuadrícula para mostrar los archivos, de arriba a la izquierda a abajo a la derecha.

  • .eeFiles contiene los elementos del mosaico.
  • .eeSFL_Tile actúa como un contenedor de un único mosaico, que contiene cada archivo.
  • .eeSFL_FileLink para nombres de archivos en los que se pueda hacer clic.
  • .eeSFL_ListFileActions Dentro del mosaico se incluyen acciones como Abrir, Descargar, Copiar enlace.

Elementos específicos de la vista Flex

La vista flexible está diseñada para extenderse uniformemente a lo ancho del elemento contenedor.

  • .eeFiles utiliza un diseño de caja flexible para una alineación adaptable de los elementos del archivo.
  • .eeSFL_Item representa el contenedor de archivos con un diseño flexible.
  • .eeSFL_Thumbnail muestra la miniatura del archivo en una fila flexible.
  • .eeSFL_FileInfo Proporciona detalles del archivo junto a la miniatura.
  • .eeSFL_FileDetails Muestra el tamaño del archivo y la fecha.
  • .eeSFL_ListFileActions Proporciona enlaces para acciones como descargar, copiar y eliminar.

Cargar elementos del formulario

Estructura del formulario

  • #eeSFL_UploadForm envuelve todo el formulario de carga.
  • .eeSFL_UploadFilesTitle Es el encabezado del formulario de carga.

Campos de entrada

  • #eeSFL_Name Entrada para ingresar el nombre de quien subió el archivo.
  • #eeSFL_Email Entrada para ingresar el correo electrónico del cargador.
  • #eeSFL_FileDesc Entrada de texto para la descripción del archivo.

Área de carga de archivos

  • #eeSFL_FileInput para seleccionar archivos.
  • #eeSFL_FileDropZone para cargar archivos mediante arrastrar y soltar.
  • #eeSFL_FileUploadQueue muestra los archivos en cola para cargar.

Botones e indicadores

  • #eeSFL_UploadGo El botón que inicia el proceso de carga.
  • #eeSFL_UploadProgress muestra el progreso de la carga de archivos.
  • .sfl_instuctions Proporciona pautas o notas para la carga de archivos.

Deja un comentario

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.