Alapok: testreszabható CSS tagek a Bloggerben

Sablon formázási lehetőségek

A Blogger rendszerében a sablont alapvetően kétféleképpen szabhatjuk testre: egyik megoldás a Személyre szabás almenü használata, ahol nagyon sok részt, mint a háttér, linkek színe, bejegyzés szövegének betűtípusa stb. tudunk állítani. Ugyanitt használhatunk CSS-kódokat is, ha ennél specifikusabb beállításokra van szükségünk. Ez már igényel némi rutint, és az egyszeri felhasználó könnyen egy átláthatatlan CSS-útvesztőben találhatja magát. Ennél is több lehetőséget rejt magában a HTML-kód szerkesztése, ahol lényegében bármit megváltoztathatunk. Ehhez már mindenképpen kellenek előismeretek, HTML és CSS tudás nélkül senki ne vágjon bele! (Kivétel ha van egy egyértelmű leírása, mit és hogyan csináljon. Meg vannak biztonsági mentései.) Röviden ennyi a "kódolt" (vagy "kódos") dizájn: minden, amihez kell némi gépelés. Értehető, hogy vannak különféle szintjei, hiszen az is kódos designnak számít, ha hozzáadunk a blogsablonhoz egy saját stílussal ellátott szövegdobozt, és ez a blog is, ami címke-vizsgálat alapján automatikusan átállítja a bejegyzések címének hátterét, vagy intelligensen mozgatja az oldalsó menüt. (Meg még mi mindent nem csinál...!) Persze ez nem eredmény, ha design-blogot vezetünk, és jön valaki, aki szeretne egy egyedi, de nem "kódos" sablont. De mit tehetünk, ha kifogytunk a Blogger által felajánlott módosítási lehetőségekből?

Mit tehet a dizájner, ha...?

A blog elsősorban a design technikai részei iránt érdeklődőknek készült: bár nem tagadom, bizonyára szép számmal akad ilyen más típusú oldalt vezető szerzők között, mégis főképp a designblogok szerkesztői a célközönség. A komolyabb technikák használata leginkább sablonok tervezése, dizájnmunkák kivitelezése közben szükséges, ezért a példák többsége is erre a világra koncentrál. Ez nem jelenti azt, hogy más ne tudna profitálni a cikkekből, de más egy blognál egyszer megcsinálni a stílust és úgy hagyni, mint havonta több blogot felépíteni a semmiből, lehetőleg mindet egyedi módon. A most bemutatásra kerülő trükk is nekik szól: ha olyan sablont szeretnének tervezni, amit a felhasználó később, a CSS ismerete nélkül is tud módosítani. Azaz kibővítjük a Blogger Személyre szabás menüjét pár általunk hozzáadott résszel.
Ez némi kódolást jelent, de semmi vész, a szintaxis nagyon egyszerű. Viszont az eredmény ilyen kis erőfeszítéshez képest hatalmas: lényegesen egyszerűbbé és gyorsabbá válik a blogdizájnok elkészítése. Mindez pedig utólag módosítható, így ha mégsem tetszik a szín vagy a betűtípus, pár kattintás változtatni, és nem kell a hex-kódokkal bajlódni.

CSS változók a Bloggerben

