Design 4 U // Dizajn forum - Veb i grafički dizajn
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Custom search bar

Ići dole

Custom search bar Empty Custom search bar

Počalji od MRKO Pet Dec 10, 2010 6:53 am

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
MRKO
MRKO
Administrator
Administrator

Broj poruka Broj poruka : 3710
D4U Novac D4U Novac : 5149
Reputacija Reputacija : 40
Godina Godina : 26
Lokacija Lokacija : drowned world
Custom search bar War1

http://www.design4-u.net

Nazad na vrh Ići dole

Nazad na vrh

- Similar topics

 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu