2014. január 25., szombat

A bejegyzés címének formázása

Üdv!

Beth kérésére leírom azt a kódot, amivel a bejegyzés címét formázhatjátok. Szerepelni fog az is a kódban, hogyan lehet középre állítani a szöveget. Mielőtt azonban még belekezdenék a magyarázásba, szeretném elmondani, hogy nyugodtan kérhettek kódokat is. Főként azokkal tudok szolgálni, amiket én is használok, de frissíteni a tudásunkat sose árt, igaz?
Nos, akkor kezdjünk is bele:

.post-title {
text-align: center;
background-color: #e4e4e4;
height: auto; 
line-height: 20px; 
padding-bottom: 5px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 5px; 
width: auto;
}

h3.post-title, .comments h4 {
text-align:center;
}

Azért írok kettőt is, mert a másodikat ezen a blogon használjuk, míg az elsőt én az egyik sajátomon. A kettő között annyi a különbség, hogy az első - amellett, hogy jóval több benne a formázás -, egyedül csak a bejegyzés címére szól, míg a második a kommentek felett látható szövegre is szól.
Most pedig akkor menjünk sorba, hogy mi miről szól:
  • text-align: ezzel a szöveget tudod igazítani. Ide írhatod még a right (jobb, vagy a left (bal) szót. Illetve minden bizonnyal a justify (sorkizárt) szót is, bár szerintem ez igazán nem előnyös megoldás itt.
  • background-color: ezzel a szöveg háttérszínét tudod beállítani. Ha nem szeretnéd, hogy legyen háttere, akkor egyszerűen csak töröld ki a kettőspont utáni részt. Nos, a többi már csak akkor érdekes, ha ezt meghagyod és választasz valamilyen színt.
  • height: ez a magasságát jelenti. Nekem ebben a kódban azért van auto-n, mert ezt a kódot használom a dátumfejléc és az oldalmodulok címének formázásához is. Azt pedig szerintem már néhányan észrevettétek, hogy amikor ezt állítjátok be, akkor a bejegyzésen belül "Cím" típusra állított szövegeket is ekkor formázod, itt pedig szükség lehet az auto-ra.
  • line-height: ez a sor magassága. Az oldalsávban a modulok címéhez fontos.
  • padding: ezekkel a részekkel tudod beállítani, hogy a szöveg körül mennyivel legyen a háttér magassága. Ez így elég hülyén hangzik, de ha leírom, hogy mi mit jelent, érthetőbb lesz. A right és a left, a jobb és a bal oldali széleket jelenti. Mivel itt ugye elég rövid a szövegünk, nem fog végig érni a csíkon, nyugodtan írhatjuk 0-nak ezt az értéket. A top (felül) és a bottom (alul) már sokkal fontosabb. Korábban, amíg erre nem bukkantam rá, nagyon zavart, hogy a betű teteje és alja teljesen egy csíkban van a háttérrel, de így már meg tudtam oldani, hogy túlérjen a háttér, ami szerintem sokkal esztétikusabb.
  • width: ez a szélessége lenne. Nálam azért található itt is auto, hogy az egész post szélességét lefedje. Természetesen be lehet írni valamilyen értéket (pl: 240px; a pontos vesszőt tegyétek mindig a sor végére, máskülönben nem lesz érvényes a kód), ami meghatározza, hogy milyen hosszú legyen ez a csík.
Korábban még a kódban benne volt az a rész is, hogy hogyan tudunk árnyékot állítani, illetve még rengeteg más formázási lehetőséget lehetne hozzá adni, amikre azonban nekem személy szerint nincs szükségem. Persze, ha valaki igényt tart további kód részletekre, akkor nyugodtan írja meg, hogy mit szeretne tudni és én utána keresek. Remélem, tudtam segíteni?!
A kódok nem sajátok!

Üdv,
Catalina

2 megjegyzés: