O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 26 kwietnia 2009

Serdecznych szablonów jest dziewięć i wszystkim mam zaplanowane. Możliwe, że będzie ich więcej ale póki co serdecznie bałamucić się zamierzam dziewięć razy. Dzisiaj po raz piąty pokazuję serca - miałam spory problem z szablonem linie papilarne, zupełnie nie mogłam się zdecydować jak powinien wyglądać. Miałam określone kolory i wiedziałam, że głównym motywem będzie serce zrobione z linii papilarnych (wie ktoś może skąd ten motyw? jakoś nie mogę sobie przypomnieć gdzie takie serce widziałam; zapewne jest to okładka jakiejś płyty albo ewentualnie plakat filmowy ale stawiam na to pierwsze; ktoś może wspomoże moją pamięć?). Problemem był sam kształt szablonu a że następny serdeczny skończyłam juz w lutym nie mogłam się doczekać pomysłu na linie papilarne.

Uwagi różne:

  • szablon jest wariacją na temat drobnego pierwszego szablonu filmowego: Let's Make Love; próbowałam kilku innych rozwiązań, m.in. próbowałam stworzyć coś na podstawie 38 szablonu Arial czy też 06 szablonu ręcznego z drzewem ale nie wyglądało to dobrze
  • W porównaniu do szablonu filmowego serdeczny jest jaśniejszy i ma mniej 'naturalne' kolory (filmowy opierał się na brązowym i granatowym):całość ma lekko różowany odcień zarówno w przypadku kremowego tła: #EEE 6D9 jak i czerwonych linków: #AE0433. Do tego czyste, zupełnie pozbawione nasycenia kolory (a może barwy... zapomniałam jaka jestzależność pomiędzy tymi dwoma terminami): czarny: #000 i szary #666
  • Szablon jest wąski, maksymalna szerokość ilustracji w szablonie to 450px. Jest także lewostronny więc mimo wszystko z większymi zdjęciami też nie powinno być problemu.
  • To jest szablon który opiera się na bardzo drobnej Verdanie a dla ozdoby ma większą, szeryfową Georgię w różnych, czasami dziwnych miejscach. Verdana jest niewielka ale czytelna i w notce mieści się w jednym wersie ponad 70 znaków czyli bez powiększania czcionki nie należy powiększać miejsca na wpis.
  • Szablon jest dostosowany do kilku popularnych skryptów: zwijane archiwum (testblog), zwijane archiwum (experymenty informatyczne), ostatnie komentarze (testblog), zwijane zakładki (experymenty informatyczne), avatary z MBL w komentarzach (pioornik), bloczek - wpisy z blogów (blogfrog), bloczek - nowe blogi (blogfrog)
  • opisany jest też wygląd tagów delicious na blogu,
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)
  • zapraszam do skorzystania i realizowania własnych pomysłów
niedziela, 19 kwietnia 2009

Rękodzieło to bardzo szerokie pojęcie i choć temat początkowo rozwijałam tylko w kierunku rzeczy robionych z niteczek i papieru (hafty, szydełko, scrapbooking, decupage) to mimo wszystko w planach nie zamierzałam i nie zamierzam ograniczać tej kategorii szablonów. Tak więc dzisiaj ósmy szablon rękodzielniczy jest w temacie biżuteryjnym. Po zmianach w 2013 roku jest to biżuteria ze śmieci (Junk Jewelry) ale dalej biżuteria.

szablon ręczny 08, Junk for Jewelry

Szablon rękodzielniczy 08, Junk for Jewelry,
na starym kodzie, dla blogów na blox.pl. -500px- 


W pierwotnej wersji szablon powstał w kwietniu 2009 roku jednak z tej oryginalnej wersji nic poza ogólnym tematem nie zostało. Chciałam aby szablon pozostał ciemny bo takich robię stosunkowo mało więc szkoda by było pozbywać się jednego z nielicznych.

 

Adres szablonu: http://handmade08szablonkatemac.blox.pl

fragmenty szablonu rękodzielniczego 08

Uwagi o szablonie świątecznym 01 - z choinką
szerokość szablonu auto (740px/960px/1160px)
szerokość kolumny z główną treścią 740px
szerokość pobocznej szpalty auto (170px)
dodatkowe kolumny 1. kategorie
2. treść główna
3. treść poboczna, która automatycznie dzieli się na dwie kolumny
kolor tła ciemne (#29231A) w body beżowa grafika
kolor tekstu jasny (#C2B599)
kolor linków jasny (#f7d19a)
pozostałe kolory pomarańczowy (#f1965e)
krój użyty w notce Trebuchet MS; dodatkowo Italianno dla etykiet
wielkość tekstu notki small (ok 14px)
interlinia w notce 1.6em
maksymalna wielość elementów graficznych w notce 500px (ilustracje się skalują)
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, częściowa transparentność i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3, h4 - powiększenie i zmiana fontu na Italianno
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki zwijane zakładki, zwijane archiwum, wyróżnienie komentarzy autora, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 100%)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie
#menuIkon - górne menu z małymi obrazkami

Pierwotnie szablon wyszedł mi jakoś nieciekawie. Niby był śliczny ale kolorystyka była dość monotonna. Gdy stworzyłam zimą 2012 roku szablon z choinką spodobał mi się nowy pomysł, jest trochę bałaganiarski i nadmiernie wykorzystuje przestrzeń ale co tam... idealnie pasuje do śmieciowej biżuterii.

W tym moim szablonie nie ma w grafice tytułowej rytmu czy porządku. Dodatkowo miszmasz panuje we wszystkich graficznych elementach. Tytuł umieszczony jest na ciemnym eleganckim tapetowym tle ale otacza go tło wyglądające jak jasny surowy beton. Niby tematem jest biżuteria ale zrobiona z resztek, odpadków i śmieci.

Wymiana tła dookoła bloga

wzorek z szablonu rękodzielniczego 08Takie tło dookoła blogu jest rzeczą którą najłatwiej można zmienić. Zawsze jednak proponuję zmieniać na coś podobnego kolorystycznie. Generalnie większość elementów ma własne tła więc jasność tego wzorku nie jest najistotniejsza ale jeżeli chcesz aby dalej można było odczytać datę wpisu to zdecyduj się na jasne tło. Jeżeli chcesz zachować styl glamour retro to wybierz coś stonowanego i raczej wypłowiałego.

W tle dookoła bloga wyświetla się zwykły wzorek udający jasne deski. Tradycyjnie są dwa sposoby wymiany tła: przez nadpisanie (plik nazywa się hm08_bg.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo poprzez wymianę adresu wywołania w arkuszu CSS (grafika przypisana jest do elementu body).

Usunięcie drobiazgów (Junk for Jewelry)

Sam tytuł bloga i karteczki pod nim tworzy odpowiedni kod CSS. Elementy maja przypisane własne tło graficzne i są odpowiednio przekręcone. O tym elemencie będzie jeszcze niżej.

Część graficzna tytułu czyli tacka, łańcuszki, całą masa śmieciowych drobiazgów to jeden plik przypisany jako tło selektorowi odpowiedzialnemu za całość bloga. Tradycyjnie możesz usunąć ten plik albo go zastąpić własnym. Aby zastąpić w szablonie plik z choinką musisz go albo nadpisać w zasobach bloga (plik nazywa się hm08_top_01.png; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo wymienić adres wywołania w arkuszu CSS (grafika przypisana jest do elementu #BlogGlownyBox).

top z 8 szablonu rękodzielniczego

Szablon bez tych elementów wygląda równie dobrze więc wystarczy jak je usuniesz ale równie dobrze możesz skomponować własne biurko pamiętając aby zostawić przezroczyste tło (plik typu png).

Miejsce na tytuł bloga

Tytuł bloga jest w tradycyjnej postaci - tekst z linkiem. Ciemne wzorkowe karteczki pod nim to nic innego jak obrócone elementy - takie transformacje to kolejna z nowości z CSS3. Karteczka na wierzchu to nic innego jak ciemna tekstura tapety. Jeżeli chcesz to możesz przygotować własną karteczkę i jakimś ozdobnym fontem napisać tytuł bloga.

Karteczka ma wymiary 400×247px więc swoją przygotuj też takiej wielkości. Może mieć transparentne tło - w takim przypadku na blogu będzie wyświetlać się na białym. Dodaj swój plik do zasobów bloga.

Teraz wystarczy, że przejdziesz do arkusza stylów (edycja CSS) i odszukasz miejsce w którym opisany jest link tytułu bloga.

#BlogTytulText a {
 width:300px;
 height:177px;
 padding:70px 50px 0;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
 transform: rotate(3deg);
 box-shadow: 0px 1px 6px #000, 50px 50px 100px hsla(36,22%,13%,.7) inset;
 background: #29231A url(/resource/hm08_bg3.jpg) repeat center center;
 display:inline-block;
 font-size:4em;
 line-height:1em;
}

Pierwszy podkreślony fragment to adres ilustracji w tle. Wstaw tam adres własnego pliku. Pozostałe linijki opisują inne cechy tego elementu: cień, wielkość, transformację a także zmianę elementu liniowego w blogowy. To ostatnie jest o tyle istotne, że jeżeli zechcesz ukryć linkujący tytuł bloga to możesz to zrobić bez obaw. Ukryjesz tylko słowa, przestrzeń linkująca pozostanie.

Na koniec tego kodu jest opis wielkości czcionki. Jednym ze sposobów ukrycia tekstu tytułu bloga jest zmniejszenie rozmiaru kroju do zera i dla bezpieczeństwa nadanie mu koloru tła. Dla tego konkretnego szablonu będą to takie wartości:

 color:#29231A;
 font-size:0px;

ikonkiObrazeczki obok tytułów notek

Obrazki na początku każdej z notek to nic innego jak ikonki zaprojektowane przez ArtDesigner.lv (Tanya) i należące do trzech zestawów: Gentle Romantic Icons, Lovely Website Icons, My Secret Icons. W szablonie zdecydowałam się użyć kilka i korzystając z możliwości jakie daje CSS3 poprzypisywałam tych kilka obrazków do kolejnych tytułów notek. Jaka ikonka wyświetli się przy jakim wpisie zależeć będzie od tego który to wpis na stronie i czy jest to jedyny wpis danego dnia.

Jeżeli nie chcesz tych ikonek na swoim blogu albo z jakiegoś powodu nie możesz z nich korzystać (łamiesz zasady licencji) to po prostu usuń te zdjęcia z zasobów swojego blogu (skopiowały się tam razem z pozostałymi plikami szablonu). To najprostsze rozwiązanie.

Jeżeli chcesz mieć w tych miejscach inne obrazki to najlepiej nadpisz pliki w zasobach. Ikonki powinny nazywać się tak: hm8_g1.png, hm8_g2.png, hm8_g3.png, hm8_g4.png, hm8_g5.png, hm8_g6.png, hm8_g7.png, hm8_g8.png, hm8_g9.png. Jeżeli jednak kopiowałeś szablon kilka razy to ich nazwy wzbogacone zostaną o kolejne cyfry więc najlepiej sprawdź w zasobach blogu (PLIKI).

Menu z ikonkami społecznościowymi

I na koniec wspomniane w tabelce ikonkowe menu - dodatek z małymi obrazkami linkującymi do różnych serwisów. Wkrótce zapewne pojawi się tutaj bardzo dokładna instrukcja ale póki co odsyłam na stronę z szablonem. Tam w jednej z notek opisałam ikonki, których serwisów są już w szablonie, jak z nich skorzystać i co zrobić aby dodać jakąś inną.

Co chwilę przybywa nowych serwisów więc próba opisania ich wszystkich czy choćby tylko najpopularniejszych jest z góry skazana na porażkę. W zależności od czasu poprawek opisane przeze mnie ikonki będą nawiązywały do określonych serwisów. Dlatego zawsze najlepiej sprawdzić to w pobieranym szablonie. Zawsze też można w analogiczny sposób dodać opisy nowych ikonek/serwisów.

stylekatemacblox.plsoup.iogooglewordpresspinteresttwitterYouTubefacebookblog.plRSSnewsletter

W tym konkretnym szablonie umieściłam bardzo specyficzne ikonki zawsze jednak możesz wstawić własne.


wtorek, 14 kwietnia 2009

Po raz trzeci publikuje tu szablon na bloga z motywem serca. Tym razem postanowiłam skorzystać z bardzo wygodnego pomysłu czyli szablonu blokowego który już raz wykorzystałam w bardzo klasycznym zestawieniu: ciemno-szare tło, jasny tekst i czerwone wyróżnienia a do tego zdjęcie samochodu (zobacz: 39 szablon czerwony). Tym razem mimo iż zachowałam podstawowy podział na jasne i ciemne kolory i zostawiłam czerwień jako wyróżnienie szablon jest nieco bardziej kolorowy. Chcąc wykorzystać kolorystykę zdjęcia my heart ♥ em busca da liberdade autorstwa Ana_Cotta zrobiłam szablon w bardzo ciemnych odcieniach brązowego i wyblakłej zieleni. Tym razem znalezienie odpowiednich kolorów nie było łatwe, brązowy nie jest kolorem który często używam ale osiągnęłam efekt na jakim mi zależało więc dzisiaj pokazuję szablon tutaj.

Serdeczny 04 - Blokowy z sercem
Serdeczny 04 - Blokowy z sercem

Uwagi częściowo techniczne:

  • Po pierwsze autorem zdjęcia w nagłówku jest Ana_Cotta. Zdjęcie zostało udostępnione na licencji Creative Commons – jeżeli masz jakieś wątpliwości przeczytaj przystępne podsumowanie licencji.
  • Szablon jest prosty i myślę, że wprowadzanie do niego zmian nie będzie problemem i każdy będzie mógł go sobie dopasować do własnych upodobań.
  • Bloksowa baza to Almost Spring ale tak samo powinny pasować htmle szablonów: Spokojny, Kubrick, Connections, 36i6 A, 36i6 B i ewentualnie Theme C; html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na brązach i zieleniachw różnym natężeniu. Jedynym kolorowym dodatkiem jest czerwień w dwóch odcieniach:  #cc0000 i #aa0000.
  • Aby wymienić zdjęcie w nagłówków wystarczy załadować do zasobów bloga wybrana grafikę i w arkuszu CSS przy selektorze związanym z tytułem bloga (#BlogTytulBox) podmienić adres wywoływanego tła na własny
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)
  • zapraszam do skorzystania i realizowania własnych pomysłów
środa, 08 kwietnia 2009

Zerknęłam do bloksowej bazy znanych mi szablonów w poszukiwaniu wiosny i klimatów wielkanocnych. Zrobiłam oczywiście odpowiednie listy więc jeśli ktoś chciałby zerknąć to zapraszam: lista szablonów wiosennych, lista szablonów wielkanocnych. Listy są aktualne na chwilę obecną i choć zamierzam je oczywiście uzupełniać to będę to robić nieregularnie. Na początek sprawdziłam co mają do zaoferowania teamowe tagi wiosna i świąteczne. W tagu świąteczne zbierane są wszystkie świąteczne szablony tak więc Wielkanoc miesza się tam z Bożym Narodzeniem ale mimo wszystko tag ten daje ogólny obraz 'jajeczkowego' tematu. Tag wiosna też jest jak najbardziej satysfakcjonujący choć polecałabym też zerknąć pod tag kwiaty, dla mnie wiosna to właśnie kwiaty.

Moje listy przygotowałam bardziej tradycyjną metodą: przeglądając cały teamowy katalog i kilka indywidualnych galerii boksowych szablonów. Poniżej przegląd kilku ciekawszych szablonów wiosenno-wielkanocnych. Tym razem miałam jednak problem z podjęciem decyzji więc poza polecanymi podaję alternatywne które z róznych powodw wydaja mi sie podobne.

Wielkanocny szablon autorstwa Anonimki

na Wielkanoc I

Ściśle wielkanocnych w temacie szablonów jest zaledwie kilka. Najciekawszy jest pomysł anonimki: szablon na Wielkanoc I. Prosty szablon z bardzo ładnie dobranymi kolorami. Trudno by w nim było szukać wielkanocnego nastroju ale żółto-zielkone barwy dodają wiosennego nastroju. Ot takie lekkie popkulturowe nawiązanie do wiosennych świąt które przeciez są świetami życia, odradzającego się świata etc.

Wiosenne i kwiatowe szablony

niebieskozielony

pineska: niebiesko - zielony

Ten szablon mnie zachwyca od poczatku. Możliwe, że nie ma w nim tej wiosennej, nieokiwłznanej radości jakiej bym szukała w wiosennym szablone ale mimo to jest cudowny:lekki, delikatny, świeży...

zobacz też inny szablon pineski: niebieski z bialym kwiatkiem

top05

kate_mac: top 05 - Flowers

taki niebiesko-różowo-zielony szablon wydaje mi się najbardziej wiosenny z moich pomysłów; nie należy może do grona moich najbardziej ulubionych szablonów ale lubię sposób w jaki wykorzystałam niebo jako tło także w body

z topowych szablonów klimat lekko wiosenny mają też: The Magic Box, Betsyness i Kultivating

Kwiatowy

auel: Kwiatowy

z jakiegoś powodu lekko orientalne klimaty kojarzą mi się z wiosną - może to jedynie kwestia kwitnących drzew owocowych... ten szablon orientalny nie jest ale...

w podobnych kolorach i klimacie utrzymany jest szablon pineski: orientalny z lodka

71byepeeya

epeeya: szablon 71

bardzo intensywna zieleń jest typowa dla wiosny, jest świeża, nowa i bardzo efektowna; sam szablon podobny jest do innych projektów epeeyi ale to zdjęcie...
lubie makro

intensywną zieleń można znaleźć też w 84 szablonie by epeeya a także w dwóch projektach port_folio: Zielony zdjęciowy i Zielone kółka

102byepeeya

epeeya: szablon 102

to jest jeden z szablonów z których korzystałam zanim w ogóle jeszcze dowiedziałam się, że można coś w wyglądzie bloga zmieniać; mam do niego duży sentyment i teraz, niespełna dwa lata później, jak sobie przypomnę jak go masakrowałam to nic tylko śmiać mi sie chce; szablon jest fajny w takim dokładnie kształcie w jakim istnieje: lekki, szary z monotypicznym krojem

następnym szablonem nad którym sie znęcałam był także projekt epeeyi: szablon 103

wiosenny

irytek05: wiosenny blox

to jeden z nowych projektów Irytka; ewidentnie wiosna 2009; intensywny, słoneczny szablon z ciekawym rozwiazniem graficznym tła bloga - szpalty są wyraźnie rozdzielone

podobne wydają mi się projekty port_folio: Błękit nieba i Zdjęcia - niebiesko-żółty

53_by_epeeya

epeeya: szablon 53

różowe kwiaty na niebieskim tle to romantyczna wiosna, bardzo ulotna bo jak długo możemy sie cieszyć kwitnieniem drzew - to dosłownie chwilka i zawsze jest mi mało

podobne szablony epeeyi: 55, 59 i 60; w dużo bardziej minimalistycznej wersji poleciłabym także 114

wiosenny_I

anonim001: szablon wiosenny I

jeżeli komuś wiosna kojarzy się z bardzo intensywnymi radosnymi kolorami to ten tulipanowy szablon sie sprawdzi;

podobny szablon anonimowej: szablon na Wielkanoc I

glad

une_fille5: Gladiolus

zielone szablony une_file5 wykorzystujące przezroczystość kanału alfa w plikach png to fantastyczny pomysł; oczywiście nie wszyscy będą mogli go docenić ale nawet bez przezroczystości szablony są świetne

podobne szablony une_file5: Oset, Dalia

a takze nowy szablon Irytka: wiosna!

Wyszedł z tego całkiem reprezentatywny przegląd szablonów. Na koniec polecę coś troszkę innego. Szablon Taishy ma w sobie bardzo dużo radości, klimatem pasuje bardziej do lata ale na wiosne też sie nadaje. Polecam 085 - szablonik z dziewczyną

niedziela, 05 kwietnia 2009

Od czasu tak zwanych zmian SEO tytuły notek na stronie głównej są także linkami, działają dokładnie tak samo jak słowa Link pod każdą notką. Na stronach z pojedynczymi notkami czy na tzw. stronach statycznych tytuły notek są dodatkowo umieszczone w znacznikach nagłówków/śródtytułów (h2). Brzmi to może nieco bardziej skomplikowanie niż jest w rzeczywistości ale tak to już jest gdy coś zmienia się i rozwija na przestrzeni czasu, trochę trudno uniknąć nieprzewidzianego bałaganu.

Jak zmieniać wygląd tytułu notek

Selektory odpowiedzialne za wygląd tytułu notki noszą różne nazwy i są to odpowiednio: dla strony głównej - .BlogWpisItemTytul, dla strony z pojedynczą notką - .TytulKomentowanegoWpisu, dla strony statycznej - #StatycznaTytul. Oczywiście w zależności jakie cechy tekstu zamierzasz opisywać może okazać się konieczne skorzystanie z kombinatorów, które uwzględniać będą fakt, że te elementy mogą być linkiem i śródtytułami.

 

Wszelkie instrukcje i wyjaśnienia zacznijmy od prostej informacji. Jeżeli od dawna korzystasz z blox.pl to tzw. zmiany SEO musisz u siebie włączyć. Wszystkie nowe blogi mają już automatycznie tą opcję wybraną. Poza szeregiem różnych zmian, które w swoim czasie były intensywnie opisywane, uaktywnienie tych zmian sprawi, że tytuł notki na stronie głównej bloga będzie linkiem prowadzącym do strony z tą pojedynczą notką i jej komentarzami.

Jeżeli zastanawia was co można zrobić z tytułem bloga to stety-niestety mogę wam najogólniej odpowiedzieć, że wszystko. Blox nie jest najnowocześniejsza platformą blogową a do tego opisuję tu wprowadzenie zmian w szablonie na starym kodzie a mimo to dzięki arkuszom stylów (CSS) można pokusić się o całkiem zaawansowane czary nawet tutaj. Wszystko zależeć będzie od naszej wyobraźni.

Ustaliliśmy już, że mamy trzy rodzaje wyświetlania notek i każdy z nich ma inaczej nazwany selektor: .BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul. Dodatkowo tytuły na stronie głównej są linkami a na stronach pojedynczych śródtytułami: .BlogWpisItemTytul a, .TytulKomentowanegoWpisu h2, #StatycznaTytul h2. W zasadzie wystarczy opisać tą wersję kombinatorową (uwzględniającą link i nagłówki) ale ze względu na to, że są na bloksie weterani staram się aby i szablon bez włączonych zmian SEO wyglądał tak samo. Dlatego zazwyczaj opis dzielę pomiędzy te dwie wersje. Przykładowo na tym blogu wygląda on tak:

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 padding:0 20px 0 0;
 color:#B52A51;
 font-size:1.8em;
}
.BlogWpisItemTytul a, .TytulKomentowanegoWpisu h2, #StatycznaTytul h2 {
 margin:0;
 font-weight:normal;
 font-size:1em;
}


Pierwszy zestaw to zgrupowane selektory określające wygląd moich tytułów: rozmiar. kolor, odstępy. Drugi zestaw to grupa kombinatorów. W zasadzie kombinator linku jest tu niepotrzebny ale gdybym chciała opisać kolor tytułu na stronie głównej to musiałabym to zrobić właśnie przy kombinatorze linku (u mnie link tytułu ma ten sam kolor co reszta linków).

Wpisane w drugiej grupie trzy cechy anulują wygląd śródtytułów (h2). Przeglądarki gdy czytając stronę natrafią na znacznik nagłówka zastosują specjalny wygląd, który mają wpisany w programie: większy rozmiar, odstęp i pogrubienie. Chyba, że zostanie to inaczej opisane w arkuszu.

Przeszukując własny arkusz musisz liczyć się z tym, że selektory te nie będą tak ładnie zgrupowane. Często jest tak, że poszczególne rodzaje notek są osobno opisywane. Generalnie preferuję jednolity wygląd wpisów więc w moich szablonach najprawdopodobniej elementy te będą razem. Najprawdopodobniej choć niekoniecznie zawsze.

Jeżeli chcesz porównać wygląd poszczególnych rodzajów notek to polecam moje strony poświęcone fragmentom kodu źródłowego: wpis na głównej, wpis na pojedynczej, wpis na statycznej.

Wygląd tytułu wpisu

Kilka przykładów ze znanych stron. Opisuję dzisiaj tylko wygląd tytułu notki. Czasami otaczające go elementy są częścią tytułu jednak zazwyczaj poszczególne fragmenty mają własne selektory i opisy. Dodatkowo ozdoby oddzielające tytuł od otaczających go elementów mogą zostać przypisane zarówno do tytułu jak i do tychże elementów.




UWAGA. Notka została zaktualizowana pod koniec 2013 roku więc jej oryginalna data z 2009 roku jest nieadekwatna do treści. Jeżeli więc w 2014 roku przeglądając internetowe strony natraficie na interesująco wyglądające tytuły notek i będziecie chcieli wiedzieć jak to jest zrobione i jak to odtworzyć na blox.pl to napiszcie w komentarzu pod tą notką. Wystarczy adres obiektu pożądania (choć dla pewności dokładniejszy opis czy zrzut ekranowy nie zaszkodzi) a w miarę możliwości postaram się wyjaśnić jego tajemnice i o ile będzie to możliwe to przetłumaczyć dany wygląd na bloksowy język.


www.designsponge.comTytuł pisany dużymi morelowymi literami

Tytuł notki pisany dużymi literami jest chyba najpopularniejszym rozwiązaniem. To najprostszy i jeden z najstarszych sposobów wyróżnienia kluczowej, tytułowej treści. Mimo iż w internecie tekst pisany dużymi literami uznawany jest za krzyk to zasada ta nie dotyczy wszelkich tytułów. Decydując się na takie rozwiązanie zwróć uwagę na font którego używasz. Nie powinien być to krój pisankowy ponieważ większość pisanek ma duże litery znacznie bardziej ozdobne: pasują jako dwu- trzyliterowe inicjały ale koszmarnie wyglądają gdy pisane są nimi całe słowa.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 color: rgb(237, 174, 160);
 font-family: 'QuicksandLight',Arial,sans-serif;
 font-size: 32px;
 line-height: 37px;
 text-transform: uppercase;
}
.BlogWpisItemTytul a, .TytulKomentowanegoWpisu h2, #StatycznaTytul h2 {
 margin:0;
 font-weight:normal;
 font-size:1em;
 color: rgb(237, 174, 160);
}


Taki morelowy napis sprawdzi się na ciemnym tle, jeżeli piszesz na białym to potrzebować będziesz nieco ciemniejszego odcienia. Więcej o kolorach i ich sposobie zapisu (tutaj w wersji dziesiętny rgb) w notce: Określamy kolor.

Wykreśliłam zmianę kroju ponieważ ten na Designe Sponge nie ma polskich liter. Quicksand to fajny geometryczny krój ze świetną wersją cienką ale zupełnie nie nadaje się na bloga pisanego po polsku (czy w jakimkolwiek języku wykorzystującym mniej typowe znaki). Jeżeli podoba ci się jego geometryczność to możesz spróbować zastąpić go popularnym Centry Gothic (zainstalowanym na większości komputerów). Jeżeli zaś zachwyca cię jego cienkość i nie boisz się wyrazistych kształtów to polecam będący w zupełnie innym klimacie Advent Pro. Ten krój trzeba zaimplementować z Google Web Fonts ale zapewniam, że posiada on zarówno polskie znaki (kluczowa sprawa) jak i wersję cienką (a nawet jeszcze cieńsze niż cienka).

Nazwa kategorii, imię autora czy liczba komentarzy znajdują sie przed tytułem w osobnych kontenerach. Na bloksie te elementy umieszczone są pod wpisem ale korzystając z pozycjonowania bezwzględnego można je przenieść nad tytuł notki - to jednak temat na inny wpis.

www.smashingmagazine.comTytuł pisany grubymi literami o sporym rozmiarze

Pogrubienie albo wybór naturalnie grubego kroju to równie dobry sposób na wyróżnienie tytułu notki. Dodaj do tego odpowiednią ilość światła dookoła słów a tytuł będzie miał świetną ekspozycję. Chyba każdy font można bez obaw pogrubiać. Na pewno kroje znoszą znacznie lepiej pogrubianie niż pochylanie (przeglądarkowe pochylanie jest za mocne więc w pochyłej wersji należy stosować fonty które są w takiej opcji zaprojektowane). Decydując się na duży rozmiar i grube litery ostrożnie wybieraj krój aby niepotrzebnie nie przytaczać reszty tekstu.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 padding:.5em 0 0;
 font-family: 'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
 font-weight:700;
 font-size:2em;
 line-height:1.1em;
 color:#333;
}
.BlogWpisItemTytul a, .TytulKomentowanegoWpisu h2, #StatycznaTytul h2 {
 margin:0;
 font-weight:normal;
 font-size:1em;
 color:#333; 
}


Jeżeli chcesz aby tytuł notki miał całkiem zwykły kolor, taki sam bądź zbliżony jak normalny tekst to koniecznie musisz dodać opis kolory linku tytułu notki. Generalnie linki mają zazwyczaj jakiś wyrazisty kolor więc zostaje on dziedziczony także przez tytuł na stronie głównej bloga. Aby to zmienić trzeba to specyficznie opisać. W odniesieniu do tytułów na pozostałych wersjach stron takiej konieczności już nie ma. 

Wykreśliłam zmianę kroju ponieważ ten na Smashing Magazine nie jest ogólnodostępny. Skolar Bold to wspaniały nagradzany font. Jest nowoczesny ale całkiem przyjazny. Jeżeli podobają ci się jego grube szeryfy i niski kontrast linii to z powszechnie instalowanych polecam Bookman Old Style, jak sama nazwa mówi jest to jednak staroświecki krój, który ma zupełnie inny styl niż Skolar. Jeżeli zaś zachwyca cię jego współczesność w połączeniu z szeryfami to warto zdecydować się na wspomnianą w stosie Cambrię albo pochodzącą z podobnych źródeł Constantię.

Kreska nad tytułem i elementy informacyjne pod nim to oczywiście osobne rzeczy. Kreskę można bez problemu naśladować przy użyciu ramki. Elementy informacyjne natomiast trudno będzie umieścić pod tytułem wpisu. Jest to oczywiście możliwe ale zależeć będzie od liczby linijek jakie zajmować będzie tytuł wpisu. Sama liczba jest informacją techniczną problem pojawi się gdy jeden wpis będzie miał dwie linijki tytułu a następny tylko jedną - trudno w takiej sytuacji umieścić takie info w stałym miejscu pod tytułem. Łatwiej to zrobić nad nim więc takie rozwiązanie polecam.

www.mojewypieki.comTytuł pisany ozdobnym fontem w dwóch wielkościach

Wyrazisty, ozdobny krój o ile tylko będzie miał dobrą czytelność idealnie wyróżni początek każdej nowej notki. Wybierz font w miarę prosty ale bardzo charakterystyczny, dodaj mu jaskrawy kolor i odpowiednią wielkość a nikt tak zapisanego tekstu nie przeoczy.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 padding:0.25em 0 0.5em;
 font-size: 175%;
 line-height: 100%;
 font-family: 'LobsterItalic';
 color: hsl(353,73%,48%);
}
.BlogWpisItemTytul a, .TytulKomentowanegoWpisu h2, #StatycznaTytul h2 {
 margin:0;
 font-weight:normal;
 font-size:1em;
 color: hsl(353,73%,48%);
}
.BlogWpisItemTytul span, .TytulKomentowanegoWpisu span, #StatycznaTytul span {
 margin-top:-12px;
 font-size:78,6%;
 padding-bottom:0.3125em;
}


Tym razem kolor zapisałam jako hsl, jest jeszcze kilka innych sposobów. Jaki jest najlepszy dla ciebie musisz sam zdecydować. Jeżeli ogólny kolor linków jest taki sam jaki ma być dla tytułu notki to oczywiście w tym miejscu dodatkowy zapis koloru nie jest potrzebny.

Rozmiar kroju opisany jest to w sposób zależny. Jest to o tyle wygodne, że odnosi się zawsze do jakiegoś początkowego rozmiaru który zawsze można zmienić a wraz z nim zmieni się rozmiar wszystkich zależnych od niego elementów. Problem pojawia się, gdy elementy zawierają się w sobie. Na moich wypiekach tytuł ma rozmiar 175% a podtytuł 137,5% przy czym oba te określenia odnoszą się do wspólnego rodzica, jakiegoś konkretnego rozmiaru. Na bloksie nie ma specjalnej opcji dodania podtytułu. Można jednak spróbować dodać w tytule fragment specjalnego kodu html i następnie dodatkowo opisać jego wygląd (proponuję najprostsze rozwiązanie czyli zwykły span). Jednak przy określaniu rozmiaru należy wziąć pod uwagę, że tytuł i podtytuł nie są elementami współrzędnymi (rodzeństwem). Podtytuł jest częścią tytułu (dzieckiem) więc aby go zmniejszyć nie wystarczy wpisać mniejszy procent niż przy tytule. Trzeba wpisać liczbę mniejszą niż 100% (100% oznacza tak samo, 1em). W tym przypadku będzie to 78,6%.

Font używany na stronie mojewypieki.com to jeden z rodziny Lobster (zdaje mi się, że to Lobster Two). Wersja udostępniona na Google Web Fonts nie posiada chyba polskich znaków więc nie nadaje się do skorzystania. Wcześniejsza wersja, Lobster, mimo iż nie ma pełnego alfabetu łacińskiego rozwiniętego 1 to posiada wszystkie specyficznie polskie znaki więc nie ma żadnych problemów z pisaniem takim fontem. Jedyna niedoskonałość to zaledwie jeden styl - normalny. W przypadku kroju dla nagłówków jest to jednak wystarczająco.

babeczkaa.blox.pl Tytuł podkreślony z wyróżnionym podkreśleniem samego linku

Mój własny bloksowy pomysł zrealizowany na blogu babeczkaa.blox.pl - taka kreska z wyróżnionym fragmentem w okolicy linków pojawia się w tym projekcie w kilku miejscach. To taka moja wersja ornamentu w szablonie, który z zasady ma wyglądać prosto.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 margin:20px 0 20px;
 padding:10px 0 0;
 border-bottom:2px solid #bbb;
 font-size:36px;
 color:#000;
}
.TytulKomentowanegoWpisu h2, #StatycznaTytul h2 {
 margin:0;
 font-weight:normal;
 font-size:1em;
}
.BlogWpisItemTytul a {
 border-bottom:2px solid #346699;
 color:#000;
}


Tak ozdobiony tytuł dobrze sprawdzał się będzie w sytuacji gdy tytuł notki zajmował będzie tylko jeden wiersz - dostosuj więc wielkość tekstu do typowej długości twojego tytułu (36px może być za dużo). Marginesy i dopełnienia w oryginalnym szablonie są nieco inne ze względu na otaczające tytuł elementy. Dla samego tytułu wystarczają takie jak wyżej.

Link jest elementem śródliniowym więc jego dolna ramka powinna pokrywać się z ramką elementu. Jeżeli chcesz aby taka ozdoba pojawiła się także na stronach z pojedynczymi notkami to bez problemu możesz w tym celu wykorzystać znaczniki nagłówków zamiast linków. Nagłówki (śródtytuły) są jednak elementami blokowymi więc aby widoczna była linia w dwóch kolorach należy zmienić ich sposób zachowywania się na śródliniowy (display:inline;).


Oczywiście są inne sposoby na osiągnięcie tego samego efektu. Sposoby czasem prostsze, czasem trudniejsze, lepsze, szybsze, mniej bądź bardziej kłopotliwe. Niektóre z nich opisuję na tym blogu więc sprawdź pozostałe wpisy na temat wyglądu tytułu notki.

Przypominam. Jeżeli widziałeś gdzieś fajny pomysł na wygląd tytułu i chcesz spróbować przenieść go na bloksa to zachęcam do podzielenia się w komentarzu źródłem i może razem odkryjemy jego sekret.


Przydatne bądź powiązane tematycznie notki:

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...