wtorek, 28 maja 2013

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 ;))

2 komentarze:

  1. O boru, chyba dzięki Twoim instrukcją zaczynam ogarniać o co chodzi w tym pokręconym blogspotowym światku szablonowym!:D Na onecie dawało się obrazek, przyciemniało, cudowało delikatnie, a tutaj... CSS:o W każdym razie sądzę, że w niedługim czasie spróbuję stworzyć coś sama, czy raczej wspierając się o Twoje tutoriale!:) Wykonujesz kawał świetnej roboty, trzymaj się ciepło!:D

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo, bardzo mi miło czytać właśnie takie słowa. I tak, powiedzmy, że jeszcze coś mi świta z onetowego światka. Było fajnie, i powiem szczerze, że byłam osobą która nawet nie przyciemniała tylko wrzucała obrazek i ustawiała kolorki :) No mam nadzieję, że niedługo sama coś stworzysz, ale uprzedzam jak człowiek się zacznie w to bawić to naprawdę ciężko jest przestać :)

      Usuń

- +
Szablon wykonany przez Tyler