Címek személyre szabása az oldalsávban 1. rész

Amikor elkezdtem írni ezt a bejegyzést, úgy gondoltam, hogy bele fog férni egy bejegyzésbe. Aztán ahogy írtam, észrevettem, hogy ha mindent le szeretnék írni, akkor egy nagyon nagyon hosszú és unalmas bejegyzés lesz a vége - igaz így is hosszú lett -, ezért két részre szedtem. Az első részben leírom, hogy hogyan lehet hátteret, keretet adni az oldalsáv címeinek, majd a második részben pedig a szöveget formázását mutatom meg.

Figyelem! Ne riasszanak el senkit sem a most következő bonyolult "szakszavaknak" tűnő megfogalmazások, ne higgye azt senki sem, hogy ő úgysem fogja tudni ezt megcsinálni, mert én sem értettem hozzá, a mai napig nem vagyok tisztában én sem a fogalmakkal, de keresni tudok a kódok közt és ha szépen le van írva, hogy mit mire kell kicserélni, illetve mit hova kell beilleszteni, akkor meg tudom csinálni :) 

Az első és legfontosabb dolog, hogy mielőtt bármibe is belefogunk, mentsük le a sablonunkat, mert ha valami nem úgy sül el, ahogy azt szeretnénk, akkor vissza tudjuk tölteni az előző sablonunkat :) Ezt a Tervezőben, a Sablon menüpont alatt a jobb felső sarokban található Biztonsági mentés/Visszaállítás menüpont (gomb) segítségével tudjuk megtenni. VAGY, hozzunk létre egy másik blogot, amit az ilyen esetekre pl. formázás, új sablonok kipróbálása, stb. használhatunk. Állítsuk be, hogy privát legyen, így csak mi láthatjuk. Én is így tettem, átexportáltam a Pillecukor összes bejegyzését oda, és úgy formáztam, mintha csak az eredeti blogomon munkálkodtam volna :) Majd amikor elkészültem, letöltöttem azt a sablont és feltöltöttem a Pillecukor sablonja helyett. 

Szóval a MENTÉS NAGYON FONTOS! ;) 

Ha elmentettük, a Sablon menüpontban válasszuk a HTML-kód szerkesztését (még most is, ha valahányszor ide kell belépnem, mindig megremeg a kezem attól tartva, hogy elrontok valamit :D).

Ahhoz, hogy személyre szabhassuk a sablonunkat - itt főleg a külsőre gondolok -, a CSS stíluslapok közt kell elmerülnünk egy kicsit. Ezt a blog sablonjában a <b:skin> alatt kell keresni, az egész kék színnel van megírva. Ez tartalmazza a blogunk összes stílusjegyét, e kódok szerint néz ki úgy a blogunk, ahogy kinéz. 

Ahogy a cím is mutatja, most csak az oldalsávval fogunk foglalkozni. A Goggle segítségével találtam néhány oldalt, ahol szépen leírják, hogy hogyan is megy ez az egész. Aham, de mi van akkor, ha az én sablonom (Képablak, de a Simple-nél sem találtam meg) nem tartalmazza azt a kódrészletet, amit át kellene alakítani? Az első kétségbeesés után addig keresgéltem, míg nem találtam meg erre is a megoldást, szerencsére a Google mindig a jóbarátom :) 

Az oldalsáv kódja így kezdődik: .sidebar h2 { vagy .sidebar .widget h2 { . Honnan tudjuk, hogy megtalálható-e ez a kódrészlet a sablonunkban? Hát így: 

Nyissuk le a kis fekete háromszöget a <b:skin> soránál. Ekkor meglátjuk a fentebb említett CSS stíluslapokat, jól le kell görgetni, mire a végére érünk (csak a kékkel írott rész az) :)) De most NE görgessünk le :) 

Valahova kattintsunk be a kódok közé, de ne nyomjunk meg semmilyen betűt sem! A CTRL+F billentyűkombinációval hívjuk elő a keresőt, ami a kódmezőben a jobb felső sarokban fog megjelenni. Írjuk be, hogy .sidebar majd nyomjunk egy ENTER-t. Ha benne van a sablonban, akkor egyből odafog ugrani (akkor jó, ha a kék részben van), a képen nekem MÁR benne van. Ha nincs, akkor vagy elkezd villogni a kurzor benn a kódmezőben (általában ott, ahova tetszőlegesen odakattintottunk), vagy pedig talál egy másik sidebar kódrészletet, de az nekünk nem lesz jó, hiszen nem a stíluslapok közt van. Ha nincs benne, akkor se essünk kétségbe, majd mi betesszük :) 

(Ha benne van a kód, akkor a következők segíteni fognak abban, hogy mit is kell megváltoztatnunk, hogy olyan legyen, amilyennek mi szeretnénk.)

Használjuk ismét a keresőt és pötyögjük be a következőt: ]]></b:skin> . A képen besatíroztam kékkel. Ez elé a kód ELÉ kell beírnunk a következő kódrészletet:

.sidebar .widget h2 { 

line-height:1em; 

}

Ez az alap kód, a továbbiakban ehhez kell hozzáadni a stíluskódokat, a színekkel mindig az aktuális részt jelöltem ki.

1. Háttér (background)

Ha szeretnénk neki egy hátteret adni, akkor így kell kinéznie a kódrészletnek. A színt mi magunk választhatjuk ki, én INNEN szoktam puskázni a hexa kódokat. 

.sidebar .widget h2 { 

line-height:1em; 

background:#E17820; 

}

2. Keret (border)

A keretnél több mindent beállíthatunk, attól függően, hogy hogy szeretnénk, ha kinézne. (ez értelmes volt így? :D) 

Ha keretet is adunk neki, akkor így néz ki a kódunk:  

.sidebar .widget h2 { 

line-height:1em; 

background:#E17820; 

border:1px solid #000000; 

}

Ezekből áll, s az alábbi módokon lehet rajta változtatni: 

1. 1px: ez a vonalvastagságot jelöli, minél nagyobb a szám, annál vastagabb lesz

2. solid: ez a vonal stílusa, jelen esetben ez a sima, egyenes vonal. További stílusok (a solid helyére ezeket kell beírni):

- dotted: pontozott keret

- dashed: szaggatott vonalas keret

- double: dupla vonalas keret

Ez csak néhány, általában ezek a megszokottak. 

3. #000000: ez pedig a keret színe, ezt is lecserélhetjük az általunk kiválasztott színre. 

Ha nem szeretnénk, hogy az egész cím be legyen keretezve, akkor megcsinálhatjuk úgy is, hogy pl. csak az egyik oldala legyen látható.

- border-bottom: csak az alsó vonal látszódik

- border-top: csak a felső vonal látszódik

- border-left: csak a bal vonal látszódik

- border-right: csak a jobb vonal látszódik

Nálam így néz ki ez a sor: border-bottom: 2px dashed #ee3430;

Ha ezzel megvagyunk, menjünk a Sablon előnézete gombra, ahol leellenőrizhetjük, hogy sikerült-e megformázni úgy, ahogy szerettük volna. Ha sikerült, akkor mentsük el a sablonunkat és készen vagyunk. 

Remélem nem volt túl bonyolult eddig és bízom benne, hogy legközelebb is velem tartatok, hamarosan jövök a következő résszel is :)