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

Join the forum, it's quick and easy

Dobrodošao na forum o dizajnu... Uloguj se i uživaj
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

Dodatne sličice na headeru(by MEX)

3 posters

Go down  Poruka [Stranica 1/1]

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

Djoxy

Djoxy
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

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

Lolcic

Lolcic
Siromah
Siromah

Supp je i od koristi...Very Happy

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

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

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

Bas je dobro.. Very Happy

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

Sponsored content



Na vrh  Poruka [Stranica 1/1]

Similar topics

-

» Dodatne forumske usluge

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

  •   |  

­ ­ ­



Create a forum on Forumotion | ©phpBB | Free forum support | Report an abuse | Latest discussions