Custom search bar
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
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:
odmah iza njega napravit ćemo svoj default kod za custom search bar kao na našem forumu gore u vrhu lijevo...
zatim idite u CSS i nadodajte na kraj sljedeći kod:
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.
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
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu
|
|