Google Search in HTML Suchleiste einbinden

D1Ck3n · 29. Juli 2015

Hallo zusammen,

ich habe im Internet eine nette Suchleiste für die eigene Homepage gefunden, aber leider kapiere ich nicht so ganz wie ich dort z.B. Google Search oder eine lokale Suche einbinde.

Code

<div class="container">
    <div class="row">
        <h2>Stylish Search Box</h2>
           <div id="custom-search-input">
                            <div class="input-group col-md-12">
                                <input type="text" class="  search-query form-control" placeholder="Search" />
                                <span class="input-group-btn">
                                    <button class="btn btn-danger" type="button">
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                            </div>
                        </div>
    </div>
</div>

Alles anzeigen

Hier her habe ich den Code: http://bootsnipp.com/snippets/featured/stylish-search-box

Wäre cool, wenn mir das einer erklären könnte.

Gruß
D1Ck3n

Re:Later · 29. Juli 2015

Die Joomla-Suchleiste kannst du in Joomla via Joomla-Template-Override für Module oder der Komponente erreichen, je nachdem wo du sie ändern willst
Was sind Overrides und wie erstellt man diese

Viel einfacher ist es, meistens zumindest, die bestehende Joomla-eigenen Suchfelder per CSS nach seinen Wünschen zu stylen.

Bei der Google-Suchleiste für die eigene Webseite musst du dich im Google-Account für einen Stil entscheiden. Man kann diese Stile nur in geringem Maße per CSS umstylen.

https://cse.google.com/cse/?hl=de

Frage ist auch, ob deine Seite (also das Template) Bootstrap 3 verwendet oder Bootstrap 2 (derzeit in Joomla selbst in verwendung). Dein gepostetes Gerüst ist Bootstrap 3.

D1Ck3n · 30. Juli 2015

Ich werde mir das mal anschauen, danke für die Hinweise!

Ich verwende Bootstrap 3.

D1Ck3n · 30. Juli 2015

http://meinetolleseite.16mb.com/

Ich habe die Suche mal in ein Modul verpackt, was auch ganz gut geht, aber ich würde die Suchleiste gerne verkleinern bzw. einen maximalen Wert vorgeben. Leider finde ich die dazugehörigen Parameter nicht

Re:Later · 30. Juli 2015

Die Modulposition ist scheint's eh unünstig gewählt, da der Bereich auf Mobilgeräten (unter 768Pixel) verschwindet.

Kannst probieren im Modul einen Modulklassensuffix

Code

col-md-3

einzutragen. Einleitendes Leerzeichen nicht vergessen. Ist aber nicht ganz sauber. Musst ausprobieren bei kleineren Bildschirmbreiten.

Oder in deiner CSS-Datei nachtragen

Code

#custom-search-input{
 width:250px;
}

Oder wahlweise ein max-width.

Re:Later · 30. Juli 2015

Und das Suchfeld wir auch nicht funktionieren, da das FORM-Element drumrum fehlt, dass Joomla erst veranlasst, loszulegen.

D1Ck3n · 31. Juli 2015

Mit der Custom CSS hat das super geklappt, danke!

Ich wollte ja erst mal die Form und Ausrichtung der Leiste verändern bevor die Funktion kommen soll. Ich bin mir auch nicht so ganz sicher, wo/wie ich das FORM-Element einbinden muss.

Indigo66 · 31. Juli 2015

Eigentlich geht man auch den umgekehrten Weg. Erst lässt man von Joomla oder Google das Formular generieren und danach erst wird die CSS entsprechen angepasst oder ein Override geschrieben.

Re:Later · 31. Juli 2015

Der normale Weg ist der:
1) Einrichten eines Joomlamoduls vom Typ Suchen an der Position, wo du im Moment dein Modul Eigene Inhalte hast.
2) Erstellen eines Joomla-Template-Overrides für Module im Ordner /templates/DEINTEMPLATE/html/mod_search/, was auch im Backend im Template-Editor zu bewerkstelligen ist.
3) In diese Datei fügst du dann dein Suchfeldgerüst ein. Die bringt das umgebende FORM-Gerüst und mehr mit.

Alles andere macht wenig Sinn und ist unterm Strich der kompliziertere Weg. Mit der /modules/mod_search/tmpl/default.php (das ist die, für du den Override in deinem Templateordner erstellen musst), musst du dich eh beschäftigen, wenn du auch nur minimale Chancen haben willst, das auf deinem Wege hinzubekommen. Kannst auch gleich den empfohlenen Weg einschlagen.

Oder, wie oben schon gesagt, das Joomla-Suchen-Modul wie es ist nehmen und dieses dann per CSS hinstylen, dass es so aussieht, wie deines.