CSS-Konflikte im Header

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// Anpassungen für das benutzerdefinierte Suchbanner
.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;
  }

Dies führt jedoch dazu, dass der Text der Suchleiste in die Hintergrundfarbe übergeht.

<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)]

Ich habe tatsächlich eine Problemumgehung gefunden, benötige aber Hilfe bei der Suche nach der Quelldatei.

Wenn ich also die Konsole verwende, um eine Header-Klasse zu erzwingen, wie unten gezeigt:

<h1>Willkommen in unserer Community</h1>

und dann das zugehörige CSS erstelle:

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

scheint alles zu funktionieren. Da ich nun die Problemumgehung gefunden habe, wie finde ich die notwendige Datei, um sie unter dem Div “ember14” zu bearbeiten, wo der Text “Willkommen in unserer Community” gerendert wird?

Gibt es eine bestimmte Datei, z. B. index.js?

(Ich wechsle von Flarum und bin neu auf dieser Plattform)
Danke

[Don]

Hallo,

Ich bin mir nicht sicher, ob ich das vollständig verstehe, aber Sie können h1 und p in der benutzerdefinierten Suche anvisieren, damit das Eingabefeld nicht beeinträchtigt wird.

Sie müssen die spezifische Quelldatei nicht ändern. In diesen Fällen können Sie eine neue Theme-Komponente erstellen, die den spezifischen Teil des CSS-Codes überschreibt. Wenn Sie ihn jedoch wirklich ändern möchten, müssen Sie die Theme-Komponente forken GitHub - discourse/discourse-search-banner und nach dem Fork können Sie die Template-Datei ändern.

Es gibt jedoch eine viel einfachere und wartungsfreundlichere Methode

Erstellen Sie eine neue Komponente.

1. Gehen Sie zu /admin/customize/themes/
   Anpassen → Themes
2. Klicken Sie auf die Registerkarte Komponenten und dann auf die Schaltfläche Installieren Install
3. Klicken Sie im Popup-Fenster auf die Schaltfläche Neu erstellen Create new und geben Sie den Namen der neuen Komponente ein.

4. Klicken Sie auf die Schaltfläche Erstellen Create.
5. Die Komponente wurde erstellt. Wählen Sie nun aus, auf welche Themes Sie sie anwenden möchten. Hier sollten Sie wahrscheinlich das Discourse Air-Theme auswählen.
   
   
6. Klicken Sie nun auf die Schaltfläche CSS/HTML bearbeiten Edit CSS/HTML.
   
   
7. Klicken Sie nun auf die Registerkarte Allgemein (Common) und fügen Sie den folgenden Code in den Abschnitt CSS ein.

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

Klicken Sie auf Speichern. Fertig!

Und vergessen Sie nicht, Ihren vorherigen Code zu entfernen

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

---

Vorher

Nachher

[chrispine1991 (Chocoboe Studios)]

Du bist ein Zauberer. Vielen Dank. Ich migriere von Flarum und es ist meiner Meinung nach eine steile Lernkurve.

Und danke für die Erinnerung, den vorherigen Code zu entfernen.