Saltar al contenido

Cargador CSS en Jitterbit App Builder

App Builder incluye un widget Cargador de CSS que permite anular estilos CSS a nivel de sitio web, en lugar de configurarlos manualmente a través de un tema o de una aplicación individual. Para usar el Cargador de CSS, descargue una copia, edite styles.css según sea necesario y agréguelo a un widget CSS recién creado.

Nota

Al editar el archivo 'styles.css', deberá eliminar o editar las líneas de ejemplo CSS existentes; de lo contrario, estas aparecerán al activar el cargador de CSS.

Cómo configurar

Paso 1: Personaliza el CSS

  1. Vaya a IDE > Apariencia
  2. Seleccione la colección App Builder 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 ícono 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 editor de código y realice todos los cambios de personalización necesarios en styles.css

    estilos.png

    Archivo style.css, tal como lo visualiza el editor de App Builder. Asegúrate de eliminar o editar estos ejemplos; de lo contrario, aparecerán al activarlos.

  7. Seleccione una nueva Colección para agregar el contenido modificado del cargador CSS. Tenga en cuenta que no puede ser la Colección del App Builder ni las Colecciones del IDE del App Builder.

  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 Explorar y localice el contenido .ZIP del widget CSS modificado
  11. Haga clic en Guardar
  12. Asigna un Nombre al widget CSS. Por ejemplo: Widget CSS
  13. Revise el 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. Vaya a IDE > Configuración adicional > Widgets del sitio
  2. Haga clic en + Registro de widget
  3. Seleccione 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ó el widget Copiar CSS Loader y haga clic en la pestaña Widgets
  3. Localice el Widget CSS, haga clic en el ícono Abrir registro
  4. Establezca el valor Propósito en Sitio
  5. Haga clic en el botón Guardar
  6. Vaya a IDE > Configuración adicional > Widgets del sitio
  7. Haga clic en + Registro de widget
  8. Seleccione CSS Widget en el menú desplegable Widget
  9. Haga clic en el ícono de marca de verificación para activar el widget CSS
  10. Regrese a su aplicación, actualice su navegador web y confirme las actualizaciones.