A Blogger rendelkezik egy saját sablonnyelvvel, ami alapszintű programozási képességeket igényel. Egyelőre ennek csak egy vetületét, a CSS-változókat fogjuk tárgyalni, később azonban szó lesz a többi technikáról is.
A CSS-változók használata stíluslapok írása esetén nem egyedi jelenség, a nyelv önmagában támogat ilyeneket, noha egyelőre kísérleti technológia (vagyis a hivatalos leírásban nem szerepel). Emiatt használatuk ritka, mivel nem minden böngésző támogatja (pl. az Internet Explorer egyáltalán nem, de a régebbi Chrome-ok vagy Firefox verziók sem). Tehát CSS-változókat nem Blogger-alapú honlapon is használhatunk a stíluslapok létrehozásához, csak vegyük figyelembe, hogy nem biztos, hogy a böngésző tudja értelmezni. Kissé más a használati körük, mint a Bloggerhez kötött stílus-változóknak, más a szintaxis is, ezért nem megyünk bele mélyebben a témába. Akit érdekel, olvasson utána ezen az oldalon.
A változók használata a programozási nyelvekben közönséges gyakorlat, azonban a leírónyelvekben – ilyen az eddig tanult és használt HTML vagy CSS is – maga a jelenség is ritka, a mögötte álló koncepció pedig elsőre furán hangozhat. A változók olyan szimbolikus nevek, amiket az egyes elemekhez rendelhetünk. Olyanok, mint a való életben a nevek: ha a kuytánkat Buksinak nevezzük, attól még az a kutya ugyanaz marad, de könnyebb rá hivatkozni. Nem kell mindig rámutatni, hogy "erről a kutyáról van szó", elég a nevén szólítani, és mindenki tudni fogja, miről beszélünk. Már persze azok, akik ismerik Bukist... ugyanígy, a változóknak is van egy értelmezési köre. Számítógép-közelibb hasonlat a fájlnevekre gondolnunk. Az adott fájlt elnevezzük, hogy később hivatkozhassunk rá, de ezt a nevet bármikor megváltoztathatjuk, attól a fájl változatlan marad. Viszont sokkal könnyebb "valami.exe"-ként hivatkozni egy programra, mint felsorolni az összes bitet, ami hozzá köthető.
Valami ilyesmi a változók használata is. Fogunk egy CSS-tulajdonságot, például egy színt. Legyen ez a kék. Adunk neki egy nevet, amivel később hivatkozhatunk rá, mondjuk "hatterszin". (Mivel CSS, ne használjunk ékezetes betűket.) Később, ha be kell állítanunk a háttérszínt, ne a kék szín RGB-kódját adjuk meg, hanem egyszerűen azt a nevet, amit korábban adtunk neki, nevezetesen azt, hogy "hatterszin". Hülyeségnek tűnik? Elsőre valóban, mert minek nevezzük el valamit fáradságos munkával, ha elég lenne a teljes értéket beírni? A színekre gyakran angol nevükkel is hovatkozhatunk, az sokkal kifejezőbb, mint holmi "hatterszin" és társai. Jó, de mi van, ha bonyolult tulajdonságról van szó? Például egy nem nevesíthető szín HSLA-kóddal, amit azért fejből nem mindenki jegyez meg. Másolás-beillesztés minden alkalommal, ha használni akarjuk? Oké, de tegyük fel, van egy hasonló, de jól megkülönböztethető szín szintúgy HSLA-kóddal! Ohó, biztosan nem keverjük össze egyszer sem? Akkor sem, ha legalább ötvenszer kell használnunk?
A Blogger esetében azonban nem csak ennyiről van szó. A "sima" CSS-változókhoz képest hatalmas különbség, hogy a Blogger stílus-változóinak használatával ezeket az értékeket a programozáshoz nem értő felhasználók is tudják változtatni a Személyre szabás menüben. Lényegében a Személyre szabás ilyen előre definiált változókból áll, amikez mi is hozzátehetjük a saját kódjainkat. Ennek a kényelemnek ára van: nem használhatjuk korlátlanul, minden tulajdonságra az ilyen változókat. Két fő formájuk van: a színek és a betűtípusok. Angolul itt olvashattok a használatukról.

CSS tagek létrehozása

Elsőként némi alapszíntű angoltudásra és egy kis bátorságra van szükségünk. A HTML-kód szerkesztése menüpontot fogjuk használni még mindig a Sablon menün belül. Mivel belenyúlunk a forráskódba, érdemes előbb egy biztonsági mentést készítenünk. Valahol a sok színes kód között, közel a lap tetejéhez, keressük meg azt a skin elemet. Ez általában egy sor <b:skin>...</b:skin> szöveggel, ahol ha rákattintunk a hárompontra, előjön a teljes kód, ami a két tag közé van zárva. Ez náha automatikusan megnyílik (pl. ha előtte megnyitottuk már), ilyenkor csak keressük meg a nyító taget. A Ctrl + F segítségünkre lehet.
Ne lepődjünk meg azon, hogy mennyire ronda az ott található kód, és csak nyomokban emlékeztet CSS-re. Görgessünk le, nézegessük egy kicsit. Ezt fogjuk kiegészíteni, nem lesz olyan nehéz. Elsőként vegyük észre, hogy <![CDATA[ kifejezéssel kezdődik, és a vége ]]>. Ezeket ne bántsuk, fontos elemek, de nekünk nem érdekesek. Az XML miatt vannak ott, a nagyon szemfüleseknek talán feltűnt, hogy az egész forráskód első sora <?xml-lel kezdődik. Ezért kellenek. Nekünk először a CSS-kód fölötti igen ronda részre kell koncentrálnunk, ami a kommentje tanúsága szerint változó definíciókat tartalmaz ("Variable definitions"). Az egyes sorok szokatlan HTML-tageknek tűnnek: ezek a CSS tagek a Bloggerben. Magát a változtatható tulajdonságot a Variable egyszerű tag kódolja (vigyázzunk, hogy rendesen le kell zárni!), a különféle tulajdonságokat pedig csoportosíthatjuk a Group tagek segítségével. Szemfülesek (és angoltudással rendelkezők) észrevehették, hogy az előre definiált csoportok angol leírásai a magyar nevekkel egyenértékűek: a Személyre szabás Speciális fülén találhatóak. Az első például a "Page Text", magyarul "Oldal szövege", és két CSS változó taget tartalmaz. A megfelelő beállításnál valóban két tulajdonságnak tudunk értéket adni: a betűtípusnak és a betűszínnek. Ezzel vissztértünk ahhoz, amit már mondtam: betűtípusokat és színeket állíthatunk be ezzel a módszerrel.
Minden, ebben a részben felsorolt változó megjelenik a Személyre szabás menüben. Ha kitörlünk egyet, mondjuk az említett "Page Text" változó-együttest, eltűnik a menüből is. Ha új értéket adunk hozzá, újabb elemek tulajdonságait tudjuk kontrollálni. Próbáljuk ki ezt! Persze törölhetnénk is egy értéket, ha nem szeretnénk, hogy a jövőben a felhasználók módosítani tudják (speciális sablonoknál ez jól jöhet, ha pl. kötött színsémával dolgozunk), de azt mindenkire rábízom (fordítva kell csak eljárni). Keressünk egy olyan elemet, ami minden blogon megtalálható (csak a gyakorlás kedvéért): legyen ez a bejegyzések háttere!
Az újólag hozzáadott tulajdonság-lapok a Speciális fülön fognak megjelenni, attól függően, hová szúrtuk be. Ha egyszerűen csak a CSS változó definíciók végére, akkor a végén. Egy kikötés van: a Mobile Button Color és a Stíluslap (CSS) hozzáadása minden esetben a legutolsó pont, így maximum hátulról a harmadik helyen jelenhet meg az új érték. (Ezeket kitörölni sem tudjuk.) Persze nem kell külön menüt felvennünk, kiegéstíhetnénk az egyik már meglévő pontot is egy újabb tulajdonsággal. Ilyenkor egy már meglévő Group elembe kell beszúrnunk az újabb Variable taget. Mi inkább készítünk új lapot is hozzá. Menjünk a CSS változó definíciók végére, keressük meg a kommentzáró */ jelet. (Ezek CSS kommentek, amiket felviszünk. Nem jelennek meg a tényleges CSS-ben, de a Blogger motorja tudja értelmezni őket.) Alatta lesz egy másik kommentek "Content" felirattal. Fontos, hogy a változó meghatározások kommenten belül maradjunk, különben nem fog működni a kód. Érdemes a legutolsó változó elem után ütni pár üres sort, hogy tudjuk, innentől a mi dolgaink jönnek. Egy megjegyzést is betehetünk, pl. "Own variables", és utána pár kötőjel, csillag, vagy ami tetszik. Első körben szükségünk lesz egy csoport-elemre, ezen belül pedig egy változóra. A kódunk így fog kinézni (beraktam a kezdő sort is):

**Own variables**
<Group>
  <Variable />
</Group>

Hogy valamit lássunk is a Személyre szabásban, nevet kell adnunk a csoportnak. Sajnos csak az alapértelmezett változókat fordítja automatikusan a Google, a többiről magunknak kell gondoskodnunk, így ha magyar szöveget szeretnénk, kénytelenek leszünk ékezetes betűket használni. Nem szép, nem is javasolt, de a modern böngészőknek meg kell birkóznia az UTF-8 karakterkódolással, szóval ne fájjon miatta a fejünk. (Maradhatunk az angolnál is, ha nemzetközi közönségnek szánjuk a sablont.) Adjunk egy nevet, legyen mondjuk "Bejegyzések héttere". Ezt a description attribútomban tudjuk beállítani. Ugyanígy a változónak is lehet egy neve, ami megjelenik a menüben, ez legyen "Bejegyzés háttérszín", hogy ne keverjük a lap nevével. Eddig a kód:

**Own variables**
<Group description="Bejegyzések háttere">
  <Variable description="Bejegyzés háttérszín" />
</Group>

Nem kötelező, de érdemes megadni, a blog melyik részére vonatkozzon a beállítás. Ez akkor hasznos, ha ugyanazt a nevet használjuk több elem tulajdonságaként, de a beállítások között csak egy bizonyos csoportot szeretnénk változtatni. Ez a selection attribútum, egy osztálynevet vár értékként (a vezető ponttal együtt). Ha a bejegyzések háttérszínét szeretnénk változtatni, ez az érték a .post-body lesz.
Magának a változónak kell adnunk egy nevet. A Blogger javaslata a pontozott angol nevek használata: mondjuk "post.background.color". Ezt fogjuk a kódban használni, ezen a néven fogunk az adott színre hivatkozni. (Ez a szín ugyebár folyton változik, hiszen a felhasználó változtathatja.) Nem összekeverendő a Személyre szabás menüben látható névvel! Az csak egy leírás, ez a név nem jelenik meg a forráskódon kívül. Az elem három további atrribútumot vár: az egyik a "type": ez lehet "color" vagy "font" érték. Nekünk jelen esetben az elsőre lesz szükségünk. Van egy alapértelmezés: "default", az értéke pedig általunk választott. Ha rákattintunk a "speciális módosítások törlése" linkre, ez fog visszaállni. Az utolsó attribútum a "value", vagyis az aktuális érték. Kezdetben érdemes az alapértelmezettet beállítani, ez fog később módosulni. A teljes kód eddig:

**Own variables**
<Group description="Bejegyzések háttere" selection=".post-body">
  <Variable name="post.background.color" description="Bejegyzés háttérszín" tpye="color" default="transparent" value="#ffffff" />
</Group>

Az attribútumok sorrendje nem kötött. A "transparent" kifejezés az átlátszóságot takarja, de ha konkrét színt adnánk meg, a hatjegyű hex-kóddal kell, ahogy a "value" értékénel is tettem. Végeztünk? Nem, egy utolsó simítás van: be kell állítanunk a változót, hogy mire hivatkozzon. Csak definiáltuk, de nem használtuk.
A használata egyszerű, menjünk a skin elem végére, ahol a sima CSS kódok találhatóak. Akár a már meglévő (vagy általunk korábban hozzáadott) stílusokat is átírhatjuk, vagy felvihetünk újabb stílusdeklarációt. Jelenleg a .post-body kiválasztót kell megkeresnünk (létezik ilyen), és adjunk hozzá egy újabb tulajdonságot: background-color; értéke pedig az előzőkben létrehozott változó neve (name> attribútum értéke) lesz a következő alakban: $(name). Azaz a kódunk így fog kinézni:

.post-body {
  /* ... */
  background-color: $(post.background.color);
}

Vannak további tulajdonságok, azokat nem írtam ki, ennyi a lényeg. Ezt akár külön is beírhatjuk a CSS kód végére. Itt a névhivatkozásnál nem kellenek az idézőjelek, csak a változó létrehozásánál. És... ennyi! Menjünk a Személyre szabás menühöz, keressük meg az új lapot, nézzük meg, hogy tudjuk változtatni az értékeket! A bejegyzések háttere automatikusan változik, ha a "resetet" nyomjuk, visszaáll alapértelmezettre. Létrehoztunk egy új, könnyen változtatható tulajdonságot!
Játszhatunk más tulajdonságokkal is, például az iniciálé cikkben létrehozott különleges első betű színét is beállíthatjuk. Mivel az is a .post-body osztályon belül található, akár a fentebb létrehozott csoporton belül is elkészíthetjük az új CSS változót ahhoz a színhez-betűtípushoz. Ezt csak egy példán mutatom meg, a betűtípus meghatározás az előzőekhez hasonló:

<Group description="Bejegyzések" selection=".post-body">
 <Variable name="post.background.color" description="Bejegyzés háttérszíne" type="color" default="transparent"  value="transparent"/>
 <Variable name="post.first.letter.color" description="Első betű szín" type="color" default="#ff0000"  value="#ff0000"/>
 <Variable name="post.first.letter.font" description="Első betű típus" type="font" default="2em Lobster, cursive" value="2em Lobster, cursive"/>
</Group>

(a CSS kódban a végén)
.post-body::first-letter, .post-body div:first-child::first-letter {
 color: $(post.first.letter.color);
 font: $(post.first.letter.font);
 text-shadow: 1px 3px black;
}

Összefoglalás

A Blogger lehetőséget biztosít nekünk egyéni CSS változók használatára, melyek segítségével a CSS kódunk átláthatóbb és flexibilisebb lesz. Ezek használatával később a programozáshoz nem értők is módosítani tudják a sablonjaink egyes részeit a Személyre szabás menüben a Blogger biztosította alapokon kívül. A lehetőségeink, ha nem is végtelenek, de rendkívül számosak. Éljünk vele bátran!