Personaliza el botón de Nuevo Tema

Wiki de la comunidad Desarrolladores
1

Hola,

Solo quiero compartir con ustedes cómo creé nuestro nuevo botón de tema. Un poco de CSS :slight_smile:

Utilizo variables de color para esto (tertiary, secondary y primary-medium).

Botón Nuevo Tema

new-topic

Botón Abrir Borrador

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

¡Que tengan un buen día! :slight_smile:

10 Me gusta
Developer Index
2021: The Year in Review
2

antes

image
image303×115 2.82 KB

después
image
image294×106 2.54 KB

no ha cambiado nada :no_good_man:

3

@valsha Solo estoy adivinando, pero quizás sea porque ese truco de CSS está cambiando el efecto al pasar el ratón (hover) y tú no estás pasando el ratón por encima.

En general, y la mayoría de ustedes lo saben, cambiar el efecto hover (y muchas otras cosas) solo se muestra en sistemas que usan ratón. No en móviles, porque allí el usuario solo toca un botón :wink:

2 Me gusta
4

Me gusta cómo queda ese botón. ¿Cómo lo hiciste?

Y esto está totalmente fuera de tema… ¿qué herramienta estás usando para grabar o convertir esos GIFs?

(Vaya… ¿apreté el botón de respuesta equivocado? Así que: @Don)

2 Me gusta
5

Hola,

Parece que se trata del Tema Drácula. He revisado el código fuente.

Debes agregar button antes de #create-topic para sobrescribirlo.

Así que debería comenzar así :arrow_down:

button#create-topic {

Si deseas mantener el color verde success, deberás cambiar var(--tertiary) por var(--success). Así :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 Me gusta
6

Sí, este botón es del Tema Drácula.
@Don, como siempre, eres el salvador :+1:

2 Me gusta
7

¡Y señoras y señores, eso fue una demostración de lo que sucede cuando alguien no piensa un poco en lo que está haciendo (siempre es él…). En este caso, etiquetar a una persona incorrectamente y cuestionar en el lugar equivocado puede resultar confuso. Gracias a Dios que esto es solo un tema de CSS/tema, no la paz mundial, el 42 o algo importante :rofl:

En realidad, me estaba preguntando por el botón de @Don. Pero seguro, ese verde neón también está bien :+1:

2 Me gusta
8

¿Cómo estás cambiando el texto de “New Topic” a “Create a new Topic”? @Don

9

Hola,

Visita /admin/customize/site_texts, busca el texto y modifícalo. :slightly_smiling_face:

10

¿Es posible hacerlo desde el propio tema?

11

La forma de hacerlo mediante un tema es agregar un script que modifique el objeto I18n.translations.

2 Me gusta
13

Ahora existe un componente temático que te permite personalizar fácilmente el texto, el icono y otros comportamientos relacionados del botón:

No permite cambiar el estilo del botón, pero creo que eso podría añadirse potencialmente.

2 Me gusta