Cambiar el botón "+ Nuevo tema" para que coincida con el estilo del botón "Responder"

Soporte
1

Me gusta el estilo del botón “Responder”, que utiliza el color “Terciario” definido en /admin/customize/colors (Selección de Paletas de color)

image
image694×920 133 KB

Me gustaría que nuestro botón “Nuevo tema” tuviera el mismo estilo que el botón “Responder”, como se ilustra en este video:

2

Puedes intentar tomar el CSS del botón de respuesta y transferir estas propiedades al botón de agregar publicación:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Intenta agregar esto:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

A continuación, debes agregar CSS para :hover (al pasar el cursor):


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

Selecciona los colores necesarios con mayor precisión. Reemplaza *** con el color que desees.

Cómo agregar CSS a Discourse:

Puedes hacer esto con cualquier parte del CSS.

2 Me gusta
3

¡Respuesta fantástica!!! ¡Muchas gracias!

Podría aprovechar un poco más de consejo sobre CSS… ¿cómo podría minimizar mejor estos dos fragmentos de código?:

Cambiar el color del botón [+ Nuevo tema] en el encabezado

Este botón del encabezado existe gracias al tema (+) botón de nuevo tema en todas las páginas

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

Cambiar el color del botón [+ Nuevo tema] en las páginas de categorías y etiquetas

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
1 me gusta
4

¿Minimizar? No estoy seguro de la traducción, lo siento. Intenta combinar esto:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

O

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

Veo que hay un id (new-create-topic), no sé qué tan único es. Intenta usar esto (no lo verifiqué).

En realidad, hay muchas opciones.

Usa:

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

Cualquier combinación de ellos…

2 Me gusta
5

Gracias por intentar ayudar a hacer el código más corto. Cuando probé varias combinaciones como las que sugeriste, esto es lo que obtenía… (fíjate en el signo más)

hoverstate

Por ahora, decidí simplemente mantener los dos fragmentos de código y ¡todo está perfecto! Gracias de nuevo @Stranik

1 me gusta
6

No configuramos el CSS para el icono al pasar el cursor:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

Quizás así. A veces es más fácil hacerlo localmente y ver. :slightly_smiling_face:

Puedes probar diferentes opciones sin problema y combinarlas. Hay un gran campo para la creatividad. ¡Buena suerte!

2 Me gusta
7

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