Dostosowywanie szablonu - krok 4 - detale

Detale to nic innego jak tło, różnego rodzaju tekst, linki czy zdjęcia na blogu. Mimo, że ich wartość jest nico mniejsza niż wszystko inne, bez nich ani rusz o harmonie na blogu.

<tło>

tło - definiujemy je w selektorze body, czyli:

body { background-color: #eef0ef; background-image: url(http://25.media.tumblr.com/tumblr_lzju29VxIR1r9g6hvo2_100.png); background-repeat:repeat; background-attachment: fixed;}

• background-color: kolor tła;
• background-image: obrazek w tle;
• background-repeat: określenie powtarzalności tła; repeat - czyli powtarzanie poziomie i pionowe; repeat-x - powtarzanie poziome; repeat-y - powtarzanie pionowe;
• background-attachment: swego rodzaju "przywiązanie" tła. Może być albo fixed - czyli ruszające się wraz z blogiem lub absolute - czyli zostające na swoim miejscu;

<rodzaje tekstu>

W kroku pierwszym mówiliśmy o dostosowywaniu poszczególnych rodzajów tekstu. Jest to raczej rzecz prosta i krótka, ale właśnie należy ona do detali, a to na nich dzisiaj skupiamy uwagę.

b, strong { font-family: trebuchet ms; color: #b5b2e1; text-transform: lowercase; }
i, em { letter-spacing: 1px; color: #777; }
s, strike { color: #CCCCCC; }
u { border-bottom: 1px dashed #eef2f1; text-decoration: none;color:#444; }

<linki>

Proste? I to jeszcze jak. Kolejną rzeczą bez której się nie obędzie są linki.
a:link, a:active, a:visited { color: #bcabd7; text-decoration: none; }
a:hover { color: #b5cfe0; text-decoration: none; }

W kodzie podane są one raczej oddzielnie, ale osobiście uważam ze zeszłoby z tym troszkę za dużo roboty. Jednak istnieją dane efekty dla których się nie obędzie bez rozdzielania tej trójki wyżej.

<obrazki>

Obrazki raczej prezentują się albo w gadżetach albo w poście, a więc powiemy trochę o tym i o tamtym. 

.post-outer img: obrazek w poście;
.sidebar .widget img: obrazek w gadżecie;

No dobra, ale co kiedy ja chce, aby mój obrazek po najechaniu myszką miał takie, a nie inne obramowanie. A no to drodzy państwo nic łatwiejszego.

.post-outer img:hover: hover dla obrazka w poście;
.sidebar .widget img:hover: hover dla obrazka w gadżecie

</blogitembody> 

No musicie przyznać, że specjalnie trudno zrobić szablon nie jest. Oczywiście jest to tylko baza, ale zawsze coś. Tak naprawdę dużo większą role odgrywa ta chora wyobraźnia, pomysł, a także wiele innych czynników, które działają na Was gdy siedzicie z głową w komputerach. :) W szablonach także wykorzystuje przede wszystkim instrukcje, które pojawiają się na blogu. No nie wszystkie, ale zawsze dodając szablon staram się, aby była o tym gadżecie czy tamtym efekcie instrukcja na blogu. ( na wszystkie jeszcze przyjdzie czas ;))