Wie erstelle ich eine benutzerdefinierte Suchleiste?

Ich versuche bereits seit einiger Zeit, eine benutzerdefinierte Suchleiste zu erstellen, die dem Plugin discourse-search-banner ähnelt. Ich möchte dieses Plugin jedoch nicht verwenden, da es das Erscheinungsbild meines Themes beeinträchtigt.

Wie kann ich diese Funktionalität auf ein <input type="text" /> meiner Wahl übertragen?

Ich habe mir den Quellcode des Plugins angesehen und versucht, ihn so anzupassen, dass er nur mein HTML-Element verwendet, bin jedoch nicht fündig geworden. Jegliche Tipps wären sehr willkommen!

2 „Gefällt mir“

Würdest du das Plugin hier verlinken? Ich kann es nicht finden. Vielleicht solltest du auch den Ersteller des Plugins markieren; er könnte einige Ideen haben.

2 „Gefällt mir“

Meinst du diese #theme-component?

2 „Gefällt mir“

Genau! Entschuldigung, mein Fehler, dass ich den Link nicht eingefügt habe. Ich werde das noch nachholen.

1 „Gefällt mir“

Kein Problem, aber das ist ein Theme-Komponente und kein Plugin, daher ändert sich einiges. Vor allem, weil Theme-Komponenten mit Client-seitiger Logik arbeiten und Plugins mit Server-seitiger Logik. Oder möchtest du ein Plugin basierend auf dieser Theme-Komponente erstellen?

2 „Gefällt mir“

Entschuldigung für die späte Antwort.

Es ist mir eigentlich egal, ob es als Plugin oder als Theme-Komponente umgesetzt wird, solange ich die gewünschte Funktionalität erreiche. Im Wesentlichen brauche ich die Möglichkeit, das Verhalten der Standardsuche (Symbol in der oberen Leiste) auf ein Texteingabefeld meiner Wahl zu spiegeln.

Wie gehe ich dabei vor?

Viele Probleme lassen sich per CSS lösen.

Was hindert dich daran, einfach die CSS-Dateien zu inspizieren und anzupassen? Das wäre mit Abstand die schnellere Lösung.

Im schlimmsten Fall: Fork das TC und bearbeite dein CSS.

1 „Gefällt mir“

Es liegt nicht wirklich am CSS, sondern eher an der Platzierung und daran, wie es in meine HTML-Struktur passt. Wenn ich herausfinde, wie ich den Ort ändern kann, an dem die Komponente eingefügt wird, habe ich vielleicht eine Lösung. Könntest du mir eine Richtung weisen?

Wenn die Theme-Komponente auf Ihrer Website aktiviert ist, überprüfen Sie den Code mit Ihrem Browser und sehen Sie, wo er platziert ist. Passen Sie ihn dort im Browser an, um einen angenehmeren Ort zu finden, und nutzen Sie diesen, um einen Fork des TC zu aktualisieren/bearbeiten. Das sollte funktionieren.

Es gibt auch ein fertiges Theme für den Header:

Wenn keines davon passt und CSS-Änderungen nicht ausreichen, musst du in den Widget-Code einsteigen :).

1 „Gefällt mir“

Ein Beitrag wurde in ein neues Thema aufgeteilt: Wo finde ich die Suchleiste in unseren Einstellungen?