2009. okt. 18. 20:35 - írta balash

Az alábbi sablon szintén GIMP-ben készült, két verzióban is letölthető. Az elsőt, amelynél a bejegyzések egy csillagporfelhő mögül bújnak elő, az Internet Explorer 6 nem jeleníti meg normálisan.

 

Előnézet (v1)

 

 


Demo

 

Letöltés:

Egyszerű telepítés:

template_e.zip

 

Kicsit nehezebb:

pictures.zip

template.zip

 

Útmutató

 

Előnézet (v2)

 

 

Demo

 

Letöltés:

Egyszerű telepítés:

template_e.zip

 

Kicsit nehezebb:

pictures.zip

template.zip

 

Útmutató

 


 
 
0 (0)
Jelentkezz be a szavazáshoz!
2009. szept. 20. 16:43 - írta balash

Ahogyan azt ígértem, íme a letölthető City at Night sablon:

 

 

Demo

 

Letöltés:

Egyszerű telepítés:

template_e.zip

 

Kicsit nehezebb:

pictures.zip

template.zip

 

Útmutató

 

 


 
 
0 (0)
Jelentkezz be a szavazáshoz!
2009. szept. 12. 22:56 - írta balash

Következő lépésben a blogcím színét, illetve pozícióját módosítom.

 

Keressük ki a #head h2 részt a CSS-ben, majd adjuk meg a kívánt szín kódját. Ugyancsak itt módosíthatjuk a karakterek típusát, illetve méretét is (amelyeket én most érintetlenül hagyok). Egyel lejjebb található a #head h2 a, amelynél a fenti módosításokat szintén meg kell adnunk, ugyanis ez utóbbi jelölés a fejlécben található link tulajdonságait formázza, és az esetek többségében a blogcím egyben a főoldalra mutató linkként is funkcionál.


A text-decoration: -nél az alábbi tulajdonságokat adhatjuk meg.


text-decoration:overline – olyan mint az aláhúzás, csak felülre „föléhúzás?”:)

 

text-decoration:line-through – keresztülhúzás. Nem tudom, hogy mennyire jó ötlet, mindenesetre szokatlan stílusra vall egy keresztülhúzott blogcím, bár figyelemfelkeltő hatását nem vitatom, az embereket mindig érdekli, ami szokatlan.


text-decoration:underline – aláhúzás


text-decoration:blink – villogó szöveg, sajnos csak Firefox alatt működik, ettől függetlenül alkalmazhatjuk, mert nem Firefox alatt csak annyi történik, hogy nem történik semmi, vagyis a blogcím megjelenik, csak nem fog villogni.



A cím pozícióját a #head h2 -nél kell megadni, a padding-left-el horizontálisan mozgathatjuk (minél nagyobb az érték a bal oldali margótól annál beljebb kerül a cím), míg a padding-top-al vertikálisan (a felső margótól tolódik lefelé). Ebben az esetben a #head h2 a szintén a #head h2 pozíciójába  kerül, tehát ott nem szükséges az értékeket módosítanunk.


 

 



A #head h2 a:hover-nél adhatjuk meg, hogy mi történjen akkor, amikor a látogató a blogcím fölé viszi az egeret. Én csak a színt módosítom világosabb sárgára, de ha akarjuk növelhetjük vagy csökkenthetjük a betűméretet is.


 

 



Ha mindezzel megvagyunk, vessünk egy pillantást a blogra, ha még nem tettük:

 

 

 



Hátra van még a bejegyzések címének formázása, a jobb oldali menü, illetve néhány apróság.


Kezdjük a bejegyzéscímekkel:


Azzal kezdem, hogy eltüntetem azt a fehér szürke csíkot onnan. Ha csak a vastagságát és/vagy színét szeretnénk módosítani, szintén itt tehetjük meg. Én átírtam a vastagságot 0-ra, de törölhettem volna is ezt a sort a CSS-ből. Végül is mindegy, a lényeg az eredmény, azaz eltűnik a csík onnan:)

 

 


A bejegyzések címét és betűtípusát az alább helyen lehet módosítani, hasonló módon, mint a blog címét.

 

 


Alább található a hover, amelyről már tudjuk, hogy micsoda, ugyanis már találkoztunk hasonlóval a blog címének formázásakor is:

 

 




A bejegyzések linkjének színét az alább megjelölt helyen módosíthatjuk:


 

 





A bejegyzés alján a Kategóriák, illetve Címkék feliratokat, továbbá a kommentszámlálót és a „Mondj valamit” feliratot szintén megformázhatjuk:


 

 



Kezdjük az előbbi kettővel. Az alábbi hely már ismerős lehet számunkra, ugyanis itt vettük ki a fehér csíkot. Legfelülre be kell szúrnunk egy sort, ha a betű színét is módosítani szeretnénk, ellenkező esetben marad az alapértelmezett, azaz a bejegyzésekével azonos.


 

 




A kommentszámlálót, meg a „Mondj valamit!” feliratot itt módosíthatjuk:


 

 



Tulajdonképpen az is elegendő, ha csak az #entries h3 írjuk át. Aki tudja, hogy miért, üljön előre:)



Már majdnem kész is vagyunk, aminek bevallom őszintén, kicsit örvendek. Csak most látom milyen nagy vállalkozásba kezdtem ezzel a Tutoriallal:)



A jobb oldali menü megformázása következik:


A fent bekeretezett résznél módosíthatjuk a betűk színét. Az alsónál pedig a Bemutatkozás, Keresés, stb. feliratokat:

 

 



A szürke csíkot a már korábban ismertetett módon lehet itt is eltüntetni vagy formázni.


Ha nem csak a betűk színét, hanem típusát, méretét is szeretnénk módosítani, akkor szúrjuk be a font-family illetve font-size sorokat:.



 

 



A linkek színét itt adhatjuk meg:

 

 




A hover itt annyiban különbözik a korábbiaktól, hogy hátteret is kapott, ha mi nem szeretnénk, akkor egyszerűen töröljük, vagy ha a korábbi linkjeinkhez is akarunk hátteret, akkor másoljuk be ezt a sort.


Nos nagyjából készen is volnánk. Csupán a kommentablak kap még egy háttérszínt, illetve a keresőt is módosítom.


Kezdjük a kommentablakkal:

 

 




Kapott egy világos sárga hátteret, és egy sötétzöld, 1 pixel széles keretet.


A kereső hasonló formázásban részesült, csak egy világosabb háttérszínnel:

 

 



Utóbbi formázással nem csak a keresőt, hanem a kommentablak felett található input mezőt is módosítjuk.


Már majdnem készen vagyunk, egyetlen aprócska dolog szorul még módosításra, legalábbis remélem.

 

Amikor behúzunk egy szöveget, akkor azt a freeblog szerkesztője az alapértelmezettől eltérően formázza.

 

 



 

Mint látjuk ez a halvány szürke elég nehezen vehető ki a narancssárga háttérből.


Mindezt az alább ábrázolt módon formázhatjuk meg:

 

 




Voila!! A végeredmény: itt megtekinthető (és nemsokára letölthető)



 

 



 
 
5 (6)
Jelentkezz be a szavazáshoz!
Régebbiek | Végére »

Sablonok


11. City at Night*


10. Snail*


09. Fable*


08. Lovers*


07. City*


06. Delusion*


05. Green and Orange*


04. Surreal Tree*


03. Soundwave*


02. Stargazer*


01. Wheat Field*



*a Billentyűzetes (by balinto) gyári freeblog sablon átszabásával készült

Sablonkészítés

1. rész
2. rész
3. rész