Sucheingabefeld ändern

  • hallo,
    ich würde gerne in meinem Blog das Suchfeld modifizieren. Zurzeit liegen Suchfeld und Button in zwei Zeilen, was ich nicht so schön finde. Wie kann ich dem Suchfeld sagen, dass es kürzer sein soll, damit der Button noch in die gleiche Zeile passt?

    Kann ich den Button auch gegen einen grafisches Element austauschen? Ich bin kein PHP-Profi deswegen wage ich mich nicht blind an den Code ran. :(

    Mein Code der searchform.php sieht im Moment so aus:

    PHP
    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    <div><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Suche" />
    </div>
    </form>
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Entweder im HTML:

    PHP
    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" [COLOR="Red"][B]width="20"[/B][/COLOR] />

    oder im CSS:

    Code
    #searchform #s {
    width:10em;
    }

    Mit den Werten musst du experimentieren. ;-)

  • ah, super. habe folgende codezeilen im CSs gefunden:
    [code}
    #sidebar #searchform #s {
    padding: 2px;
    width: 80px;
    }

    #sidebar #searchsubmit {
    padding: 1px;
    }
    [/code]

    mit der Pixelangabe kann ich jetzt zwar das Eingabefeld verkürzen, aber der Submit-Button mag nicht dahinterrutschen sondern bleibt immer in der nächsten Weile?!?!
    Was muss ich dafür tun?

    ausserdem:
    Wie könnte ich die Eingabezeile vorbeschreiben (zB) mit dem Wort "Suche", das bei Klick in die Zeile verschwindet, so dass ich auf dem Submit-Button "nur" noch beispielsweise "Go" stehen habe und den Button entsprechend klein gestalten (wo? - auch im CSS?) kann. Oder ist das dann doch ein klein wenig zu komplex um es einem DAU über das Forum zu erklären? :(

  • mit der Pixelangabe kann ich jetzt zwar das Eingabefeld verkürzen, aber der Submit-Button mag nicht dahinterrutschen sondern bleibt immer in der nächsten Weile?!?!
    Was muss ich dafür tun?

    Code
    <div>
      <input type="text" size="15" id="s" name="s"/>[COLOR="Red"][B]<br/>[/B][/COLOR]
      <input type="submit" value="[COLOR="DarkOrange"][B]Suchen[/B][/COLOR]"/>
    </div>


    Das <br/> muss noch raus, wahrscheinlich in der sidebar.php.

    Hier kannst du auch den Buttontext ändern (orange).


    Zitat

    ausserdem:
    Wie könnte ich die Eingabezeile vorbeschreiben (zB) mit dem Wort "Suche", das bei Klick in die Zeile verschwindet, so dass ich auf dem Submit-Button "nur" noch beispielsweise "Go" stehen habe und den Button entsprechend klein gestalten (wo? - auch im CSS?) kann. Oder ist das dann doch ein klein wenig zu komplex um es einem DAU über das Forum zu erklären? :(


    Vorschreiben kannst du im value-Attribut, z.B. so:

    Code
    <input id="s" type="text" size="15" name="s" [COLOR="Blue"][B]value="Suche"[/B][/COLOR] />

    Löschen geht mit Javascript, mit dem onclick-Eventhandler:

    Code
    <input id="s" type="text" size="15" name="s" value="Suchen" [COLOR="purple"][B]onclick="if (this.value == 'Suchen' ) this.value = '';"[/B][/COLOR]/>


    (ungetestet, aber so in der Art ;-))

  • super, danke für die antwort!
    so gaanz langsam verstehe ich, wo ich nach was suchen muss - leider nur langsam, denn die von dir angegeben zeilen, um das <br> tag zun entfernen, finde ich nicht in meiner sidebar.php.

    gehe ich richtig in der annahme, dass das damit zu tun haben könnte,d ass ich das "sidebar widget" verwende? dort gibt es zwar einen baustein "suchen" - bei dem ich allerdings "nur" die rangfolge per drag and drop ändern kann, nicht jedoch das layout etc. über den reitereintrag "theme editor" komme ich nicht an das php meiner spalte. ich schätze, ich überschreibe mit dem sidebar widget meine sidebar.php, oder?

    (ach, wäre ich doch schlau - bräuchte ich nicht alles so haarklein erfragen) :(

    zum klick-event im textfeld:
    wo würde ich den das javascript einfügen? im hauptindex-template? oder eher auch im sidebar.php? (nutze übrigens das wordpress-standard theme in deutsch) --> unschwer an meinem layout zu erkennen.

    daaaanke bis hierhin schonmal

  • Mit Widgets kenn ich mich nicht aus, sorry. ;-) Ich glaube da musst du die widgets.php im wp-includes-Ordner verändern...

    Falls du nicht unbedingt auf Widgets angewiesen bist und dich traust die Änderungen im Sidebar-Code selbst vorzunehmen, dann kannst du die Widgets auch abschalten.

  • Tja, diese Widgets... Sorry, da kann ich dir leider auch nicht helfen.

    Aber zu deiner anderen Frage;

    Zitat

    zum klick-event im textfeld:
    wo würde ich den das javascript einfügen? im hauptindex-template? oder eher auch im sidebar.php? (nutze übrigens das wordpress-standard theme in deutsch)



    Das könnte dann so aussehen:

    Code
    <input type="text" size="15" value="Suchbegriff..." onblur="if(this.value=='') this.value='Suchbegriff...';" onfocus="if(this.value=='Suchbegriff...') this.value='';" name="s" id="s" />


    Einfach in der Sidebar (oder wo immer sich auch das Suchfeld befindet) gegen den vorhandenen Code austauschen.
    Sieht dann etwa so aus, oder mal nicht inna BlogWare... :)
    Aber wie gesagt, bei den Widgets... :|

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!