Cambia il pulsante "+ Nuovo Argomento" per abbinare lo stile del pulsante "Rispondi"

Supporto
1

Mi piace lo stile del pulsante “Rispondi”, che utilizza il colore “Terziario” definito in /admin/customize/colors (Sezione/Selezione delle palette colori)

image
image694×920 133 KB

Vorrei che il nostro pulsante “Nuovo argomento” avesse lo stesso stile del pulsante “Rispondi”, come illustrato in questo video:

2

Puoi provare a prendere il CSS del pulsante ‘Rispondi’ e trasferire queste proprietà al pulsante ‘Aggiungi post’:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Prova ad aggiungere questo:

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

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

Successivamente, devi aggiungere il CSS per :hover (passaggio del mouse sopra):


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

Seleziona i colori necessari in modo più preciso. Sostituisci *** con il colore desiderato.

Come aggiungere CSS a Discourse:

Puoi farlo con qualsiasi parte del CSS.

3

Risposta fantastica!!! Grazie mille!

Potrei aver bisogno di un altro consiglio CSS… come potrei minificare al meglio questi due pezzi di codice?:

Cambia il colore del pulsante [+ New Topic] nell’intestazione

Questo pulsante nell’intestazione esiste grazie a (+ New topic) button on all pages Theme

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

Cambia il colore del pulsante [+ New Topic] nelle pagine delle categorie e dei tag

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

Minimizzare? Non sono sicuro della traduzione, mi scuso. Provate a combinare questo:

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

Vedo che c’è un ID (new-create-topic), non so quanto sia unico. Provate a usare questo (non l’ho verificato).

In realtà ci sono molte opzioni.

Usate:

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

css
css868×120 14.7 KB

Qualsiasi combinazione di essi…

5

Grazie per aver cercato di aiutare a rendere il codice più breve. Quando ho provato diverse combinazioni come quelle che hai suggerito, questo è ciò che ottenevo… (nota il segno più)

hoverstate

Per ora ho deciso di mantenere i due frammenti di codice e tutto è perfetto!! Grazie ancora @Stranik

6

Non abbiamo impostato il CSS per l’icona al passaggio del mouse:

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

Forse è così. A volte è più facile farlo localmente e verificare. :slightly_smiling_face:

Puoi provare tranquillamente diverse opzioni e combinarle. C’è ampio spazio per la creatività. Buona fortuna!