Das Suchformular stylen
Autor: Alex
Im Artikel Wie richtet man die Suche mit TXP eigenen Tags ein wurde erklärt wie man in Textpattern generell die Suchfunktion einbaut. Häufig kommt auch die Frage vor, wie man das Suchformular browserübergreifend einheitlich styled. Hier die schnelle Antwort:
In TXP kann man ein Suchformular mit dem Tag txp:search_input ausgeben. Der Nachteil ist, dass sich das Inputfeld und der Button nur minimal stylen lassen. Das kann man aber individualisieren, in dem man das Suchformular selbst erstellt. Wie in X/HTML üblich fängt man mit dem form Element an und setzt dahinein das Inputfeld und den Button:
<form id="searchform" action="/search/" method="get">
<div>
<input type="text" name="q" value="" size="15"
class='formSuche' />
<button type="submit" value="Suche" id="submit">
Suche</button>
</div>
</form>
Im obigen Beispiel hat das Inputfeld eine CSS class namens formSuche, die man nun stylen kann. Man kann statt einer Klasse auch eine ID vergeben. Der Button hat die ID submit, die sich ebenfalls nach belieben stylen läßt.
Statt ein button Element zu nehmen, kann man auch ein Input Element für den Button mit ID und/oder class verwenden:
<input type="submit" value="Suche" id="submit"
class="button" />
CSS Id´s bzw. class können nun Hintergrundbild, Schriftangaben, width etc. dem Button bzw. Eingabefeld zuweisen.
Das selbst erstellte Suchformular packt man am Besten in einen Baustein und setzt diesen mit einem output_form in die Seitenvorlage ein. Das ist zwar nicht zwingend nötig, aber einfach eleganter und übersichtlicher.
Anmerkung
Mehr zu X/HTML Formularen findet man auf selfhtml.
Fragen & Antworten // Suche
| 31.03.06 |Weitere neue Artikel
Neue TXP Sites
- Unable to connect to del.icio.us