freeblog bejegyzései 
Egy sablon a zene szerelmeseinek, tehát mindenkinek:)
(Internet Explorer 6 alatt is olvasható, de a látványa nem annyira megnyerő)
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
Ahogyan azt ígértem, íme a letölthető City at Night sablon:
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
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.
|
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ő)
Az oldalsáv és a lábléc beillesztése hasonló módon történik, mint a fejlécé.
Kezdjük az oldalsávval (alább látható az enyém)
Szélessége: 718 pixel
Magassága: 282 pixel
Az oldalsáv linkjét két helyen is meg kell adni:
-
közvetlenül a fejléc fölött:
2. gördítsük le a CSS szerkesztőt a #test részhez, ahova szintén be kell illeszteni az URL-t.
Ne felejtsük el a szélességet is megadni (a magasságot nem kell, mivel az oldalsáv függőlegesen ismétlődik).
Tipp! Hogy ne kelljen az intéző és a CSS szerkesztő között ingázzunk a képek URL címéért, egyszerűbb, ha a fejléc címet illesszük be ide is, majd átírjuk a fájlnevet (feltéve, ha mindkét fájl ugyanabban a mappában található).
Következhet a lábléc.
Szélessége: 718px
Magassága: 40px
A lábléc a CSS legalján található: #foot
Végezzük el itt is a fentebb már ismertetett műveleteket, majd mentsük el a CSS szerkesztőt, és vessünk egy pillantás a blogunkra.
Az enyém jelenlegi formájában így mutat:
A következő lépésben megszélesítem a szövegmezőt, illetve a jobb oldali sávot. Ehhez egy pici matekozásra lesz szükség:)
Az eredeti sablon 692 pixel volt, ebből a bejegyzésmező kapott 500 pixelt, a jobb oldali menü 142-t, a maradék pedig a margóknak jutott.
Az én sablonom 718 pixel széles, tehát 26 pixellel több. Ezt a 26 pixelt kell szétosztanom a jobb oldali menü, illetve a bejegyzésmező között. Én úgy döntöttem, hogy a nagyobb részt adom a jobb oldali menühöz, egészen pontosan 20 pixelt, a bejegyzésmező pedig csak hatot kap.
Keressük ki az alábbi részt, és írjuk át a bejegyzésmező szélességét: esetemben 500+6=506 pixel
Majd adjuk meg a jobb oldali menü új szélességét is (nekem142+20=162 pixel)
Ha mindezzel megvagyunk, mentsük el a css-t, és ellenőrizzük le a blogon a változtatásokat.
A kommentablak szélességét az alábbi helyen módosíthatjuk, az én blogom esetében ez marad a régi méret, azaz 490 pixel.
Elérkeztünk egy jóval szórakoztatóbb (legalábbis számomra) fejezethez: a színek, betűtípusok módosítása következik.
Kezdjük a blog háttérszínével, ami jelenleg világos szürke, CSS (HTML) nyelvre lefordítva: #f5f5f5 színű:)
Kétféleképpen adhatjuk meg a kívánt színt CSS-ben: az egyszerűbb, ha beírjuk annak angol nevét: pl. black. Itt egy lista, hogy mely színeket ismeri fel minden böngésző. A gyakoribb eljárás azonban az, amikor a szín hexakódját írjuk be. Ennek előnye az, hogy jóval több árnyalat közül választhatunk.
Íme néhány lista, amelyről kedvünk szerint válogathatunk:
Ha nem vagyunk biztosak a dolgunkban, például, hogy mely színnel melyik talál, akkor segítségünkre lehet a colorcombos oldal, melyen különböző színkombinációkat, és ezek hexakódját tekinthetjük meg.
Ha egy konkrét képről szeretnénk egy konkrét színt használni (például a fejléckép valamely színárnyalatát), akkor szükségünk lesz a GIMP-re.
A programmal a következőképpen tudhatjuk meg egy adott szín html jelölését.
1. Kattintsunk duplán a kis színes négyzetre (ami alapértelmezett esetben fekete), hogy előhívjuk a színkiválasztó párbeszédablakot.
-
kattintsunk a pipettára
-
a pipettával kattintsunk a képen a kívánt színre, ezt követően a HTML-jelölés mezőben láthatjuk annak hexa kódját:
Ezt a kódot kell kimásolnunk, majd a CSS-ben a kívánt helyre beillesztenünk egy # szimbólum után.
A blog hátterének módosításához az alább bekeretezett részt kell módosítani(én feketét fogok használni, amelynek rendkívül bonyolult hexakódját már kívülről tudom: #000000 :)
Ugyanitt módosíthatjuk a bejegyzések betűjének színét, illetve típusát. Ez utóbbinál azonban ügyeljünk, mert nem használhatunk akármilyen karaktert. Íme egy lista a „Browser safe” betűtípusokról.
Nálam a betűszín marad fekete, viszont a típusát Arialról lecseréltem Tahomara. Megadhatunk egyszerre több betűtípust is, vesszővel elválasztva azokat, így ha a felhasználó számítógépén nem található a sorban elsőnek feltüntetett típus, akkor a böngésző automatikusan a sorban következőt fogja alkalmazni, legvégül pedig feltüntethetjük a betűcsaládot, utasítván a böngészőt, hogy ha a konkrét karakterek közül egy sincs meg, akkor mely betűcsaládból válasszon egy elérhetőt magának. Itt csak azt kell tudni, hogy két nagy karaktercsalád létezik: a serif és sans-serif, azaz talpas és talpatlan betűk. Utóbbiakat jóval kényelmesebb a szemnek monitoron olvasni.
Ugyancsak itt lehet megadni a betű méretét is (font-size), ami esetemben maradt a 12px.
Következhet a mentés, majd a blogunk megtekintése.
Folytatása következik...
Egy most készülő sablonomon keresztül szeretném bemutatni, hogy hogyan szabhatunk egyedi külsőt blogunknak. A „City at Night”-ot még régebben terveztem, de „freeblogosítására” csak most kerítek sort.
A legegyszerűbb módja egy saját Freeblog sablon készítésének, ha már egy kész, gyári sablont szabunk át, hiszen a nulláról felépíteni egy újat már komolyabb html/css tudást igényel.
Úgy gondolom, hogy a gyári sablonok közül a Billentyűzetes alakítható át legkönnyebben.
Ajánlatos nem a főblogunkon kísérletezni, inkább hozzunk létre erre a célra egy külön blogot, és majd csak a kész változatot töltsük fel a főblogra. A vezérlőpult >blogdolgoknál pipáljuk ki a „Titkos blog?” négyzetet, hogy tesztblogunk ne jelenjen meg a Freeblog főoldalán, illetve a keresőkben.
Ezt követően írjunk valamit a bemutatkozás mezőbe, illetve készítsünk egy vagy két posztot is. Mindegy, hogy mit írunk, nem az a lényeg, akár írhatunk a szarvasgombák lelőhelyéről is egy értekezést:), de egyszerűbb, ha valahonnan "kopi-pésztelünk" egy szöveget, például a már jól ismert Lorem ipsum-ot, aminek semmi értelme nincsen, és éppen ez a jó benne, mert nem tereli el a figyelmünket, így száz százalékosan a dizájnra fókuszálhatunk. Írjunk még néhány kommentet is a saját poszunkhoz. A tartalmat illetően elég is lesz ennyi, mielőtt még beszédbe is elegyednénk önmagunkkal.:P
Ha a gyári sablonok közül beállítottuk a Billentyűzetest, akkor kezdhetjük is annak átszabását:
-
Fejléc, oldalsáv, lábléc lecserélése.
A Billentyűzetes sablon három képből tevődik össze:
Egy fejlécből:
szélessége: 692 pixel
magassága: 175 pixel
Egy oldalsávból – ez a név csalóka, ugyanis az oldalsáv egyaránt képezi a bejegyzések, illetve a jobboldali menü hátterét (lehet, hogy csak én adtam neki ezt a nevet, már nem emlékszem).
Az oldalsáv függőlegesen ismétlődik, ezért nem túl összetett háttér esetében egészen kicsi is lehet, esetünkben ez a két aprócska pötty, a köztes tér fehér színű, ezért nem sok minden látszik belőle:
szélessége: 692 pixel
magassága: 3 pixel
És legalul található a lábléc:
szélessége: 692 pixel
magassága: 24 pixel
Bizonyára megfigyeltük, hogy a három kép szélessége egyezik, ennek okát gondolom nem kell ecsetelni.
Ha egy gyors pillantást vetünk a blogunkra, akkor az valahogy így mutat jelenlegi formájában:
A három kép lecseréléséhez a következőket kell tennünk:
-
először is szükségünk van egy fejlécképre, amellyel a jelenlegit le szeretnénk cserélni. A méret nem muszáj egyezzen, lehet magasabb, szélesebb.
Esetemben a fejléc az alábbi kép lesz:
Szélessége: 718 pixel
Magassága: 422 pixel
1000 pixelnél szélesebb kép használata nem ajánlott, mert a jelenleg még nagyon gyakorinak számító 1024 x 768 felbontású monitorokon ki fog lógni. Ha a képünk túl széles, könnyedén átméretezhetjük. Akár paintel is, de javaslom inkább az ingyenes IrfanView-et
A programmal a következőképpen méretezhetjük át a képünket:
-
Gördítsük le az „Image” menüt, és azon belül válasszuk ki a „Resize/Resample” parancsot, vagy nyomjuk le a Ctrl+R billentyűket:
Az alábbi menü ugrik elő:
Set new size résznél írhatjuk be a kívánt méretet. Figyeljünk oda, hogy az egységek pixelben legyenek, illetve arra, hogy a Preserve aspect ratio be van-e pipálva vagy sem. Ha nincs, az azt jelenti, hogy a kép átméretezése nem lesz arányos, vagyis a szélességet és magasságot egymástól függetlenül adhatjuk meg. A méret csökkentése nem okoz a kép minőségében semmi változást, viszont a növelés esetében „pixelesedni” fog.
Ha mindezzel megvagyunk, mentsük el a képet, javaslom a PNG formátumot, de a JPG is megfelel, a GIF-et nem ajánlom, mert kevesebb színárnyalatot támogat.
Akinek a Guardar felkeltette a figyelmét, elárulom, hogy portugálul van;)
A jobb oldalon megjelenik egy kis
menüablak, ahol a kép formátumának megfelelően további mentési
opciókat adhatunk meg, de az alapértelmezett nekünk most megfelel,
tehát nem kell vele babrálni.
Ha megvagyunk a fejléccel, állítsuk az oldalsáv, illetve a lábléc szélességét is be. Megtehetjük azt is, hogy csak a fejlécet cseréljük le, az oldalsáv és a lábléc pedig marad az eredeti, bár nem tudom, hogy ez mennyire fog jól mutatni. Megrajzolhatjuk az oldalsávot és láblécet akár paintben is, vagy a nyílt forráskódú GIMP képszerkesztő program segítségével. Ha úgy döntöttünk, hogy ezzel nem bíbelődünk, és csak a fejlécet akarjuk lecserélni, akkor ügyeljünk arra, hogy annak szélessége pontosan 692 pixel legyen.
Következhet a képek lecserélése:
Lépjünk be a blogunk adminisztrációs felületére. Az intézőben készítsünk egy mappát, és oda töltsük fel a három (vagy egy) képet.
Kattintsunk jobb gombbal a fejlécre, és hívjuk elő a Tulajdonságok menüt.
Kattintsunk az URL címre, majd jelöljük ki azt Ctrl+A val, hogy ne maradjon le egyetlen betű sem.
A Firefox nem jeleníti meg a teljes címet (itt például kilóg a kiterjesztés), a fenti url valójában így néz ki:
http://can-template.freeblog.hu/files/can/fejlec_can.png
A sikeres kijelölést követően az url t másoljuk ki a vágólapra Ctr+C vagy jobb kilkk és másol.
Ezt követően zárjuk le az intézőt (Kész, vége), lépjünk a Sablon fülhöz, azon belül Sablondarabok itt nyissuk meg a CSS-t
A látványtól nem kell megijedni, kínai nyelvtudás nem szükségeltetik hozzá:) egy kevéske angol nem árt, de anélkül is boldogulhatunk.
Keressük ki az alábbi képen pirossal bekeretezett részt:
Azon belül is az alábbi sort:
background-image: url(<e:System.Domains.StaticContent url="/templates/rancfelvarr7/head.png" />);
Gondosan töröljük ki a zárójel tartalmát, arra nagyon ügyeljünk, hogy semmi mást! :P
És Ctrl+V -el vagy jobb klikkel illesszük be a vágólapunk tartalmát, azaz az URL címet, amit korábban kimásoltunk, itt meg arra ügyeljünk, hogy még egy szóközzel se kerüljön több a zárójelbe!
Ezt követően adjuk meg a képünk pontos méreteit: szélesség (width), magasság (height).
Kattintsunk az „Elmentem” gombra, de ne lépjünk ki a css-ből, hanem külön ablakba nyissuk meg a blogunkat és konstatáljuk a változásokat, ha nincsenek, akkor valahol mégis becsúszott valami, vagy éppenséggel törlődött egy pontos vesszőcske:P De az sincs kizárva, hogy a böngészőnk a Cookiek között tárolta a blogunk fájljait, és ezért nem történik változás. Ennek orvoslására töröljük a Cookiekat (Firefoxnál Ctrl+Shift +Del), ezt követően frissitsük az ablak tartalmát F5.
Az én blogom jelenlegi állapotában így néz ki:
Még eléggé csúnyácska szegény, de az átszabásnak még korán sem értünk a végére. Hagyjuk egy böngészőablakban megnyitva a blogot, így minden komolyabb CSS piszka után F5-el leellenőrizhetjük a hatást. Ez a módszer azért is előnyös, (szemben azzal, amikor mindent átírunk a CSS-ben és csak a végén vetünk pillantást a blogunkra), hogy ha valahol bakiztunk, akkor azt könnyebben be tudjuk azonosítani.
Folytatása következik...
Egy picit átszabtam a sablonArt külsejét, ugyanis jubilálunk: megszületett a tizedik sablon!
A snail sablon sajátossága a korábbiakkal szemben az, hogy az első pixeltől az utolsóig a nyílt forráskódú GIMP grafikai és képszerkesztő programmal készült.
Amellett, hogy GIMP-vel készült, egy másik érdekessége a sablonnak az, hogy görgetéskor néhány csiga követi a szöveget, néhány pedig lazsál:).
Sajnos az Internet Explorer 6 nem jeleníti meg jól a sablont, nem is ez a sajnálni való, ez csak egy szomorú tény, amit tudomásul kell venni. A sajnálatos dolog az, hogy az internetezőknek körülbelül a 15 százaléka még mindig ezt a böngészőt használja. Tehát, aki ezt a sablont szeretné telepíteni blogjára, az próbálja meg rábeszélni olvasóinak ezt a kis rétegét, hogy váltsanak böngészőt. Ami -ismervén az IE6-ot - szerintem nem lesz nehéz feladat:P
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
Egy "mesés" sablon:
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
Hosszú időközökkel, de frissítem a kollekciót. Íme a legújabb sablon, nemcsak szerelmeseknek:)
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
Több mint egy félév szünet után itt egy újabb alkotás, lesz majd még következő is, a mikor az még kérdéses:)
Letöltés:
Egyszerű telepítés:
Kicsit nehezebb:
Bemutatkozás
Szabadon letölthető és módosítható sablonok freeblogra.
JavaslatMentsd ki a linklistádat, mielőtt telepíted a sablont, mert különben elvesztődik. A bejegyzéseknek nem esik bántódásuk.
Keresés
Utolsó kommentek
Freeblog sablon készítése 1. rész, balash: Szia. Erre talán Zuna Zoom tudna neked válaszolni, én nem... »Freeblog sablon készítése 1. rész, kriszy.86: Szia! Zuna zoom egyik témáját töltöttem le és állítottam be... »
Freeblog sablon készítése 2. rész, balash: Szia, A harmadik részben komment formájában írtam erről (5.ik... »
Freeblog sablon készítése 1. rész, balash: Szia, erről a harmadik rész legelején írtam. »
Freeblog sablon készítése 2. rész, Orsi.17: Szia! Ha egy teljes háttért szeretnék lecserélni (tehát ami a... »
Kategóriák
Sablonkészítés (3)sablonok (12)
Archívum
Jelen2010. február
2009. október
2009. szeptember
2009. augusztus
2009. április
2009. március
2009. január
2008. április
2008. március
2008. február
Az összes »
Linkek
freeblog főoldalfreeblog admin
GIMP ingyenes képszerkesztő
Sablongyárak
Zuna ZoomSkinned
Egykaptafa
Anyuhamos
Pazzo
Xsolutions
Templates
Egyéb
