Bétakaptafa

A mai főoldal első posztja főleg a tologatható dobozokról szól. Aki innen vitt magának blogsablont, annak nem lesz nehéz dolga, ha szeretné kipróbálni az új funkciót, a menü elemeinek ide-oda helyezgetését - ez se nehezebb, mint átírni egy stíluslapot.

A dobozok miatt nagyívű bétakaptafa-átgondolásra van szükség, de amúgy is esedékes lenne végre az 1.0 verzióval előállni. (Ősszel, kábé.)

Akinek sürgős, annak a főoldali poszthoz kiegészítésként egy lehetséges megoldás: a "menu" nevű sablondarabot így kell átalakítani, vagyis az összes menüelem helyett egy-egy linklistát behívni, a félkövér sorok váltják ki a korábbi elemeket:

<div id="menu">

<div id="linklista1">
<e:WidgetContainer name="blogdobozok1" />
</div><!-- id linklista1 vége -->

<div id="linklista2">
<e:WidgetContainer name="blogdobozok2" />
</div><!-- id linklista2 vége -->

</div><!-- id menu vége-->

A "dobozok" menüpontban egy "blogdoboz1" és egy "blogdoboz2" nevű új oszlopot kell létrehozni, és utána ezekbe belehúzgálni a kiszemelt dobozokat.

Feltétlenül: az eljárás minden meglévő menüelemet felül fog írni, vagyis az egyedi kiegészítések eltűnnek, azokat újból be kell pakolgatni. És a meglévő formázások egy része is eltűnik majd - ebben a rendszerben a szánhúzós meg a türkizes típusú dobozformázásnak befellegzett. (Nem baj, lesz helyette css3.) A keresőmezőt most így hirtelen nem tudom, valószínűleg problémás lesz, majd mindjárt megnézem.

Igazából azoknak buli ez, akik nem akarnak vagy nem tudnak belenyúlni a html-kódokba, nekik soha nem látott lehetőség, csak kell hozzá egy jó sablon, na majd.

Két hasábos, fix szélességű sablon, kifejezetten fotóblognak, vagyis a fejléc szinte alig foglal helyet, a háttér pedig a fotókhoz leginkább passzoló sötétszürke.

Az újabb böngészőkben a túl nagy kép lekicsinyítődik 604 pixel szélességűre - ekkora méretű fekvő kép a legtöbb monitorra görgetés nélkül ráfér.

A képek 8 pixel széles fehér keretet kapnak.

A sablonban CSS3-elemek is felbukkannak, ezért nagyon nem mindegy, hogy milyen a böngésző: Explorerben például nem látszik, hogy a bejegyzések és a menü sarkai lekerekítettek, a fejléc, a képek, a keresőmező és az avatarok pedig árnyékolva vannak.

Ha kipróbálod, akkor kattints a tesztfoto kategóriára, ott legalább van hozzá fotó is.

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

A stíluslapon két-három sorba belepiszkálunk kicsit, aztán rögtön egyedi blogsablonunk lesz, tíz sornyi változástól meg már az anyja is csak forráskódból ismeri fel a kaptafáját esetleg. De például új linket nem bírunk ilyen módon menübe pakolni.

Vannak helyzetek, mikor muszáj kimerészkedni a css nevű sablondarab (kissé ingoványos) biztonságából, másképp nem tudunk nélkülözhetetlen sündisznót vagy analóg órát beszerezni.

Ugorjunk fejest a kacsacsőrökbe. Nagyon logikus rendszer, könnyen kiismerhető, és még rendkívül rugalmas is, bár ez eleinte inkább hátránynak tűnik, mint előnynek.

Linkek listája. A kaptafán új linkeket a "linkjeim" nevű sablondarabban lehet a legegyszerűbben létrehozni, ezek a linkek majd a találóan "Linkek"-nek nevezett rovatban fognak megjelenni.
Mindegyik linknek így néz ki a saját sora, a szóközöket azért teszem most bele, hogy elkülönüljenek az alkatrészek:

