Personalizza il pulsante Nuovo Argomento

Wiki della community Sviluppatori
1

Ciao,

Voglio solo condividere con voi come ho creato il nostro nuovo pulsante per i nuovi argomenti. Un po’ di CSS :slight_smile:

Per questo utilizzo le variabili dei colori (tertiary, secondary e primary-medium).

Pulsante Nuovo Argomento

new-topic

Pulsante Apri Bozza

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);
      }
    }
  }
}

Buona giornata! :slight_smile:

10 Mi Piace
Developer Index
2021: The Year in Review
2

prima

image
image303×115 2.82 KB

dopo
image
image294×106 2.54 KB

non è cambiato nulla :no_good_man:

3

@valsha Sto solo ipotizzando, ma forse è perché quel trucco CSS sta cambiando l’effetto hover e tu non stai passando il mouse sopra?

In generale, e la maggior parte di voi lo sa, ma cambiare l’effetto hover (e molte altre cose) si vede solo sui sistemi che usano il mouse. Non sui dispositivi mobili, perché lì l’utente tocca semplicemente un pulsante :wink:

2 Mi Piace
4

Mi piace l’aspetto di quel pulsante. Come hai fatto?

E questo è completamente fuori tema… quale strumento stai usando per registrare/convertire quelle gif?

(Dannazione… ho premuto il pulsante di risposta sbagliato? Quindi: @Don )

2 Mi Piace
5

Ciao,

Sembra che questo sia il Tema Dracula. Ho controllato il codice sorgente.

Devi aggiungere button prima di #create-topic per sovrascriverlo.

Quindi dovrebbe iniziare così :arrow_down:

button#create-topic {

Se vuoi mantenere il colore verde success, dovresti cambiare var(--tertiary) in var(--success). Come in questo esempio :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 Mi Piace
6

Sì, questo pulsante proviene da Dracula Theme.
@Don, come sempre, sei il salvatore :+1:

2 Mi Piace
7

E ora, signore e signori, ecco una dimostrazione di cosa succede quando qualcuno non riflette un po’ su ciò che sta facendo (è sempre un lui…). Questa volta, taggare una persona in modo errato e porre domande nel posto sbagliato può creare confusione. Per fortuna si tratta solo di un argomento relativo a CSS/temi, non della pace nel mondo, del numero 42 o di qualcosa di altrettanto importante :rofl:

In realtà mi chiedevo della @Don’s button. Ma certo, anche quel verde neon è carino :+1:

2 Mi Piace
8

Come stai modificando il testo da ‘Nuovo argomento’ a ‘Crea un nuovo argomento’? @Don

9

Ciao,

Vai su /admin/customize/site_texts, cerca il testo e modificalo. :slightly_smiling_face:

10

È possibile farlo direttamente dal tema stesso?

11

Il modo per farlo tramite il tema è aggiungere uno script che modifica l’oggetto I18n.translations.

2 Mi Piace
13

Esiste un componente tema che ti consente di personalizzare facilmente testo, icone e altri comportamenti correlati dei pulsanti:

Non consente di modificare lo stile del pulsante, ma penso che in futuro potrebbe essere aggiunto.

2 Mi Piace