ANLEITUNG: Pimp my Suchfeld

[Kawabiker]

Es geht einfach nur darum das Suchfeld etwas ansprechender gestalten zu können.

Der Button button_quick_find.gif soll das Suchfeld rechts sauber abschließen, das Suchfeld soll abgerundete Ecken bekommen

[ Für Gäste sind keine Dateianhänge sichtbar ]

template/source/boxes/search.php

Suche:

Code: PHP  [Auswählen]

... IMAGE_BUTTON_SEARCH, 'style="width:160px;" maxlength="30" ...

ändere in:

Code: PHP  [Auswählen]

... IMAGE_BUTTON_SEARCH, 'id="searchbox" maxlength="30" ...

Nun kann man nun das Design in der css frei konfigurieren.
Beispiel:

template/stylesheet.css

füge ein:

Code: PHP  [Auswählen]

#searchbox {
width:192px;
height:20px;
border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
}

Den Abstand zwischen dem Eingabefeld und dem Button bekommt man damit weg:

template/boxes/box_search.html

suche:

Code: PHP  [Auswählen]

<td valign="middle">{$INPUT_SEARCH}</td>
<td valign="middle">{$BUTTON_SUBMIT}</td>

ändere in:

Code: PHP  [Auswählen]

<td valign="middle" style="padding:0 0 0 3px;">{$INPUT_SEARCH}</td>
<td valign="middle" style="padding:0px;">{$BUTTON_SUBMIT}</td>

Nun noch den Button button_quick_find.gif ändern (oder aus der Anlage hier nehmen) und mit dem Button im Ordner template/buttons/SPRACHE/button_quick_find.gif austauschen.

Hier der Button:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Viel Spass damit 


Linkback: https://www.modified-shop.org/forum/index.php?topic=23045.0

[Matt]

Weil ich das grad sehe: Gibt es einen logischen Grund, das Feld auf eine Länge von 30 Zeichen zu begrenzen?

Und wenn man eh grad dran ist könnte man auch gleich noch

Code: XML  [Auswählen]

onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"'

ersetzen durch

Code: XML  [Auswählen]

placeholder="'.IMAGE_BUTTON_SEARCH.'"

Und den bisherigen

Code: [Auswählen]

IMAGE_BUTTON_SEARCH ersetzen durch

Code: [Auswählen]

''Stylen mit

Code: CSS  [Auswählen]

#searchbox::-webkit-input-placeholder {
    color: #555;
}

#searchbox:-moz-placeholder {
    color: #555;
}

#searchbox:-ms-input-placeholder {
    color: #555;
}

Und insgesamt das komplette Tabellenkonstrukt wegwerfen.

Halte #searchbox übrigens für die falsche Bezeichnung des Selectors.

[Simon]

Natürlich wäre es ohne Tabellen perfekter, aber das Ergebnis ist schön

     Kawabiker

[Matt]

Jeden Maurer würde man prügeln, wenn er die Wand mit Brettern hochzieht und dann eine Steinmauer draufmalt. Im Web ist das dann plötzlich ok. Wie sehr jemand seine Arbeit ernst nimmt sieht man halt vor allem an den Sachen, die man normalerweise nicht gleich zu Gesicht bekommt.

[Simon]

Ein bisschen Lob schadet nicht, sonst sehen wir künftig keine neuen Idee und Anleitungen mehr.
Man kann es dann ja selbst optimieren.
Mach es uns halt perfekt, Matt. Für dich als Experte ist das ne Sache auf zwei Minuten

 

[Donco]

Ich finds cool. Genau davon lebt diese Community.