O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Blogerzy dla Korczaka

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:

poniedziałek, 25 lutego 2013, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
avo_lusion
2013/02/25 15:39:34
Kochana, ja chciałam ci serdecznie podziękować za ogrom pracy, jaki włożyłaś w ten blog... Ja jestem nim zachwycona, jest po prostu godny postaci Korczaka:)

A co do szablonów dedykowanych - ja się już nie mogę doczekać mojego... :) Serdecznie pozdrawiam!
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...