Saltar al contenido

Cargador CSS

Vinyl se entrega con un widget CSS Loader que se puede usar para anular estilos CSS a nivel de sitio en lugar de configurarlos manualmente a través de un tema o a nivel de aplicación individual. Para utilizar CSS Loader, descargue una copia de CSS Loader, edítela styles.css según sea necesario y agréguelo a un widget CSS recién creado.

Nota

Al editar estilos.css querrás eliminar o editar las líneas de ejemplo de CSS existentes o estas aparecerán cuando actives el cargador de CSS.

Cómo Configurar

Paso 1: Personaliza el CSS

  1. Vaya a IDE > Apariencia
  2. Seleccione la Colección Vinyl en el panel Colecciones. Si no está disponible, haga clic en Ver todo.
  3. Haga clic en la pestaña Widgets
  4. Localice el widget CSS Loader y haga clic en el icono Abrir registro.
  5. Haga clic en el archivo Contenido de la ruta del widget para descargar el contenido .ZIP del widget.

  6. Abra el archivo .ZIP en un programa de edición de código y realice todos los cambios de personalización necesarios en styles.css

    estilos.png

    archivo estilos.css visto por el editor de Vinyl. Asegúrese de eliminar o editar estos ejemplos, o aparecerán cuando se activen.

  7. Seleccione una nueva Colección para agregar el contenido modificado del Cargador CSS. Tenga en cuenta que estas no pueden ser las colecciones Vinyl o Vinyl IDE.

  8. Haga clic en Subir widget
  9. Confirme la Colección en la que se almacenará el widget.
  10. Haga clic en el botón Examinar y busque el contenido .ZIP del widget CSS modificado.
  11. Haga clic en Guardar
  12. Asigne un Nombre para el widget CSS. Por ejemplo: widget CSS
  13. Revise Propósito y configúrelo como Campo o Sitio, según sea necesario

Paso 2: Configurar a Nivel del Sitio (o Seguir el Paso 3)

  1. Navegue a IDE > Configuraciones adicionales > Widgets del sitio
  2. Haga clic en + Registro de widgets
  3. Seleccione el Widget CSS como widget.
  4. Haga clic en la marca de verificación para guardar.
  5. Confirme que la columna Activo esté marcada/activada.

Paso 3: Configurar a Nivel de Aplicación

  1. Vaya a IDE > Apariencia
  2. Seleccione la Colección donde guardó la copia del widget CSS Loader, haga clic en la pestaña Widgets
  3. Localice el Widget CSS, haga clic en el icono Abrir registro
  4. Establezca el valor de Propósito en Sitio
  5. Haga clic en el botón Guardar
  6. Navegue a IDE > Configuración adicional > Widgets del sitio
  7. Haga clic en + Registro de widgets
  8. Seleccione Widget CSS en el menú desplegable de widgets.
  9. Haga clic en el icono marca de verificación para activar el widget CSS.
  10. Vuelva a su aplicación, actualice su navegador web y confirme las actualizaciones.