Conflits CSS dans l'en-tête

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// custom search banner customizations
.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;
  }

Mais cela fait que le texte de la barre de recherche se fond dans la couleur d’arrière-plan.

<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="Open advanced search"><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)]

J’ai en fait trouvé une solution de contournement, mais j’ai besoin d’aide pour localiser le fichier source.

Donc, si j’utilise la console pour forcer une classe d’en-tête comme vu ci-dessous :

<h1>Bienvenue dans notre communauté</h1>

et que je crée ensuite le CSS associé :

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

tout semble fonctionner. Maintenant que j’ai trouvé la solution de contournement, comment trouver le fichier nécessaire à modifier sous la div « ember14 » où le texte « Bienvenue dans notre communauté » est rendu ?

Existe-t-il un fichier spécifique, par exemple index.js ?

(Je migre depuis Flarum et je suis nouveau sur cette plateforme)
Merci

[Don]

Bonjour,

Je ne suis pas sûr de bien comprendre, mais vous pouvez cibler h1 et p dans la recherche personnalisée afin que cela n’affecte pas le champ de saisie.

Vous n’avez pas besoin de modifier le fichier source spécifique. Dans ces cas, vous pouvez créer un nouveau composant de thème qui remplacera la partie spécifique du code CSS. Mais si vous voulez vraiment le modifier, vous devrez forker le composant de thème GitHub - discourse/discourse-search-banner et après le fork, vous pourrez modifier le fichier de modèle.

Mais il existe une méthode beaucoup plus simple et maintenable

Créez un nouveau composant.

1. Allez sur /admin/customize/themes/
   Personnaliser → Thèmes
2. Cliquez sur l’onglet Composants puis sur le bouton Installer
3. Dans la fenêtre contextuelle, cliquez sur le bouton Créer un nouveau et tapez le nom du nouveau composant.

4. Cliquez sur le bouton Créer.
5. Le composant est créé. Sélectionnez maintenant le(s) thème(s) sur lequel/lesquels vous souhaitez l’activer. Ici, je suppose que vous devriez sélectionner le thème Discourse Air.
   
   
6. Cliquez maintenant sur le bouton Modifier CSS/HTML.
   
   
7. Cliquez maintenant sur l’onglet Commun et collez le code ci-dessous dans la section 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;
  }
}

Cliquez sur Enregistrer. Terminé !

Et n’oubliez pas de supprimer votre code précédent

.custom-search-banner-wrap {
  // remove this part because we add this to the h1 and p
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
}

---

Avant

Après

[chrispine1991 (Chocoboe Studios)]

Vous êtes un sorcier. Merci beaucoup. Je fais une migration depuis Flarum et la courbe d’apprentissage est raide, à mon avis.

Et merci pour le rappel de supprimer le code précédent.