Cómo usar CSS para versatile-banner

Soporte
2

Aquí te explicamos cómo hacerlo:

  1. Abrir la Herramienta de Inspección:
    Navega a la página web donde está habilitado el banner versátil. Haz clic derecho en cualquier lugar de la página y selecciona “Inspeccionar” (o presiona Ctrl + Shift + I en Windows o Cmd + Option + I en Mac). Esto abrirá las herramientas de desarrollador del navegador.

  2. Localizar el Banner:
    En la pestaña Elementos de las herramientas de desarrollador, pasa el cursor sobre diferentes secciones del código para ver las partes correspondientes de la página web resaltadas. Una vez que encuentres el banner, haz clic en el <div> más externo que lo contiene. Esto asegura que estás seleccionando todo el banner y todos sus elementos.

  3. Explorar los Elementos:
    Con el banner seleccionado, ahora puedes ver todos los elementos HTML anidados dentro de la estructura del banner en la pestaña Elementos. Esto te muestra la jerarquía del HTML utilizado para crear el banner.

  4. Inspeccionar los Estilos:
    En el lado derecho de las herramientas de desarrollador, encontrarás la pestaña Estilos. Esta muestra los estilos CSS aplicados al elemento seleccionado. Puedes ver estilos heredados, estilos en línea y estilos de hojas de estilo externas.

  5. Experimentar con Cambios:
    Selecciona un elemento dentro del banner y modifica sus estilos directamente en la pestaña Estilos. Por ejemplo, puedes ajustar colores, tamaños de fuente, relleno, márgenes o cualquier otra propiedad CSS. Estos cambios son temporales y visibles inmediatamente en la página web, lo que te permite experimentar libremente.

  6. Finalizar el Diseño:
    Una vez que estés satisfecho con los cambios de diseño, copia el código CSS modificado. Esto puede incluir cambios realizados en elementos individuales o en todo el banner.

  7. Aplicar los Cambios:
    Ve a tu https://yoursite.com/admin/customize/components crea un componente y luego en la sección Editar HTML/CSS y pega el código CSS modificado. Asegúrate de apuntar a la clase o ID de banner apropiado para garantizar que los estilos se apliquen correctamente y luego aplica ese componente a tu tema.

  8. Guardar y Revisar:
    Guarda el CSS actualizado, actualiza tu sitio web y confirma que el banner refleja los cambios como se esperaba.

También puedes consultar: Cómo personalizar CSS en Discourse