Dobrodošao na forum o dizajnu... Uloguj se i uživaj

You are not connected. Please login or register

Dodatne sličice na headeru(by MEX)

Vidi prethodnu temu Vidi sljedeću temu Go down  Poruka [Stranica 1/1]

1 Dodatne sličice na headeru(by MEX) on Wed Jun 23, 2010 4:42 pm

Djoxy

avatar
Admin
Admin
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;
    }
#banner-icons li:hover {
opacity: 0.6;
  }
   

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 Very Happy

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
www.tutorial.forum.st



http://garageofdesign.nstars.org

2 Re: Dodatne sličice na headeru(by MEX) on Tue Jul 20, 2010 2:04 pm

Lolcic

avatar
Siromah
Siromah
Supp je i od koristi...Very Happy

3 Re: Dodatne sličice na headeru(by MEX) on Sun Aug 15, 2010 6:14 pm

{кєℓℓαη'ѕ gιяℓ}*

avatar
Siromah
Siromah
Bas je dobro.. Very Happy

http://miley-world-serbia.fanbb.net/forum.htm

Sponsored content


Vidi prethodnu temu Vidi sljedeću temu Na vrh  Poruka [Stranica 1/1]

Permissions in this forum:
Ne možete odgovoriti na teme ili komentare u ovom forumu

  •   |  

­ ­ ­



Free forum | © PunBB | Free forum support | Kontakt | Report an abuse | Sosblogs