<li>  <a href="#">  szöveg  </a>  </li>

A sor elején a kacsacsőrök között a "li" azt jelenti, hogy itt kezdődik a listaelem, a sor végén a "/li" a listaelem végét jelzi. Az "a href" kezdetű részből lehet tudni, hogy nem egy sima szöveg, hanem egy link fog következni, a "/a" a link vége. A "szöveg" jelenik meg a menüben, erre lehet kattintani. A kettőskereszt helyére kerül maga a link. Készre gyártott sor így néz ki:

<li><a href="http://egykaptafa.freeblog.hu">kaptafa</a></li>

Fontos: a kacsacsőrök mindig párosak, első jobbra nyílik, második balra, köztük van a mondanivaló.

Vadonatúj linklista. Hasonlít az előzőhöz, csak itt nem elég a listát legyártani, meg kell alkotni a komplett menüpontot a menüben, vagyis a "menu" nevű sablondarabban. Kell egy cím először is. A kaptafán a menü címei a h3-as címsorral vannak jelölve, szabad elhatározásomból, szóköz megint csak dísznek van benne:

<h3>  menüpont címe  </h3>

Jön a lista, szinte mindig rendezetlen, vagyis minden eleme előtt ugyanaz a jel lesz, már ha lesz egyáltalán. Kell tehát egy rendezetlen lista, és kellenek a listába listaelemek. A listaelemek pont úgy fognak kinézni, mint az előző pontban.

<ul>
<li><a href="#">szöveg</a></li>
<li><a href="#">szöveg</a></li>
</ul>

Ha a blogsablonban nincsenek külön formázva az egyes menüpontok, akkor készen is vagyunk az új rovattal, mivel a stíluslapon már megformázódtak a menü címei, listái és listaelemei.

Némelyik sablonban (pl. a kutyaszános sablonban) minden menüpontnak önálló háttere van, ehhez külön kell formázni a címet, a listát és a menüpont alját. Van olyan, hogy csak a címhez tartozik háttérkép (pl. a kékargentin sablonban), itt elég a címhez hozzárendelni egy azonosítót. Egyedi azonosítókat kell kitalálni a fenti elemekhez, amikkel majd ki kell egészíteni a stíluslapot. Az azonosító nagyjából ránk van bízva, de ha nem akarunk belezavarodni a sablonmódosításba, akkor követjük a meglévő menüpontok felépítését. Legyen az új menüpontnak "box_uj" a neve, a cím a "box_ujcim" névvel lesz azonosítva, a lista a "box_ujtest"-ben lesz, a menüpont alja pedig a "box_ujlab", nincs benne semmi tartalom, rögtön a nyitó elem után jön a záró elem. (Az előbbi kutyaszános sablon stíluslapjában látható, hogy a Boxlábak kaptak egy fix magasságot és egy háttérképet.)

<div id="box_uj">
<div id="box_ujcim">   <h3>új menüpont</h3>   </div>
<div id="box_ujtest">

<ul>
<li><a href="#">szöveg</a></li>
<li><a href="#">szöveg</a></li>
</ul>

</div>
<div id="box_ujlab">   </div>
</div>

A stíluslapon ezeket az új azonosítókat hozzácsapjuk a meglévőkhöz, és akkor  olyanra fognak formázódni, mint a többi. (Pl. a sokat emlegetett kutyaszánosnál a "#box_egyeblab" után vesszőt teszünk, és beírjuk, hogy "#box_ujlab".

Fontos. Nagyon pontosan kell illeszteni az új részeket, nehogy véletlenül kettévágjunk vele egy meglévő menüpontot. Az alkotásnál figyeljünk rá, hogy a kezdőelemnek legyen befejező párja, és ez a kettő elem egyenlő távolságra legyen a közrefogott tartalomtól. (A fenti példában a legelső nyitó elem a <div id="box_uj">, a hozzá tartozó záró elem az utolsó sorban lévő </div>. A sablonban a záró elemekhez - ha messze vannak a párjuktól - oda szoktam írni megjegyzésként, hogy melyik nyitó elemhez tartoznak.) Egyetlen felesleges vagy hiányzó sor vagy akár karakter képes teljesen szétzilálni a sablont.

Új menüpont, tetszőleges tartalommal. Üzenőfal, óra, sündisznó, rádió, videoklip, twitter, okos gondolat, akármi, majdnem úgy kell csinálni, mint az előzőt, csak a testben nem lista lesz, hanem ez az akármi. Ha egy honlapról szedtük a kódot, akkor azt csak be kell másolni a lista helyére. Ha szöveget írunk, akkor kerüljön <p> és </p> közé.
Különféle dolgokat lehet egybeömleszteni, jöhet a lista után egy bekezdés, aztán egy klip.
Néhány meglévő menüpont is kibővíthető vagy átértelmezhető, pl. a "bemutatkozás" menüpontban a blog alcíme kicserélhető bármi másra. (Ha az alcím a fejlécben látható, akkor ez a menüpont el van tüntetve a stíluslappal.)

Új elem a főmenübe. A főmenü egy közönséges lista, csak többnyire csíkban jelenik meg. A "fejlec" nevű sablondarabban lehet új linket belepakolni, kedvenc kategóriánkat, másik blogunkat, szívügyünket, ilyesmit. Arra vigyázzunk, hogy megmaradjon a legelső elemnél a "first" class, mert esetleg szükség lehet rá, hogy az elsőt másképp formázzuk (pl. az elemeket egy baloldali szegéllyel elválasztjuk egymástól, de ez az első linknél csúnyán mutatna).

Főoldalra ajánlás. Az ajánló a "bejegyzes" sablondarabban található, csak el kell bontani mellőle a paravánt, a felette és az alatta lévő sort törölni kell. (Akinek kell ilyen, megoldja, aki viszont nem szeretne főoldalra kerülni, annak semmi extra teendője nincs.)

Licenc. A "lablec" nevű sablondarabban van kilinkelve az eredeti sablonban található kép lelőhelye és a hozzá tartozó licenc. Ha eltűnik a kép a sablonból, akkor  a lábléc éthetetlenné válik, megéri lecserélni a szöveget. (Ugyanez a szöveg megtalálható a menü alján is, de többnyire rejtve, természetesen innen is törölhető.)

Felesleges elemek a blogban. Ha valamire nincs szükségünk, nem kell azonnal törölnünk, a stíluslapon egy "display: none;" sorral eltüntethetjük. (Pl. a "bemutatkozás" menüpont sok sablonnál, vagy a főmenü első eleme a türkiznél.)

Szerintem ezek férnek bele egy kezdő szintbe. További ötletek fellelhetők a kaptafablog "Suvick" menüpontjában, és szerte az interneten.

A bétaverzió eléggé letesztelődött, az 1.0 változattal ott tartok, hogy már többször gondoltam rá, hogy jó lenne megcsinálni.

Aki megakad a sablontutujgatásban, az először próbálja összevetni a saját változatát az eredetivel, esetleg aludjon rá egyet, aztán, ha nincs jobb ötlete, akkor kommentelje be ide, hogy egész pontosan mi a probléma.

Itt még egyszer se hoztam szóba a Zen Gardent, a világ legrégibb és leghíresebb kaptafáját, ahol ugyanahhoz a sablonszöveghez több mint kétszáz stíluslap tartozik (fénykorában sokkal több volt, sajnos néhány kedvencem is eltűnt a cybersüllyesztőben), lenyűgöző kollekció. Ezt bátorításnak szántam.

Három hasábos, fix szélességű sablon. Balra igazodik, a két linklista a szöveges rész alatt van. A háttérkép 340x580 pixeles.

Ez a blogsablon a váratlan sablonból kiindulva készült. (Az ilyen típusú információt fontosnak tartom közölni, egyrészt azért, hogy látszódjon, milyen nagyokat lehet ugrani néhány sor megváltoztatásával, másrészt pedig azért, mert a stíluslap más felépítést követ, mintha tiszta stíluslappal indultam volna.)

Az eredetileg királykék ruha és piros cipő a PhotoFiltre (magáncélra ingyenes, nagyon könnyen kezelhető, apró méretű, magyar nyelven is elérhető) képszerkesztő programnak a Beállítás - Színtartomány cserélése menüpontjában lett türkiz színű. A menüpontok és az adminkommentek mögötti háttér a színátmenet ikonra kattintva állítható elő.

A főmenü linkjei IE6 alatt nem hajlandók a képernyő bal felső sarkába vándorolni, de emiatt nem volt szívem lomtárba helyezni ezt a vidám sablont. Cseréljetek böngészőt, ezt tudom javasolni.

A főmenü linkjei fix szélességűek, ezért gombok is készíthetők hozzájuk, bármilyen képszerkesztő programmal vagy online gombszerkesztővel. Szöveg nem kell a gombokra.

Fotó: geishaboy500

Licenc: Creative Commons - Nevezd meg! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Évszakokon átívelő háromhasábos, fix szélességű sablon, főleg egyedülálló férfiaknak. A karácsony sablonból készült, véletlenül. (Eredetileg a régi színes-szagost szerettem volna felfrissíteni, de valahogy ez lett belőle.)

A háttérkép 180 pixel magas, a keresőmező háttérképe pedig 180x42 pixeles. Szemcsézett hatás a Photofiltre képszerkesztő Szűrők - zaj - zajosítás menüpontjában szerezhető be. Színcserés módosításhoz tudok adni szürke keresőmezőt.

A letölthető változatban a keresőmező cím nélkül szerepel, rögtön a főmenü alatt.

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Három hasábos, fix szélességű sablon. A blog fejlécében a kép 952x120 pixeles.

Ez a blogsablon az argentin sablonból kiindulva készült.

Fotó: jkbrooks85

Licenc: Creative Commons - Nevezd meg! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Kéthasábos, fix szélességű sablon. A blog jobb felső sarkában a kép 330x209 pixeles.

Ez a blogsablon a karácsony sablonból minimális átalakítással készült.

Fotó: CrissyMorin

Licenc: Creative Commons - Nevezd meg!- Ne add el! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Kéthasábos, fix szélességű sablon. A fejléckép 800x220 pixeles.

Ez a blogsablon az argentin sablon minimális átalakításával készült: csak a színek és a háttérképek változtak, kapcsolódó poszt a sablonos blogon.

Fotó: Matt Seppings

Licenc: Creative Commons - Nevezd meg! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Kéthasábos, fix szélességű sablon. A blog jobb felső sarkában a kép 260x217 pixeles.

Ez a blogsablon az argentin sablon átalakításával készült, vagyis úgy, hogy az ottani stíluslapon lettek módosítgatva az értékek (és ez meg is látszik rajta, mármint a stíluslapon, de nem nagyon).

Fotó: Mugofevil

Licenc: Creative Commons - Nevezd meg!- Ne add el! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés

Kéthasábos, fix szélességű sablon. A fejlécben a kép 806x220 pixeles.

Az eredeti színes fotóból úgy lett ilyen szép depis kék fotó, hogy Photofiltre képszerkesztővel először Szűrők - Színek - Szépia menüpont, aztán Beállítás - Negatív menüpont. (Aztán még egyszer az egész, hogy a végén a kép alja fekete maradjon, de azért az ablakok is világítsanak.)

Sarkokat kerekíteni a picnik.com-on lehet a legegyszerűbben, a Create - Frames - Border menüpontban.

Fotó: Irargerich

Licenc: Creative Commons - Nevezd meg! 2.0 általános

Próbáld ki ezen a blogon

Teljes sablon letöltés

Csak stíluslap letöltés