O szablonach, ich projektowaniu i moich z tym zmaganiach...
poniedziałek, 25 lutego 2013

Dawno nie było tu wpisu o szablonie dedykowanym. Nie dlatego, że już takich nie robię, wprost przeciwnie z chęcią przyjmuję propozycje współpracy, szczególnie takie, które wymagają ode mnie więcej niż jestem przekonana że potrafię. To jednak wymaga zaufania - nie każdy zdecyduje się kupić kota w worku a i ja nie każdemu mojego kota będę gotowa powierzyć...

Blogerzy Dla Korczaka - blog prezentujący rezultaty konkursu

Nie o kotach w worku jednak dzisiaj. Dzisiejszy wpis jest o szablonie, który uporządkowałam dla Danusi z bloga Książki Zbójeckie. Danusia zorganizowała w zeszłym roku wspaniały konkurs: Blogerzy dla Korczaka. Udało jej się coś niesamowitego, coś co moim zdaniem trochę wykracza poza granice naszych przyzwyczajeń i oczekiwań. Zorganizowała konkurs, pozyskała sponsorów, wsparcie patronów honorowych, poświęciła temu projektowi sporo czasu i uwagi.

 

Chociaż nie brałam udziału w konkursie i nie reklamowałam go w trakcie trwania to chciałam wesprzeć jakoś pomysł. Gdy Danusia poprosiła mnie abym zerknęła na blog konkursowy i sprawdziła szablon bo po zmianach coś tam nie jest tak równo jak autorka by chciała to oczywiście zgodziłam się. Zerknęłam i przypomniał mi się plakat konkursu. Pomyślałam, że bardzo łatwo będzie powtórzyć wygląd z plakatu na blogu. A że miałam od Danusi zupełnie wolną rękę jeżeli chodzi o zmiany to dwa dni później szablon niewiele miał wspólnego z Kubrickiem.

szczegóły szablonu Blogerzy Dla Korczaka

Motyw przewodni

Zarówno zdjęcie Korczaka jak i tło dookoła bloga było już w szablonie. Etykiety laureatów również były już stworzone i dodane w notkach. Istniał też plakat w informujący o konkursie. Postanowiłam podążyć tym tropem i pozmieniać elementy szablonu tak aby wyglądały jak te na plakacie. Nie było to wcale trudne bo plakat wykorzystuje tylko kilka charakterystycznych rzeczy: afiszowy krój, pomarańczowo szara kolorystyka, ziarniste papierowe tło, duże zdjęcie...

Krój (czcionka/font)

Jeden z najpowszechniejszych afiszowych krojów: Impact. Jest to krój posiadający bardzo grube kreski, wąskie światła między literami i oczka samych liter, dużą wysokość-x, czyli wysokość małych liter (nie posiadających wydłużeń), sięga ona nawet 3/4 wysokości pisma. Wydłużenia górne i dolne są niewielkie a krój przeznaczony jest w zasadzie wyłącznie do nagłówków. I w takim właśnie celu pojawił się w szablonie bloga Blogerzy dla Korczaka.

#BlogTytulText,
#BlogKategorie, #SkomentujBoxEtykieta, #BlogWpisPoprzedniNastepnyBox,
#BlogKategorieWybranaTytul,
.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul,
.BlogWpisTresc h3, .TrescKomentowanegoWpisu h3, .WstepKomentowanegoWpisu h3, #StatycznaZawartosc h3,
.BlogWpisTresc h4, .TrescKomentowanegoWpisu h4, .WstepKomentowanegoWpisu h4, #StatycznaZawartosc h4,
.IPTkategoria, .IPTkomentuj, #PolecWpisStrKom, .SkomentujDodajKomentarzLink, .SkomentujDodajKomentarzLinkPodLista,
#ArchiwumTytul, #BlogAutorzyTytul, #BlogTytulBoxaOstatnichWpisow, .TytulFolderaZakladek, #BlogChmuraTagowTytul,
#SkomentujTytListyKomentarzy, #SkomentujTytListyTrackBack,
#BlogStronicowanieBox {
 font-family:Impact, Corbel, Arial, sans-serif;
}

To są wszystkie miejsca w których krój Impact pojawia się w tym szablonie. To co kto uzna za etykietę tytułową jest trochę rzeczą względną i zależną od otoczenia w jakim się pojawi. W moim pomyśle to były właśnie etykiety wymagające solidnego wyróżnienia.

Kolorystyka

Pomarańczowy i pełna skala szarości pochodzą z plakatu. Bordowy pojawił się na etykietkach laureatów i w tle bloga. Z tła pochodzą też odcienie brązu.

paleta kolorów z bloga Blogerzy dla Korczaka

  • #ae1609 - bordowa czerwień została wykorzystana do wyróżnienia linków: tytuły notek, kategorie, linki w tekście, 'dodaj komentarze'...
  • #e57200 - pomarańczowy pojawia się jako tło etykiet w wąskiej szpalcie a także jako :hover linków (zmiana koloru po najechaniu na link kursorem); jest to także kolor separatora
  • #a65504 - jasny brąz pojawia się tylko raz, jako kolor tła w sytuacji gdy grafika nie zostanie wczytana
  • #8b4000 - brązowe są cytaty zarówno te blokowe jak i zagnieżdżone w tekście; także część śródtytułów (h4) ma kolor brązowy
  • #000000 - czarny pojawia się sporadycznie, jest pod zdjęciem Korczaka, wyróżnia wybraną kategorię wpisów a także metryczkę autora notki konkursowej (nazwę autora i bloga)
  • #333333 - ciemny szary to podstawowy kolor tekstu (czarny bywa czasem zbyt jaskrawy dla tekstu treści, w przeszłości było to szczególnie męczące)
  • #cccccc - jasny szary pojawia się w postaci kreseczki pod metryczką we wpisie a także nad i pod tagami na stronie z pojedynczym wpisem i w komentarzach
  • #ffffff - biały jest kolorem tła tekstu a także tekstów na pomarańczowym czy szarym tle (etykiety w wąskiej szpalcie, tytuł bloga)

Ilustracje użyte w tle

Jak już wspomniałam ilustracje na blogu już były. Zdjęcie Korczaka powiększyłam tylko o ziarniste tło aby tytuł bloga nie wylądował na brodzie Doktora. Tło w body natomiast jest jednym dużym, nieruchomym plikiem graficznym.

Szczegóły i drobiazgi

Chociaż o wyrazistości szablonu decydują właśnie wyżej wspomniane elementy: afiszowa czcionka, wyraziste kolory, konkretne grafiki to jest też w nim dużo szczegółów i drobiazgów, które sprawiają że całość się klei i gra.

Szczegóły związane są już bezpośrednio z blogiem i treściami na nim publikowanymi. Mogą pasować na wielu innych blogach ale trudno mi decydować się na takie rozwiązania w ogólnodostępnych szablonach.

Informacje pod notką (IPT)

W szablonach na starym kodzie informacje pod notką składają się z: czasu publikacji notki, loginu autora, który dodał notkę na blogu, nazwy kategorii będącej linkiem, słowa link przenoszącego do strony z pojedyncza notką i frazy dodaj komentarz przenoszącej odpowiednio na stronę komentowania albo stronę z komentarzami. Dodatkowo są jeszcze opcjonalne trzy elementy: lista tagów, link więcej gdy notka podzielona jest na wstęp i treść i link do części TrackBack jeżeli jest włączona i został dodany TrackBack.

Tego jak ukrywać niemile widziane elementy IPT nauczyła mnie lata temu Irytek i niewiele więcej w tej sprawie trzeba wiedzieć. Trzeba tylko mieć prosty pomysł.

IPT bloga Blogerzy dla korczaka

Wykonanie też jest całkiem proste tylko wymaga trochę więcej literek niż w słowie 'proste'.

.BlogWpisInfo {
 clear:both;
 margin:2em 0;
 text-align:center;
 color:#fff;
}
.BlogWpisInfo br, .IPTczas, .IPTautor, .IPTlinkuj , .infoTagi {
 display:none;
}
.IPTkategoria, .IPTkomentuj {
 padding:0 1em 0 0;
 font:1.4em Impact, sans-serif;
}
.facebook-like {
 margin:1em 0;
}

Najważniejsze jest display:none; które ukrywa niechciane elementy: godzinę, login, słowo link, tagi. Zostają teraz już tylko nazwa kategorii (jeżeli kategoria jest dodana),  link dodaj-komentarza i przecinki które rozdzielały schowane już elementy. Przecinki łatwo schować dodając całemu elementowi kolor tła. Nieschowane linki i tak będą widoczne bo linki mają kolor osobno opisany. Zostaje teraz już tylko zadbać o odpowiednie odstępy i wielkość linków.

To IPT (informacje pod tekstem, info) na stronie głównej. Na stronie z pojedynczą notką pojawiają się inne elementy i inaczej należy je opisywać. Porównaj część informacyjną na stronie głównej i stronie z pojedynczą notką: Jednolity wygląd wpisów (strony statycznie nie mają żadnego info).

Metryczka we wpisie

To jedna z tych bardzo specyficznych rzeczy. Po pierwsze trzeba znaleźć jakiś sposób na wyróżnienie kodu metryczki. Ze względu na treść metryczki i konieczną prostotę rozwiązania wybrałam nagłówek piątego stopnia (h5). Zazwyczaj w notce na blogu wystarczą dwa stopnie śródtytułów więc spokojnie mogę wykorzystać h5 do własnych celów. Śródtytuły łatwo dodawać bo w edytorze jest do tego celu specjalne menu. U siebie na blogu do takiego wyróżnienia zazwyczaj używam odpowiednich klas (nie zawsze informacje wyróżnione są ważniejsze niż treść a do tego przydatne są różne sposoby wyróżnienia).

h5 z bloga Blogerzy dla Korczaka

Dysponując możliwością wskazania konkretnego tekstu (tutaj metryczki) mogę w szablonie zdecydować o jego wyglądzie. Ze względu na centrowanie tytułów stworzyłam wyśrodkowany element używający większego rozmiaru tekstu, ciemniejszego koloru, sporej pustej przestrzeni dookoła i jasnej kreseczki nawiązującej do innych rozdzielaczy na blogu.

.BlogWpisTresc h5, .TrescKomentowanegoWpisu h5, .WstepKomentowanegoWpisu h5, #StatycznaZawartosc h5 {
 margin:1em 2em;
 padding:1em 0;
 text-align:center;
 font-weight:normal;
 font-size:1.2em;
 color:#000;
 border-bottom:2px solid #ccc;
}

Ilustracje w notce

W miarę upływu czasu coraz mniej chętnie opisuję wygląd ilustracji w notce. O ile lubię jak mają jakąś ramkę, czy to faktycznie konkretny obrys czy też zalewie nieznaczny cień, o tyle wydaje mi się, że to powinno zależeć od charakteru bloga, jego tematyki i dopiero na końcu reszty elementów szablonu. Dodatkowo nie wszystkie ilustracje na blogu dobrze wpasują się w ramki.

Na blogu Blogerzy dla Korczaka w notkach są dwa rodzaje ilustracji:

  • typowe, ilustrujące treść notek; są różnego typu i wielkości, pochodząc z różnych blogów mają też często wymiary przekraczające przestrzeń przewidzianą na ilustracje w tym szablonie
  • unikalne etykiety wyróżniające nagrodzone wpisy, są bardziej częścią wyglądu, ozdobą niż rzeczywistą treścią notki; jednocześnie de facto są niczym innym jak ilustracją w notce.

Obie te grupy ilustracji w notkach wymagają specjalnego podejścia korygującego niemile widziane zmiany.

Maksymalna wielkość ilustracji w notce

Najprościej jest sprawić aby wszystkie ilustracje na blogu wpasowywały się w dostępne im miejsce. Małe ilustracje zachowają swoją wielkość. Te natomiast, które w normalnych okolicznościach wystawałyby poza przydzieloną im przestrzeń zostają przeskalowane. Najistotniejsze jest w tym przypadku aby nawet pomniejszone zachowały swoje proporcje.

img {
 max-width:100%;
 height:auto;
}

W żaden sposób taki opis w szablonie nie ingeruje w rzeczywistą wielkość ilustracji. Ona w dalszym ciągu ma swoje wymiary i rozmiar, została tylko przeskalowana przy wyświetlaniu.

Tyle jeżeli chodzi o wielkość. Do ozdoby i wyróżnienia ilustracji w tym szablonie użyłam nieznacznej wielkości cień. Pojawia się on tylko przy ilustracjach w notce.

.BlogWpisTresc img, .TrescKomentowanegoWpisu img, .WstepKomentowanegoWpisu img, #StatycznaZawartosc img {
 box-shadow:0 0 5px #666;
}

cień pod ilustracją

Brak cienia przy wybranych ilustracjach

Cień to całkiem delikatna ozdoba ilustracji ale są sytuacje gdy ilustracja lepiej wyglądać będzie gdy bez wyraźnych granic wtopi się w tło. Tak było w przypadku etykiet na blogu konkursowym.

etukieta wyróżnienia

W takiej sytuacji są dwie możliwości. Po pierwsze można usunąć formatowanie bezpośrednio przy ilustracji. Dodając grafikę do notki w oknie edycji wyświetla się także możliwość dodania specyficznych stylów. To dobre rozwiązanie w przypadku pojedynczego elementu i niezmiennej strony. Tutaj zapewne by się sprawdziło ale drugie rozwiązanie jest po prostu lepsze.

Dodając taką specjalną ilustrację, przechodzę do edycji kodu html i dodaję jej specjalnie wymyśloną klasę smll. W szablonie opisuję ją kasując typowy opis wyglądu ilustracji dla danego szablonu (tutaj jest tylko cień).

img.smll {
 box-shadow:none;
}

Dzięki temu że wpisałam to w szablonie a nie przy każdej ilustracji to nawet przy zmianie szablonu czy tylko zmianie wyglądu ilustracji zawsze mogę ten wygląd skasować dla tych właśnie grafik oznaczonych klasą smll.


I to już chyba wszystkie ciekawostki związane z szablonem na blogu Blogerzy dla Korczaka. Z omawianymi tu rzeczami związane są wpisy:

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...