✅Ajustes Generales de Layout en Use Your Drive: Personaliza el Estilo y Comportamiento del Plugin

El plugin Use-your-Drive no solo te permite integrar Google Drive en WordPress de forma funcional, sino que también te da bastante control sobre el diseño visual y el comportamiento de sus módulos gracias a su sección de ajustes globales de layout.

En este artículo te explico para qué sirve cada sección de Layout, y cómo puedes ajustar el estilo general del plugin a tu gusto sin necesidad de editar código.

¿Dónde están los ajustes globales de layout?

Ve al panel de administración de WordPress y entra en:
Use-your-Drive → Ajustes → Layout

Desde ahí podrás controlar el aspecto visual (colores, bordes, temas), los loaders, las galerías, el lightbox y el reproductor multimedia. Todo lo que ajustes aquí se aplicará por defecto a todos los módulos, aunque siempre puedes sobrescribirlo a nivel individual desde la configuración de cada uno.

General

Aquí defines la estructura visual general:

• Radio de las esquinas: redondeo de los bordes en píxeles. Aplica a botones, tarjetas de archivo, cuadros de diálogo, etc. Por ejemplo: 8px le da un aspecto moderno.
• Brecha en la red: separación entre los elementos en la vista de cuadrícula. Si ves que todo está muy junto, puedes ampliarlo (por ejemplo 16px o 24px).

Paleta de Color

Controla el estilo de color base del plugin:

• Estilo del tema: elige entre modo claro o oscuro, según el diseño de tu web.
• Colores: selecciona el color principal del plugin. Este afecta botones, iconos activos, spinners, etc. Puedes adaptar este color a tu branding.

Cargando Spinner e Imágenes

Define qué se muestra cuando hay cargas o errores:

• Loader Spinner: elige el estilo del spinner (imagen, latido, círculo giratorio…).
• Cargador General: imagen que se muestra mientras carga un módulo como File Browser o Galería.
• Sin resultados: imagen que se muestra si no hay archivos en la carpeta.
• Acceso Prohibido: imagen que aparece si el usuario no tiene permiso para acceder al módulo.
• Cargador iFrame: imagen de carga específica para vistas previas en iframe (PDFs, vídeos, etc.).

Conjunto de iconos

• Conjunto de iconos del navegador de archivos: permite personalizar la ubicación del conjunto de iconos que se muestran cuando no hay miniatura. Si no usas esta opción avanzada, puedes dejarlo por defecto.

Lightbox

Opciones para la vista previa de imágenes o documentos:

• LightBox Aspecto: elige la apariencia visual del visor emergente.
• Lightbox Desplazamiento: cambia el comportamiento de navegación:
  • vertical (por defecto): se desliza hacia arriba/abajo.
  • horizontal: se desliza de lado a lado.
• Fuente de la imágen: elige entre mostrar:
  • Miniaturas grandes (más rápidas)
  • Archivo original (más lento, pero calidad completa)
• Mostrar miniaturas: activa o desactiva las miniaturas en el lightbox.
• Permitir clic del ratón: habilita o bloquea el clic derecho en imágenes (útil para evitar que se las descarguen fácilmente).
• Header: controla cuándo se muestra el encabezado del lightbox (con título y acciones).
• Descripción: decide si se muestra la descripción del archivo dentro del lightbox.

Galería

• Pase el ratón sobre el módulo para mostrar la barra de navegación: si está activado, la barra de navegación (botones, flechas, etc.) aparece solo al pasar el ratón por encima. Si lo desactivas, estará siempre visible.

Reproductor multimedia

Opciones para los módulos de audio y vídeo:

• Media Player Skin: elige el estilo por defecto del reproductor.
• Load native MediaElement.js library: actívalo si el reproductor se ve mal o no se carga bien. Esto resuelve conflictos con otros plugins que usen su propio reproductor.

CSS Personalizado

• Custom CSS: aquí puedes añadir tus propios estilos CSS para modificar la apariencia del plugin.
  Por ejemplo, para cambiar el color de fondo de los archivos destacados, puedes poner: .uyd-filetile.uyd-highlight { background-color: #f4f4f4; }
• No edites directamente los archivos CSS del plugin, porque se perderán en futuras actualizaciones. Usa este campo o agrega el código en Apariencia – CSS adicional si quieres mantener tus personalizaciones.

Conclusión

Los ajustes globales de layout de Use-your-Drive te permiten dejar el plugin con un aspecto profesional y coherente con tu marca, sin necesidad de saber código. Puedes controlar desde el estilo del lightbox hasta los iconos de archivos vacíos o el skin del reproductor de audio y vídeo.

Y si necesitas ajustes distintos en cada módulo, no te preocupes: todo esto se puede sobrescribir de forma individual en cada uno y lo que no, con CSS.