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 dodatne sličice na banneru...
Izmjenite sljedeće:
- umjesto # stavite link do kojeg će vas voditi klik na sliku
- link_do_slike - tu postavite link do vaše slike
- Naziv slike - Prelaskom miša preko slike pokazivat će vam se tekst koji tu napišete (oba područja alt i title nazovite isto) ovaj dio nije obavezan
Spremite primjene i prebacujemo se na CSS...
2. CSS
ubacite sljedeći kod na kraj vašeg CSS-a:
Također vrijedi sve ono što sam rekao i u dodatnoj vertikalnoj navigaciji. Ako želite dodatne efekte poput hover efekta, vrlo lako ćete moći nadodati u vaš css, ako znate kako. Ako ne, predlažem da koristite samo ovo ponuđeno
Sve što trebate namjestiti je u naredbi position: absolute;, ispod top i margin-left. Povećavajte brojeve dok ne postavite sličice na željeno mjesto.
Tutorial by: MEX
[You must be registered and logged in to see this link.]
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 dodatne sličice na banneru...
- Kod:
<div id="banner-icons">
<ul class="clearfix">
<li><a href="#"><img src="link_do_slike" title="Naziv slike" alt="Naziv slike"></a></li>
<li><a href="#"><img src="link_do_slike" title="Naziv slike" alt="Naziv slike"></a></li>
<li><a href="#"><img src="link_do_slike" title="Naziv slike" alt="Naziv slike"></a></li>
</ul>
</div>
Izmjenite sljedeće:
- umjesto # stavite link do kojeg će vas voditi klik na sliku
- link_do_slike - tu postavite link do vaše slike
- Naziv slike - Prelaskom miša preko slike pokazivat će vam se tekst koji tu napišete (oba područja alt i title nazovite isto) ovaj dio nije obavezan
Spremite primjene i prebacujemo se na CSS...
2. CSS
ubacite sljedeći kod na kraj vašeg CSS-a:
- Kod:
#banner-icons {
padding: 0.5em 1.1em 0.6em 1.1em;
background-color: transparent;
border-color: none;
position: absolute;
top: 0px;
margin-left: 0px;
}
#banner-icons ul {
list-style: none;
text-align: right;
}
#banner-icons li {
display: inline;
font-weight: bold;
padding: 5px;
margin-right: 10px;
}
Također vrijedi sve ono što sam rekao i u dodatnoj vertikalnoj navigaciji. Ako želite dodatne efekte poput hover efekta, vrlo lako ćete moći nadodati u vaš css, ako znate kako. Ako ne, predlažem da koristite samo ovo ponuđeno
Sve što trebate namjestiti je u naredbi position: absolute;, ispod top i margin-left. Povećavajte brojeve dok ne postavite sličice na željeno mjesto.
Tutorial by: MEX
[You must be registered and logged in to see this link.]