1. Prije svega, kako bi testirali banner (preko skripte koja zamjenjuje banner na vaem pregledniku), instalirajte Greasmonkey addon na Firefoxu (ne znam za ostale browsere)

https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/ Vrlo je jednostavan za koritenje: - kad idete skinuti skriptu, npr. http://userscripts.org/scripts/show/118641 , klik na Install i pojavit e vam se Greasemonkey instalacija i opet klik na Install. I to je to! Samo trebate

refreshati stranicu foruma i banner bi trebao biti drugaiji. Ovaj primjer koji sam stavio je invertirani sadanji banner. - ako elite nakratko iskljuiti skriptu samo kliknite na Greasemonkey logo (pokraj home ikone u Firefox 8.0) i opet refreshajte. - ako elite trajno maknuti sriptu, kliknete na strelicu pokraj Greasemonkey ikone i potom na Manage user scripts i onda enable, disable i remove, kako elite. - ako imate vie skripti tj. bannera, kliknite na strelicu pokraj Greasemonkey ikone i odaberite u izborniku skriptu.

2. Ok, sad znate kako instalirati skriptu, no kako je napraviti i gdje je pohraniti? Stavit u vam default tekst skripte pa u vam objasniti:

To si kopirajte u notepad i spremite kao fer2banner.js (stavite da se takoer otvara taj file s notepadom - najjednostavnije). E sad, komentirat u samo ono to treba promjenu.

Poslije @name napiete ime skripte. Bitno je ako vie skripti uploadate da to stalno mijenjate. Ime samog filea ne treba mijenjati (moe biti cijelo vrijeme fer2banner.js)

// ==UserScript== // @name FER2.net Banner // @namespace *Ime autora // @include http://*fer2.net* // ==/UserScript== document.getElementById('hdr').setAttribute("style", 'background: url("http://www.fer2.net/enlighten/misc/header_back_2.png");'); document.getElementById('logo').setAttribute("style", 'background: url("http://www.fer2.net/enlighten/misc/header_logo_2.png"); width: 618px;');

// ==UserScript== // @name FER2.net Banner

Poslije * napisati ime autora. To vam je srednji dio koji se ponavlja. Naime, banner se sastoji od tri dijela: Lijevi

Srednji

Desni

Lijevi trenutno ima 618 x 102 piksela i on je fiksni. Srednji se, kao to rekoh, ponavlja. On ima trenutno 150 x 102 piksela. Desni je takoer fiksni i on ide na sam kraj. On ima trenutno 75 x 102 piksela. Ako nekome nije jasno, neka si instalira ovu skriptu: http://userscripts.org/scripts/show/119325 OK, sad da se vratimo:

Znai, samo trebate staviti link svoje srednje slike umjesto trenutnog linka za srednju sliku.

Najbolje je uploadati na imgur ili slini image hosting servis.

// @namespace *Ime autora

document.getElementById('hdr').setAttribute("style", 'background:url("http://www.fer2.net/enlighten/misc/header_back_2.png");');

document.getElementById('hdr').setAttribute("style", 'background:url("http://www.fer2.net/enlighten/misc/header_back_2.png");');

Ista stvar kao za srednji dio samo to je ovaj lijevi (primjetite ovaj "width: 618px;" - to bi trebala biti irina vae lijevog dijela, no vidjet emo je li doputeno imati drugaije duine jer

se npr. moe staviti irina kako pae, npr. imate lijevi dio koji je irok 400 piksela pa onda

stavite "width: 400px;" itd.)

Ista stvar kao za lijevi dio samo to je ovaj desni. Takoer, ista stvar sa irinom. Sad znate kako funkcionira skripta. No gdje je spremiti? Napravite besplatni account na http://userscripts.org . Kad to napravite, kliknite na svoj nick na njemu i onda na "Script management" i zatim uploadajte svoj .js file. Samo se sjetite ono @name promjeniti. Izgleda kao da ima puno posla, ali stvarno je lagano. 3. Sad ono najbitnije. U ovom zipu je okvir bannera: http://materijali.fer2.net/File.9269.aspx Dijelovi su u psd formatu. Dakle, Photoshop. Trebate napraviti samo novi layer i u taj layer stavite to hoete i taj layer stavite ispod layera okvira. Osim same ideje i kreativnosti, trebaju vam i ivci kako srediti da ovaj dio koji se ponavlja to

bolje izgleda. Trebate paziti da se to bolje nastavlja na lijevi dio i onda na sam sebe. Kao ovaj originalan banner:

to su tri iste slike. I ovo super izgleda jer nema previe detalja. Naravno da koliinom detalja dobivate problem monotonosti, npr.

document.getElementById('logo').setAttribute("style", 'background: url("http://www.fer2.net/enlighten/misc/header_logo_2.png"); width: 618px;');

document.getElementById('hdr_rs').setAttribute("style", 'background: url("http://www.fer2.net/enlighten/misc/header_rs_2.png"); width: 75px;');

ovo je jo ok kako to zna izgledati naporno. I sad jo na to trebate napraviti da se nastavlja na prvi i zadnji dio. Npr.

samo nastavljanje prvog i drugog dijela se radi tako da u lijevom dijelu napravite ve na kraju

"poetak" stila srednjeg dijela (primjetite kako ovaj dim na lijevom dijelu ne zavrava skroz na kraju nego par desetaka piksela prije i poinje stil srednjeg dijela). Zadnji tj. desni dio morate prilagoditi kraju srednjeg dijela.

Vidite kako je tu lijepo ovo sreeno, skoro pa da nema prijelaza. Nadovezivanje srednjeg dijela na samoga sebe se moe srediti zrcaljenjem polovice slike (ako imate takvu sliku kojoj monotonost ne smeta), npr. imate ovakvu sliku:

i napravite tako da drugi dio bude prvi, a drugi prvi dio i onda dobijete ovo:

i sad kad se ponavlja, onda nema prijelaza: