Conflitti CSS nell'intestazione

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// personalizzazioni del banner di ricerca personalizzato
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: #f9f9f9;
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
  h1 {
    font-size: 4em;
  }

Ma questo fa sì che il testo della barra di ricerca si fonda con il colore di sfondo.

<div> id="ember16" class="ember-view"><!----><div class="search-widget"><div class="search-menu" data-mouse-down-outside="true"><button class="widget-button btn search-icon no-text btn-icon"><svg class="fa d-icon d-icon-search svg-icon svg-node" aria-hidden="true"><use xlink:href="#search"></use></svg></button><div class="search-input"><input id="search-term" type="text" value="" autocomplete="off" placeholder="Search" aria-label="Search"><div class="searching"><a class="widget-link show-advanced-search" href="/search?expanded=true" title="Apri ricerca avanzata"><svg class="fa d-icon d-icon-sliders-h svg-icon svg-node" aria-hidden="true"><use xlink:href="#sliders-h"></use></svg></a></div></div></div></div></div>

[chrispine1991 (Chocoboe Studios)]

Ho trovato una soluzione alternativa, ma ho bisogno di aiuto per localizzare il file sorgente.

Quindi, se uso la console per forzare una classe di intestazione come mostrato di seguito:

<h1>Benvenuti nella nostra community</h1>

e poi creo il CSS associato:

.main-title-text {
    background: -webkit-gradient(linear, left center, right bottom, from(#484848), to(#0097ff), to(#ffffff));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

tutto sembra funzionare. Ora che ho trovato la soluzione alternativa, come faccio a trovare il file necessario da modificare sotto la div “ember14” dove viene visualizzato il testo “Benvenuti nella community”?

C’è un file specifico, ad esempio index.js?

(Sto migrando da Flarum e sono nuovo su questa piattaforma)
Grazie

[Don]

Ciao,

Non sono sicuro di aver capito appieno, ma puoi puntare a h1 e p nella ricerca personalizzata in modo che non influiscano sul campo di input.

Non è necessario modificare il file sorgente specifico. In questi casi, puoi creare un nuovo componente del tema che sovrascriverà la parte specifica del codice CSS. Ma se vuoi davvero modificarlo, allora devi fare un fork del componente del tema GitHub - discourse/discourse-search-banner e dopo aver fatto il fork puoi modificare il file del template.

Ma c’è un metodo molto più semplice e manutenibile:

Crea un nuovo componente.

1. Vai su /admin/customize/themes/
   Personalizza → Temi
2. Fai clic sulla scheda Componenti e quindi sul pulsante Installa Install
3. Nella finestra popup fai clic sul pulsante Crea nuovo Create new e digita il nome del nuovo componente.

4. Fai clic sul pulsante Crea Create.
5. Il componente è stato creato. Ora seleziona quale tema/i vuoi attivarlo. Qui presumo che dovresti selezionare il tema Discourse Air.
   
   
6. Ora fai clic sul pulsante Modifica CSS/HTML Edit CSS/HTML.
   
   
7. Ora fai clic sulla scheda Comune e incolla il codice seguente nella sezione CSS.

.custom-search-banner-wrap {
  h1, p {
    background: -webkit-gradient(linear, right top, left bottom, from(#eaf0ff), to(#0932a5), to(#060064));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Fai clic su Salva. Fatto!

E non dimenticare di rimuovere il tuo codice precedente

.custom-search-banner-wrap {
  // rimuovi questa parte perché la aggiungiamo a h1 e p
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
}

---

Prima

Dopo

[chrispine1991 (Chocoboe Studios)]

Sei un mago. Grazie mille. Sto migrando da Flarum e la curva di apprendimento è ripida, secondo me.

E grazie per il promemoria di rimuovere il codice precedente.