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ó

 

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ó

 

 

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ő)