Custom Search Bar

Princip je zapravo gotovo isti kao kod pravljenja dodatne horizontalne navigacije. Koristimo ista dva područja:

1. Overall_header_new template
2. CSS

Da bi mogli raditi s templatesima potrebno je da koristite Phpbb2 verziju ili PunBB verziju.
Počnimo sa templatesom... Uđite u overall_header_new templates i pronađite ovaj kod:

Kod:

<a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

odmah iza njega napravit ćemo svoj default kod za custom search bar kao na našem forumu gore u vrhu lijevo...

Kod:

<div id="search_box">
      <form action="/search.forum" method="get">
         <input type="text" class="inputbox medium" name="search_keywords"  size="24" onfocus="this.value=''" value="Pretraži forum..." style="border: 0px; width: 172px; height: 27px; background-color: transparent;" /><input type="submit" id="searchbutton" value="" title="Pretraga" />{JS_SESSION_ID_INPUT}
      </form>
</div>

zatim idite u CSS i nadodajte na kraj sljedeći kod:

Kod:


#search_box {
width: 199px;
height: 27px;
background: url(http://i44.tinypic.com/ojqzco.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0px;
margin-left: 0px;
}

#searchbutton {
background-image: url(http://i42.tinypic.com/n3vqde.jpg);
width: 27px;
height: 27px;
border:0px;
background-color: transparent;
}
#searchbutton:hover {
background-image: url(http://i41.tinypic.com/4gltmo.jpg);
}


Izmjenite broj u top: 0px; dok ne namjestite search bar na željeno mjesto na forumu. Ukoliko ga želite pomicati lijevo ili desno koristite još ispod top, margin-left ili margin-right.

Tutorial by: MEX
www.tutorial.forum.st

Demo: http://tutorial.forum.st/