Lupe statt «Suche» neben dem Suchfeld
Eingetragen von wrestler (216)am 27.05.2014 - 15:10 Uhr in
Hallo zusammen
Ich möchte ein Lupensymbol anstelle des Wortes «Suche» in meiner Suchform.
Wo kann ich das konfigurieren? Und wie?
Danke im Voraus
| Anhang | Größe |
|---|---|
| S0Co8GRCim528j0bEDXx5lu5SHFvYAFvzP8l30LhcSA.png | 6.06 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
Dazu brauchst Du ein kleines
am 27.05.2014 - 16:24 Uhr
Dazu brauchst Du ein kleines eigenes Modul, in dem Du den Button umbaust. Der .module-File benötigt eine passende Funktion z.B.
<?phpfunction MYMODUL_form_search_block_form_alter (&$form, &$form_state) {
$form['search_block_form']['#attributes']['title'] = t('Search');
$form['submit'] = array(
'#type' => 'image_button',
'#name' => 'go',
'#id' => 'go',
'#value' => t(' '),
'#src' => drupal_get_path('theme', 'MYTHEME') . '/images/icon15/lupe.png',
);
}
?>
Damit wird der Submit-Button zu einem Bild. Bei mir liegt das Bild im Image-Verzeichnis in meinem Theme.
Oder mit CSS. Mit nem
am 27.05.2014 - 21:32 Uhr
Oder mit CSS.
Mit nem Icon-Font geht das ganz gut.
Könnte z.B. so aussehen:
#suchbutton:after {
content: "";
font-family: fontello;
font-size: 17px !important;
}
#suchbutton {
-moz-appearance: none;
-moz-binding: none;
background-color: #0000FF;
border: 0 none;
border-radius: 10px;
color: #FFFFFF;
font-size: 0;
height: 33px;
margin-left: 0;
margin-right: 12px;
outline: 0 none;
padding: 6px;
width: 40px;
}
Sieht dann so aus:
Danke! CSS ist mir lieber, da
am 21.06.2014 - 14:36 Uhr
Danke! CSS ist mir lieber, da ich mit der anderen Variante überfordert bin.
Ich habs mal probiert mit folgendem CSS probiert:
INPUT#edit-submit--3 {
background: RED;
font-size: 17px !important;
font-family: FontAwesome;
content: "fa fa-search";
}
Funktioniert leider nicht. Was mache ich falsch?
Hier gehts zu meiner Seite
Auf den ersten Blck fällt mir
am 21.06.2014 - 14:59 Uhr
Auf den ersten Blck fällt mir nur auf, dass der Content so aussehen müsste:
content: "\f002";Versuchs doch mal ...
Ich habs mal
am 21.06.2014 - 15:08 Uhr
Ich habs mal geändert…
INPUT#edit-submit {background: RED;
font-size: 17px !important;
font-family: FontAwesome;
content: "\f002";
}
Geht leider immer noch nicht…
Teste mal folgendes: -
am 21.06.2014 - 15:36 Uhr
Teste mal folgendes:
- Übernimm den Code, den ich oben gepostet habe komplett (setze bei "content" die "\f002" ein). Ich habe eigentlich alles gepostet was du brauchst damit das funzt.
- Setzte auch wirklich die Pseudoklasse ":after" ein! Das funktioniert nur mit :before oder :after.
- Mach erstmal n Test in einer html-Datei, um den Icon-Font überhaupt ins laufen zu bringen. Danach kannst du es in Drupal einbauen ... das minimiert die Fehlerquellen.
- Ist der Icon-Font auch eingebunden? Sonst versuchs erstmal mit
conten:"xyz"; font-family: arial;Das scheint mir jetzt eher ein CSS/HTML-Problem zu sein, kein Drupal-Problem ... oder?
Jetzt bin ich ein schönes
am 22.06.2014 - 10:39 Uhr
Jetzt bin ich ein schönes Stück weiter, danke!
#block-search-form #edit-actions:after {
background: RED;
font-size: 2.5rem !important;
font-family: FontAwesome;
content: "\f002";
}
#block-search-form #edit-actions {
-moz-appearance: none;
-moz-binding: none;
background-color: #0000FF;
border: 0 none;
border-radius: 10px;
color: #FFFFFF;
font-size: 0;
height: 33px;
margin-left: 0;
margin-right: 12px;
outline: 0 none;
padding: 6px;
width: 40px;
}
Jetzt sollte nur noch das «Suchen»-Feld weg und die Lupe sollte zum Eingabefeld werden.
So siehts im Moment noch aus:
Schön dass es geklappt
am 22.06.2014 - 14:34 Uhr
Schön dass es geklappt hat!
Um das Suchen-Feld zu verstecken brauchst du wieder CSS.
Ganz grob so:
input.form-submit {background: transparent !important;
font-size: 0;
height: 0;
padding: 0 !important;
}
Funktioniert optisch perfekt,
am 23.06.2014 - 16:25 Uhr
Funktioniert optisch perfekt, danke!
Jetzt sollte die Lupe aber noch die Button-Funktion (also «Enter») haben. So ist sie «nur» ein Icon.
Diese Lösung habe ich bereits
am 23.06.2014 - 17:35 Uhr
Diese Lösung habe ich bereits in der ersten Antwort geliefert.
Da ich programmiertechnisch
am 23.06.2014 - 17:59 Uhr
Da ich programmiertechnisch nicht so beschlagen bin, weiss ich nicht, wie ich bei deiner Lösung vorgehen muss.
Könntest du mir das in wenigen Worten erläutern oder gibt es irgendwo eine Anleitung dafür?
Das ist alles mit CSS
am 23.06.2014 - 18:02 Uhr
Das ist alles mit CSS lösbar.
Mal ganz grob:
input.form-submit {
background: none repeat scroll 0 0 transparent !important;
font-size: 0;
height: 30px;
padding: 0 !important;
position: relative;
width: 30px !important;
z-index: 2;
}
#block-search-form #edit-actions:after {
content: "xyz";
font-family: FontAwesome;
font-size: 1.7rem !important;
left: -30px;
position: relative;
z-index: 1;
}
Habs grad mit Firebug auf deiner Seite getestet. Läuft ...
Perfekt! Vielen Dank! Jetzt
am 23.06.2014 - 18:16 Uhr
Perfekt! Vielen Dank!
Jetzt habe ich gemerkt, dass die Lupe bei Nodes nicht erscheint…
Zum Beispiel hier: http://web13.504.hosttech.eu/work/projektarbeit-facepainting
Ich habe es
am 24.06.2014 - 16:06 Uhr
Ich habe es hier:
http://www.berggenuss.de/
als Quick-and-Dirty-Lösung mit CSS so gemacht:
#block-multiblock-2 input.form-submit, #block-search-form input.form-submit {height: 22px;
width: 22px;
color: transparent;
background: url(/sites/all/themes/berggenuss_flat/images/lupe.jpg) no-repeat scroll 50% 50% transparent;
font-size: 1px;
}
D.h. die Schriftfarbe ist transparent, die Schriftgröße auf 1px gesetzt und die Lupe ein Hintergrundbild.
So bleibt die Funktion des Buttons erhalten.
Ich denke, das müßte man 1:1 auf andere Seiten übertragen können.
Vielleicht ist es ja eine Alternative, wenn die andere Lösung (die ich mir aus Zeitmangel jetzt nicht näher angesehen habe) auf manchen Seiten nicht funktioniert.