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

Cudzesy: żółto-czarny szablon powitalny

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Typography wcześniej nie istniał, na jego miejscu był City Under Heat. Bardzo fajny, jeden z moich ulubionych ale także jeden z najmniej popularnych. W podobnym klimacie jak dawny City są Kultivating czy New Tech Earth więc bez problemu można do któregoś z nich wstawić sobie nagłówek City Under Heat.


top 10 - Typography

Szablon top 10 - Typography, elastyczny,
na starym kodzie, dla blogów na blox.pl. -500px- 


Jest to kolejny szablon o zmiennej szerokości, reagującej na dostępną szerokość ekranu. Początkowo były to tylko dwie wersje: pierwsza dla starych przeglądarek i małych ekranów i druga gdy miejsca jest dość aby pojawiła się trzecia kolumna. W ostatniej chwili zdecydowałam się dodać jeszcze jedną wersję aby poluzować jeszcze bardziej szablon. Wszystko tutaj jest bardzo kontrastowe, czarno-białe i jak zwykle nieco inaczej będzie wyglądało na docelowym blogu.

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

fragmenty szablon top 10 - Typography

Uwagi o szablonie top 10 - Typography
szerokość szablonu 750px (990px)
szerokość części na notkę 510px
szerokość pobocznej szpalty 210px
dodatkowa trzecia kolumna szerokość: 210px
zawiera: wszystkie dodatki z pola na kod HTML
sposób: przeniesiona bezwzględnie wąska szpalta
kolor tła białe (#fff)
kolor tekstu szary (#333)
kolor linków czarny (#000)
pozostałe kolory żółty (#ffad00)
krój użyty w notce Georgia
wielkość tekstu notki 14px
interlinia w notce wartość względna 1.4em
maksymalna wielość elementów graficznych w notce 510px
css-owe ramki przy grafikach tak
 margin:5px 0 0 0;
 border-radius:15px;
 border:5px solid #000;
 box-shadow:0 0 2px #333;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) automatyczne przesunięcie, kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
pogrubienie
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, zwinięte archiwum, Ostatnie komentarze, delicious,

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 570px)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

ikonkowe menu:
#mTwit ikonka z logo Twittera
#mFejs ikonka z logo Facebooka
#mMail ikonka ze znakiem @ (małpy)

Szablon jest bardzo wyrazisty. Kontrastowe kolory: czarny, biały i żółty dominują nad wyglądem. Do tego zaokrąglone krawędzie przy etykietach dopasowują wygląd do wybranego nagłówka. Moim zdaniem to całkiem ciekawy projekt, coś czego wcześniej nie robiłam. Nie jest doskonały ale nie jestem pewna co mogłabym zmienić aby był lepszy. Bardzo lubię wygląd wyszukiwarki, topów i ramek dookoła ilustracji.

Jedną z trudniejszych decyzji w tym szablonie był wybór fontu. Tak wyraźnie zaokrąglony i geometryczny napis w nagłówku narzucał dużą ostrożność w wyborze kroju. Myślałam o staroświeckim Bookman Old Style bo ma bardzo wyrazisty wygląd ale chociaż litery w topie nie są nowoczesne to jednak nie są też staroświeckie w takim samym sensie jak Bookman Old Style. Fontom bezszeryfowym brakuje przyjazności a potrzebowałam sympatycznego wyglądu aby zneutralizować nieco agresywne kolory. Nieoczekiwanie dla mnie odpowiedzią okazała się Georgia. Zupełnie inny styl i wygląd ale całkiem fajnie współgra z topem.

Samoistna trzecia kolumna

Pojawia się bez konieczności wprowadzania zmian w polu na kod HTML. Układ trzykolumnowy stworzony jest dzięki bezwzględnemu przeniesieniu zawartości bloksowej wąskiej szpalty a to oznacza, że całe miejsce przeznaczone zwyczajowo na bloksową treść poboczną wypełnione jest dodatkami. Ma to dużą zaletę, samoistna trzecia szpalta jest rozwiązaniem dla zielonych, jak szczypiorek na wiosnę i nieuporządkowanych. Jak zależy ci tylko na wyglądzie trzykolumnowym natomiast nie chcesz zawracać sobie głowy jakimikolwiek decyzjami co i w której kolumnie ma się pojawić to rozwiązaniem jest samoistna trzecia szpalta.

Moim zdaniem ma to jedną dużą wadę, która właśnie opisałam jako zaletę: jest z góry ustalone, że w dodatkowej kolumnie wyświetla się wszystko poza bloksową wąska szpaltą.

Dodatkowe boksy, uporządkowywanie dodatków

Jak dodać boks/dodatkowy element w bocznej szpalcie?To, że szablon sprawdzi się w użyciu także nieuporządkowanym nie znaczy, ze pewnych rzeczy nie można sobie uporządkować w polu na dodatkowy kod HTML. W każdym szablonie na starym kodzie zrobionym przeze mnie polecam wykorzystać klasy, które opisałam na wzór elementów z bloksowej wąskiej szpalty. Są to klasy boks dla całych kontenerów/pudełek i dla etykiet tytułowych. Treść można dodawać swobodnie korzystając z typowych znaczników HTML. Przykładowo p dla pojedynczego akapitu, ul i li dla listy nieuporządkowanej, a dla linku, img dla ilustracji, itd.

Ikonkowe menu

RSSMailFacebooktwitterAby menu pojawiło się na blogu należy wpisać odpowiedni kod html. Znacznikowi należy dodać opisany przeze mnie identyfikator. Jako kontakt opisałam identyfikator mMail, facebookowi przypisałam mFejs a twitterowi mTwit, rss jest elementem bloksowym. W znaczniku, który opiszemy tymi identyfikatorami należy umieścić link (czyli identyfikator nie powinien być przypisany bezpośrednio linkowi). Samą ilustrację przypisałam cesze tło (background), zawartość tekstową linku przesunęłam poza granice ekranu a pole linkujące powiększyłam. Kod wklejamy w polu na dodatki i powinien on wyglądać mniej więcej tak:

mTwit mFejs mMail

Mam nadzieję, że powyższy zapis jest zrozumiały. Jasne fragmenty należy zastąpić własną treścią. Jeżeli potrzebujesz linków do innych serwisów to polecam albo zwykłe, tekstowe dodatkowe górne menu albo zastąpienie jednego powyższych elementów wybranym przez siebie. Jak to zrobić opisywałam dla szablonu New Tech Eart, na przykładzie ikonki kontaktowej, której tam brakuje.

W szablonie opisane też jest już wspomniane, bardziej uniwersalne górne menu.

Zmienna szerokość

Ten szablon zapewnia blogowi zmienną szerokość (Responsive Design). Powstaje ona dzięki wykorzystaniu możliwości CSS3, które pozwalają za zdefiniowanie wyglądu dla określonej szerokości okna przeglądarki. Ja wybrałam trzy opcje. W starych, nieaktualizowanych wersjach przeglądarek będzie to zwykły dwukolumnowy układ, naturalny dla tego kodu HTML. Jeżeli szerokość okna na to pozwoli to elementy na blogu zostaną podzielone na trzy kolumny. To będzie właśnie druga i trzecia opcja, które różnić się będą jedynie wielkością odstępów pomiędzy elementami.


sobota, 30 czerwca 2012, kate_mac

Społecznościowo


TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2012/07/24 17:14:40
Ciao Kate! Jestem wierną fanką Twoich szablonów, obecnie używam szbalonu blokowego, ale intensywnie myślę nad zmianą. Szukam czegoś maksymalnie prostego i minimalistycznego z trzema szpaltami i ten szablon - Typography - bardzo mi się spodobał. Mój blog jest jednak utrzymany w szarości z elementami niebieskiego i nie chciałabym się z tym schematem kolorów rozstawać. Czy w tym szablonie jest możliwość zmiany kolorów? a przynajmniej zmiany żółtego? Grafikę w topie już umiem zmieniać :) będę wdzięczna za odpowiedź!
pozdrawiam
An
-
2012/08/20 17:40:04
@blocked_by_design
Kolory można zmienić w każdym szablonie. Nieco więcej problemu jest ze zmianą kolorów grafik ale same szablony łatwo zmienić w każdym szablonie. Przydadzą Ci się te dwie notki:
Zmiana wyglądu: kolor linków (na przykładzie szablonu dashed)
Ctrl+F
W szablonie użyte są dwa odcienie żółtego.

Faktycznie szablon Typografy jest bardzo minimalistyczny ale jego geometryczność sprawia, że jest też bardzo wyrazisty więc może się zastanów jeszcze. Moim zdaniem zacznie prostszy w wyglądzie jest szablon Ephemeral. Tutaj kolorami wyróżniającymi są brązowy, pąsowo różowy i oliwkowo zielony - je można równie łatwo zmienić jak żółty.

Najlepszym moim zdaniem jest szablon Drawning Hands. Widziałam u kogoś jego piękną niebieskawą przeróbkę ale on jest dwukolumnowy.
Podobny do niego jest jednak Cups of Tea, który jeżeli tylko się mieszczą to ma trzy szpalty. Wstawisz własny top, zmienisz kolor linków na niebieskie i może zamiast kwiatków w tle dasz tam coś bardziej jednolitego i prosty niebieskawy szablon gotowy.
-
2013/02/08 22:01:14
skopiowałam od Ciebie szablon, bardzo dziękuję :)
-
2014/01/29 14:53:13
Hej,
szablon jest piękny, chciałabym dokonać maleńkich zmian. Natomiast jak chcę cokolwiek zmienić w kodzie wracam do podstawowego szablonu bloxa. Czy jest jakaś blokada że nie można nic zmieniać?

Zależy mi na wyrzuceniu tej środkowej szpalty bo ona w moim blogu nic nie wniesie oraz na poszerzeniu głównej szpalty aby tekst był bardziej czytelny.
-
2014/02/19 15:35:59
@jamarcinkowska
Zakładam, że wiesz jak poszerzyć sobie główną szpaltę. W przypadku szablonu powitalnego zmiany będą nieco bardziej skomplikowane bo jest on elastyczny (jego szerokość zależna jest od szerokości okna przeglądarki).

Natomiast jak chcę cokolwiek zmienić w kodzie wracam do podstawowego szablonu bloxa. Czy jest jakaś blokada że nie można nic zmieniać?

Nie ma żadnej blokady. Wystarczy, że po skopiowaniu szablonu a przed wprowadzeniem zmian wylogujesz się i zalogujesz na nowo do swojego bloga. Sprawi to, że nowy szablon wczyta się także w ustawieniach.
Odpowiedzi na twoje pytanie zawarte są także w tych notkach więc jeżeli masz jakieś wątpliwości co i dlaczego się dzieje przy kopiowaniu zerknij do nich:
Kopiowanie szablonu - akapit zatytułowany UWAGA wyraźnie ostrzega przed wprowadzaniem zmian bezpośrednio po skopiowaniu szablonu
Błędy występujące po skopiowaniu szablonu - akapit zatytułowany: Problem: Skopiowałam/em szablon i chcę go sobie troszkę zmienić lecz w polu na arkusz css dalej jest kod starego szablonu.
FAQ - problemy ze świeżo skopiowanym szablonem - opisywany jest troszkę inny problem al też dotyczy zmian wprowadzanych bezpośrednio po skopiowaniu szablonu
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...