Helpmotion
Registrujte se na Helpmotion! Na forumu možete zatražiti bilo kakvu vrstu pomoći. Klikom na Register pridružićete nam se!


Niste konektovani. Konektujte se i registrujte se

Dodatne Sličice na banneru

Ići dole  Poruka [Strana 1 od 1]

1 Dodatne Sličice na banneru taj Pet Mar 04, 2011 11:29 pm

Escape

avatar
Administrator
Administrator
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 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.]

Pogledaj profil korisnika

Nazad na vrh  Poruka [Strana 1 od 1]

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