Pole pro vyhledávání na stránkách, ať prostřednictvím Google, Atomz, nebo jiné služby, se zpravidla umisťuje do sidebaru. Druhá možnost je jeho umístění přímo do obsahu (hlavního kontajneru) stránky, nebo vytvořit stránku pomocí pluginu RapidSearch, což je z hlediska umístění vlastně totéž. Provedení témat, která RapidWeaver používá, není uzpůsobeno na to, aby bylo možné přímo vkládat části kódu například do záhaví nebo do menu, ale pokud byste chtěli mít vyhledávací pole umístěno právě zde, lze si pomoci jinak.

Nejdřív je nutné “obalit” kód vašeho stávajícího pole tagy <div>. Tím vznikne tzv. plovoucí objekt se specifickým názvem searchBar:

<div id="searchBar">tento text nahraďte kódem vašeho pole</div>

Pokud jste dosud vyhledávací pole na stránkách neměli, zkopírujte si celý tento blok s políčkem ve stylu OS X a vložte do sidebaru (v HTML módu):

<div id="searchBar"><form method="get" action="http://www.google.com/search">
<input type="search" name="query" value="Hledat" autosave="search" results="10"
onblur="if (this.value =='') {this.value ='Hledat';}"
onfocus="if (this.value =='Hledat') {this.value ='';}" />
<input type="hidden" name="domains" value="MojeStránky.cz" />
<input type="hidden" name="sitesearch" value="http://www.moje_stranky.cz/" />
</form></div>

Nyní již pouze vložte následující úpravu CSS kódu do paletky Page Inspector / Header / CSS:

#searchBar {
position:relative;
top:50px;
left:100px;
z-index:9999;
}

Hodnoty “top” a “left” určují změnu vodorovného a svislého umístění oproti původní pozici daného objektu. Tyto hodnoty je nutné upravit podle vašich přestav. Rozmezí, v jakém lze vyhledávací pole přesouvat, závisí na použitém tématu, lze ale použít i záporné hodnoty. Z-index definuje vrstvení objektů - hodnota 9999 by měla stačit k tomu, aby pole bylo vždy opravdu zcela nahoře.





Pokud chcete sidebar skrýt, nebo pokud vaše téma sidebar vůbec neobsahuje, můžete vložit celý blok kódu vyhledávacího formuláře ohraničeného tagy <div> přímo do souboru Index.html:

1. otevřete záložku Themes (Alt+Command+T)
2. pokud používáte originál tématu, klikněte na své téma pravým tlačítkem myši a zvolte Duplicate Theme a dejte mu nový název
3. znovu klikněte na nově vytvořené téma pravým tlačítkem myši a zvolte Reveal Theme Contents in Finder...
4. ve Finderu se otevře okno "Contents" a v něm otevřete soubor "index.html" (například pomocí aplikace Smultron)
5. vložte zkopírovaný kód vyhledávacího pole do horní části, například za <div id="menu">

Dále použijte úpravu CSS kódu, stejně jako je uvedeno výše.

tag: blog, layout, vyhledávání, CSS, pozice