Cómo usar CSS para versatile-banner

Soporte
1

Me gustaría cambiar el color de los elementos Expandir y Cerrar en el banner. Supongo que esto se puede hacer con CSS. Pero, ¿cómo se hace para el componente banner?

1 me gusta
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

3

@MihirR excelentes instrucciones genéricas, muchas gracias.

Una pequeña lectura parece indicar que Firefox tiene un mejor Editor de Estilo que Chrome en las herramientas de desarrollador web.

Pero para llegar al caso específico, estoy teniendo grandes dificultades, porque los botones Expandir y Cerrar cambian de color al pasar el ratón por encima y me siento derrotado intentando encontrar cómo establecer el color base. El elemento parece ser la clase span.d-button-label.

4

Hola :wave:

Aquí tienes un ejemplo de cómo cambiar el color de esos botones.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // cambia esto al color deseado
      }
      // color al pasar el ratón y al enfocar
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // cambia esto al color deseado
          }
        }
      }
    }
  }
}
4 Me gusta
5

¿@Dan es SCSS o LESS? Estoy desactualizado con el CSS actual. ¿Discourse usa eso sin que yo tenga que compilar?

1 me gusta
6

@Andro eso es SCSS :))

7

¿Así que Discourse entiende SCCS de forma nativa?

1 me gusta
8

Sí, entiende SCSS de forma nativa.

2 Me gusta
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.