2015. április 12., vasárnap

#3 ST- Sablon tutorial, avagy így készült a design-unk

Hellow Piskóták!
Egy páran már kérdeztétek tőlem, hogyan kell átszínezni a sablont. Kissé bonyolult lesz és 4 kritikával lógok nektek, de mindegy, azok ma már 1000000%, hogy meglesznek.
Először is letöltjük a sablont, kicseréljük a fejlécet.
Most keressük meg azt a sort, ami így kezdődik:
<Variable name="keycolor" description="Main Color" type="color"
Ennek a végén van a value után egy színkód. Ezt nem muszáj lecserélni, de én mindig megteszem.
Alatta találunk olyat nem sokkal, hogy body.background.color /háttérszín/ Mindig a value értéket kell kicserélni, ezt ne felejtsétek el. Nálam ez most fekete, így a fejléc alapján lévő sötétkék színre fogom átírni.
Most az alatta lévő sorban a body.text.color-ral /szöveg/ lesz dolgunk. Nekem fehér, ezért világoskékre kódolom.
Ennyi szerintem elég, most jöhet a mi mit jelent /ha valami kimaradt elnézést, minden sablon más/:

link.color = link színe
link.visited.color = meglátogatott link színe
link.hover.color = ha ráviszed az egered a linkre

header.background.color = fejléc mögötti szín

date.text.color = dátum színe

widget.alternate.text.color = modulban lévő szöveg színe

Ugye ez még nem minden. Ha valami kimaradt, egyszerűen készíts képernyőmentést és irány a PhotoShop! A bekarikázott eszközzel vedd fel azt a színt, amit nem színezett át, majd kattints a második bekarikázottra.


Nos, a másodiknál feljön egy ablak, bekarikáztam nektek a színkódot. 


Ezt másoljátok ki, és most figyeljetek! Ugye a fejlécet úgy rakjuk be, hogy belekattintunk a kódot tartalmazó mezőbe, lenyomjuk a ctrl+f-et, majd beírjuk, hogy .jpg vagy .png. Itt most csak a színkódot rakjuk be, így minden egyes azt a színt tartalmazó részt kijelöl. Ezeket kell kicserélni. Ajánlott végigtekerni szinte az egész kódon, nehogy kimaradjon valami. 
A másik technika kissé egyszerűbb, mivel a PhotoShop-os nem mindig megbízható. Nézzük csak! 

Itt a hátteret szeretnénk kicserélni, így az Elem megtekintése az alábbi módon válik hasznunkra:
A bekarikázott sárga rész melletti színes kockára kattintva kékkel jelöli ki a szín kódját, amit mi kimásolunk és innentől már csak ugyanaz jön, mint a PS-es végén. 

Ha ezzel is megvagyunk, akkor a modulokat írjuk magyarra és bővítjük őket. Sok sikert mindenkinek! 








2 megjegyzés: