Come usare CSS per versatile-banner

Supporto
1

Vorrei cambiare il colore degli elementi Espandi e Chiudi nel banner. Presumo che ciò possa essere fatto con il CSS. Ma come si fa per il componente banner?

1 Mi Piace
2

Ecco come puoi fare:

  1. Apri lo Strumento di Ispezione:
    Naviga alla pagina web in cui è abilitato il banner versatile. Fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e seleziona “Ispeziona” (o premi Ctrl + Shift + I su Windows o Cmd + Option + I su Mac). Questo aprirà gli strumenti per sviluppatori del browser.

  2. Individua il Banner:
    Nella scheda Elementi degli strumenti per sviluppatori, passa il mouse sopra varie sezioni del codice per vedere le parti corrispondenti della pagina web evidenziate. Una volta trovato il banner, fai clic sul <div> più esterno che contiene il banner. Ciò garantisce che stai selezionando l’intero banner e tutti i suoi elementi.

  3. Esplora gli Elementi:
    Con il banner selezionato, ora puoi vedere tutti gli elementi HTML annidati all’interno della struttura del banner nella scheda Elementi. Questo ti mostra la gerarchia dell’HTML utilizzato per creare il banner.

  4. Ispeziona gli Stili:
    Sul lato destro degli strumenti per sviluppatori, troverai la scheda Stili. Questa visualizza gli stili CSS applicati all’elemento selezionato. Puoi visualizzare stili ereditati, stili inline e stili da fogli di stile esterni.

  5. Sperimenta con le Modifiche:
    Seleziona un elemento all’interno del banner e modifica i suoi stili direttamente nella scheda Stili. Ad esempio, puoi regolare colori, dimensioni dei caratteri, padding, margini o qualsiasi altra proprietà CSS. Queste modifiche sono temporanee e visibili immediatamente sulla pagina web, permettendoti di sperimentare liberamente.

  6. Finalizza il Design:
    Una volta soddisfatto delle modifiche al design, copia il codice CSS modificato. Questo può includere modifiche apportate a singoli elementi o all’intero banner.

  7. Applica le Modifiche:
    Vai su https://yoursite.com/admin/customize/components crea un componente e quindi nella sezione Modifica HTML/CSS incolla il codice CSS modificato. Assicurati di indirizzare la classe o l’ID del banner appropriato per garantire che gli stili vengano applicati correttamente e quindi applica quel componente al tuo tema.

  8. Salva e Rivedi:
    Salva il CSS aggiornato, aggiorna il tuo sito web e conferma che il banner rifletta le modifiche come previsto.

Puoi anche consultare: Come personalizzare il CSS in Discourse

3

@MihirR ottime istruzioni generiche, grazie mille.

Una lettura sembra indicare che Firefox abbia un editor di stili migliore di Chrome negli strumenti per sviluppatori web.

Ma per arrivare al caso specifico, sto avendo grandi difficoltà, perché i pulsanti Espandi e Chiudi cambiano colore al passaggio del mouse e sono sconfitto nel tentativo di trovare come impostare il colore di base. L’elemento sembra essere la classe span.d-button-label.

4

Ciao :wave:

Ecco un esempio su come cambiare il colore di quei pulsanti.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // cambia questo nel colore desiderato
      }
      // colore al passaggio del mouse e al focus
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // cambia questo nel colore desiderato
          }
        }
      }
    }
  }
}
4 Mi Piace
5

@Dan è SCSS o LESS? Sono fuori dal giro del CSS attuale. Discourse lo usa senza che io debba compilarlo?

1 Mi Piace
6

@Andro è SCSS :))

7

Quindi Discourse comprende nativamente SCCS?

1 Mi Piace
8

Sì, comprende nativamente SCSS.

2 Mi Piace
9

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