Dostosowywanie szablonu - krok 1 - selektory

Początkowo byłam za nazwą "Zbudować szablon", jednak potem stwierdziłam, że to wygląda tak jak byśmy robili szablon od podstaw, a tego nie robimy, więc dumnie i imiennie było "Szablon według Tyler", ale wyglądało to bardzo egoistycznie i w ogóle jakoś nie ładnie. Trzecia propozycja "Anatomia szablonu" była nijaka, a poza tym za dużo biologii jest niekorzystne dla naszego mózgu, aż w końcu dotarłam do pewnej angielskiej nazwy "customize your layout" i postanowiłam -oczywiście kierując się tym zacnym tytułem- nazwać tak cykl o szablonie, oczywiście odpowiednio wcześniej spolszczając nazwę, a także usuwając "your", co według mnie brzmiało zbyt nachalnie. Chociaż przyznam, że po polsku - co jak co - ale brzmi to trochę nieładnie.

<$BlogItemBody$>

 Wchodząc w edycje kodu HTML na blogu, naszym oczom pojawia się masa literek, które włażą jedno na drugie i krzyczą, abyśmy się wynosili i pobawili się w projektancie. Te małe stworki jednak straszą nas niepotrzebnie, tak naprawdę da się z nimi zaprzyjaźnić, a po pewnym czasie nawet pokażą Ci liczne sposoby, które ułatwią nam edycje naszego kodu. 

Na koniec wstępu pragnę dodać, że raczej jest to post mało użyteczny dla osób z doświadczeniem w tworzeniu szablonów. Zdaję sobie sprawę, że większość grafików czy autorów stron na bloggerze wie jak się obsługiwać kodem i robi to genialnie, ale co chwila na blogspota dołączają nowe osoby i myślę tu przede wszystkim o nich. 

Jeśli faktycznie chcemy się nauczyć operować w minimalnym stopniu edycją kodu proponuję usunąć przynajmniej fragment:

od

/* Variable definitions

   ====================

do

   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

*/

Fragment ten odpowiada wprowadzaniu zmian w projektancie szablonów, ale my go nie potrzebujemy, bo wszystkie zmiany ( swoją drogą za pomocą CSS'a ) wprowadzimy w dalszej edycji.

Jeśli jednak jesteś nieco bardziej zaawansowany możesz spróbować usunąć cały bazowy kod CSS wybranego szablonu lub pobrać plik przygotowany przeze mnie ( jest to szablon Simple ze zresetowanym kodem CSS)

W kodzie bazowym mamy ogromne ilości selektorów potrzebnych nam w dostosowywaniu naszego bloga... Co ja gadam, większość z nich jest po prostu nieużyteczna, chociaż wszystko zależy od tego co tak naprawdę chcemy stworzyć i co na naszym blogu ma się znaleźć. 

body { Jest do selektor, którego po prostu nie może zabraknąć; ustawiamy w nim tło bloga, czcionkę podstawową i jej kolor, ewentualne marginesy. Uchodzi za swego rodzaju bazę do naszej dalszej pracy;}

a:link,a:active,a:visited  { Proste, ale ważne. Dostosowywanie koloru, czcionki, dekoracji dla linków ogólnych, aktywnych i tych odwiedzonych. W podstawowym szablonie bloggera selektory występują osobno, ale jest to niekoniecznie;}
a:hover { Wszystko co się ma dziać po najeździe myszką na link;}

 Możemy także dostosowywać tekst pogrubiony, pochyły, podkreślony i skreślony. 

b, strong { tekst pogrubiony; }
i, em { tekst pochylony }
s, strike { tekst przekreślony }
u {tekst podkreślony}

.content-inner { obejmuje wszystko co na blogu, czyli post, kolumny, tytuł itp;}
.main-inner { dotyczy kolumny środkowej i pobocznych, ale bez tytułu bloga! Jeśli dodamy tło czy obramowanie efekt pojawi nam się ( w przypadku układu kolumna środkowa + prawa ) dla obu kolumn razem;}

.header-inner .section { ewentualne tło i inne związane z tytułem;}
.Header h1 { Jeśli chcemy mieć tytuł, jego właściwości wpisujemy tutaj;}
.Header .description { Opis bloga, w przypadku jego użycia, tekst dostosowujemy pod takim selektorem;}  

 .main-inner .date-outer {. Odpowiada on za post, czyli jego tło, marginesy, padding. Użycie tego ostatniego w tym przypadku jest konieczne. Jest jednym z wielu selektorów dotyczących posta, którego raczej nie używam;}

.tabs-inner { Karty na górze, selektor dość popularny, jednak chcąc ciekawszych wersji "menu" nie polecam. Proponuje wówczas zajrzeć tu;}

h2 { czyli tytuł naszego widgetu ( gadżetu ). Selektor może w tym przypadku może przyjmować również postacie : .sidebar .widget h2 - wówczas tytuł będzie przyjmować dany wygląd tylko w kolumnach bocznych lub .main-inner .widget h2 - efekt pojawi się wszędzie oprócz gadżetów w footerze ( stopce );}

.main-inner .column-center-inner { kolumna środkowa bez wyróżniania postu; możliwości zamienna: .main-inner .column-center-inner .section;}

.main-inner .column-right-inner, .main-inner .column-left-inner { dostosowywanie kolumn pobocznych bez wyróżniania oddzielnych gadżetów; }

.widget-content { gadżet bez tytułu, określa nam całą zawartość }
.main-inner .widget { nie mogłam się tego dopatrzeć w kodzie za pomocą którego tworzyłam ten post, ale takie coś jest i mówi nam o efekcie dla pojedynczego gadżetu wraz z jego tytułem, użytego jednak na wszystkich na blogu :);}
.sidebar .widget { efekt dla tego selektora pojawi się tylko w gadżetach w bocznych kolumnach;}

h3.post-title, h3.post-title a { tytuł naszego postu;}

h3.post-title a:hover { hover tytułu naszego postu; }

.post-outer {odnosi się do postu, ale zahacza też o jego tytuł, datę, etykiety itp.'}
.post-outer img{ustawienia obrazka występującego w poście, przeważnie ustawia się tutaj jego maksymalną szerokość}

.post-body { nasz post z wyłączeniem tytułu i daty, etykiet; tylko zawartość postu. }

.post-header { odnosi się do autora, daty, komentarzy pod/lub nad postem; }

.post-footer { stopka posta;}

#blog-pager { najczęściej przeze mnie nie używany, jednak odpowiada za poprzedni, następny post i home;}

.post-labels { etykiety w poście;}

blockquote { jeśli chcemy mieć ciut bardziej finezyjny i rzucający się w oczy cytat w poście, ten selektor Wam w tym pomoże;}

</$BlogItemBody$>

 Przepraszam Was za brak selektorów związanych z komentarzami, lubuję się w wyskakującym okienku i zwyczajnie tego nie używam. 
Większość selektorów jest ułożona grupowo, chociaż nie wiem czy dostrzeżecie. 
Krok bazowy w dalszym tworzeniu szablonów, chociaż nie kazałam Wam jeszcze usuwać wszystkich selektorów i projektanta razem, ale niedługo to się stanie, nie ma zmiłuj. Zamierzam Was tego oduczyć, ale się zobaczy co wyjdzie. :)

Tym sposobem przeprowadziliśmy ostrą segregacje wszystkiego co jest w naszym kodzie. Oczywiście te ustawienia są "umowne", to znaczy, że ingerując w kod HTML naszego bloga bez problemu możemy je zmieniać, ale o tym -jak zwykle- przy kolejnej okazji.

<info>
Cały cykl "Dostosowywanie szablonu" będzie obejmował ok. 4 postów razem z tym powyższym, jednak przewiduje, że całość cyklu zobaczycie nie później niż za półtora tygodnia. Jest to lekki temat, nie zawierający bajecznie trudnych rzeczy, gdyż zamierzam tutaj przedstawić po prostu mój schemat wykonywania szablonów, który za bardzo skomplikowany nie uchodzi.
Krok 2 - sidebar; wszystko nie tylko o kolumnach bocznych, ale przede wszystkim o gadżetach; jakich selektorów użyć, aby otrzymać dany efekt;
Krok 3 - post; chyba najkrótszy krok z planowanych; specjalnie trudno i męcząco nie będzie;
Krok 4 - detale; wszystkie rodzaje tekstów, linków, cytaty, tła, czyli pozostałości po tym co wcześniej; ale nie radzę lekceważyć tego kroku, od niego zależy wygląd całości.
</info>