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

Pierwszy świąteczny szablon z choinką zupełnie od nowa [2012]

Kiedyś były tu dwa pierwsze świąteczne szablony. Nie byłam z nich zadowolona więc przy wielkich porządkach przedświątecznych w 2012 roku postanowiłam przekształcić znacznie te pierwsze dwa. Szablon z reniferem dostał nową notkę a ten z choinką opisałam na nowo w tejże starej notce.

szablon świąteczny 01, zielony

Szablon świąteczny 01 - z zieloną choinką,
na starym kodzie, dla blogów na blox.pl. -500px- 


U podstaw tej zmiany znalazło się proste założenie: choinka ma zostać a szablon ma być zwyczajnie ładny. Można to osiągnąć na wiele sposobów, ja postawiłam na biurowy koncept i w części zmienną szerokość. W rezultacie powstał szablon całkiem przyjemny, całkiem wygodny i całkiem łatwy do przekształcenia w coś nie-świątecznego. Jeżeli kogoś interesuje jak wyglądał poprzednio to zapraszam na testowy blog z nową wersją szablonu.

 

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

fragmenty szablon świąteczny 01

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 białe (#fff) w body beżowe zależne od grafiki (#dbb682)
kolor tekstu czarny (#000)
kolor linków czerwony (#b4030d)
pozostałe kolory niebieski (#1b1464)
krój użyty w notce Georgia
wielkość tekstu notki small (ok 14px)
interlinia w notce automatyczna
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 - kursywa, powiększenie i zmiana koloru na niebieski
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, 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

Pierwsze dwa świąteczne szablony wyszły mi jakoś nieciekawie. Ten pierwszy, zielony z choinką cierpiał na brak koncepcji, był zwyczajnie nudny. Drugi, czerwony z reniferem miał odwrotny problem, za bardzo skupiłam się na koncepcie, na pomysłowym wyglądzie notek i tytułów, który może i był nieco nietypowy ale za to całość była toporna.

Ten z choinką był nudny bo chciałam się inspirować świąteczną kartką, której nigdy nie miałam pod ręką gdy nad szablonem pracowałam. Z tego powodu zawsze odpuszczałam licząc na to, że jak znajdę kartkę to dokończę projekt. Nigdy tak się nie stało. Poprawiając szablon teraz postawiłam sobie trzy założenia wstępne: ma być choinka, ma być bardzo jasno ale przytulnie i ma być to koncept biurkowy.

Wymiana tła dookoła blogawzorek z szablonu świąteczny 01

Szablony świąteczne z natury są bardzo tymczasowe postanowiłam więc zrobić je tak aby można się było pozbyć świątecznych elementów i dalej korzystać z szablonu.

W tle dookoła bloga wyświetla się zwykły, nieświąteczny wzorek nie trzeba się więc go pozbywać ale oczywiście można. Tradycyjnie są dwa sposoby: przez nadpisanie (plik nazywa się bn1_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).

cyjan grey white magenta

W szablonie jest jeszcze kilka dodatkowych wzorków, których celem jest dodawanie tekstury elementom.

Usunięcie stosu gazet z choinką

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

Część graficzna tytułu czyli ten stos gazet z choinką i kubkiem herbaty na nim oraz świąteczne kartki z długopisem 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ę bn1_tea.jpg; 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 1 szablony świątecznego

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.

Miejsce na tytuł bloga

Tytuł bloga jest w tradycyjnej postaci - zwykły tekst z linkiem. Szara i niebieska karteczka 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 biała tekstura papieru. Jeżeli chcesz to możesz przygotować własną karteczkę i jakimś ładnym, 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óym opisany jest link tytułu bloga.

#BlogTytulText a {
 width:300px;
 height:207px;
 padding:40px 50px 0;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
 transform: rotate(3deg);
 box-shadow: 0px 1px 6px #666, 50px 50px 100px hsla(0,0%,100%,.7) inset;
 background: #fff url(/resource/bn1_bg_w.jpg) repeat center top;
 display:inline-block;
 color:#000;
 font-size:3em;
}

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 koloru i 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:#fff;
 font-size:0px;

Ciasteczka obok tytułów notek

Ikonki z ciasteczkami na początku każdej z notek to projekt autorstwa Brainleaf. W szablonie zdecydowałam się użyć cały zestaw i korzystając z możliwości jakie daje CSS3 poprzypisywałam tych siedem ikonek 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. 

Trochę technicznego wyjaśnienia kolejności

Zasada jest prosta. Ikonki pojawiają się przy wpisach pod warunkiem, że dany wpis jest pierwszym, drugim, trzecim, itd. elementem w nadym kontenerze. Kontenerem jest cała szeroka szpalta więc pierwszy wpis jest dopiero trzecim elementem (najpierw są kategorie, potem data wpisu a dopiero jako trzeci element szerokiej sam wpis).

Jeżeli nie chcesz świątecznych ciasteczek na swoim blogu to po prostu usuń je 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: bn1_cookie01.png, bn1_cookie06.png, bn1_cookie02.png, bn1_cookie03.png, bn1_cookie07.png, bn1_cookie04.png, bn1_cookie05.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

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.


niedziela, 16 grudnia 2007, kate_mac

Społecznościowo


TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Świąteczne szablony kate_mac z szablon_team
Kate_mac po raz pierwszy na szablon_team. Temat: zima i święta. Zielona choinka i czerwony renifer są zapewne już znane ale niebieski z płatkami śniegu to niepublikowana wcześniej nowość. z zieloną choinką zerwony z reniferem niebieski ... »
Wysłany 2007/12/20 14:46:26
Blogowe szablony na święta i nie tylko z szablony katemac
Mamy połowę grudnia więc myślę, że to dobry czas aby zacząć myśleć o świętach. Świąteczny konkurs Tchibo trwa w najlepsze, w supermarketach puszczają te wszystkie anglosaskie wesołe piosenki świąteczne więc zacznijmy zabawę w święta. Na początek ... »
Wysłany 2008/12/14 15:17:43
Komentarze
2007/12/17 17:30:37
Czerwony jest bardzo sympatyczny. Bardzo podoba mi się zaznaczenie tytułu notki, zwałaszcza wtedy gdy jest też data. Fajna grafika i bombki i renifer. Ładne tło i cień. Moim zdaniem super.
-
2007/12/17 19:19:49
»shi-ann
To super bo bałam się że się nie udały (taki malutki zakalec ;)

»islas51
Basiu, ukryłam Twój komentarz ponieważ podałaś pewne nazwijmy to poufne informacje. Jutro się wszystkim zajmę i pomogę Ci uporządkować bloga przed świętami.
LAS PALMAS, słońce, sandałki... jak to pięknie brzmi.
URL to adres internetowy
-
2007/12/19 01:29:43
Od kilku dni chodzę w okół Twoich nowych szablonów i próbuję rozgryźć, jak to jest, że bardzo mi się podoba czerwony szablon, ale wiem, że nigdy nie połączyłabym tych dwóch odcieni czerwieni. Chyba brakuje mi odwagi, a może wyobraźni. Grafika tytulowa, jak zwykle u Ciebie symboliczna i delikatna (choć wyobrażam sobie ile musiałaś napracować się z programem graficznym).
Bardzo fajny pomysł na konturowego renifera z saniami. Uklad elementów notki pomysłowy. Jesli mam uwagę, to do linków we wpisie. Mało się odznaczają, choć rozumiem, że nie chcąc wprowadzać kolejnego koloru, nie miałaś dużego manewru. Ten z choinką już wcześniej opisałam:)
Kate, dlaczego nie publikujesz Swych szablonów na Szablon_team?
-
2007/12/19 08:44:26
Irytku
wiesz jaki mam problem z uprawnieniami dla kate_mac; okazało się, że to problem z gazetową pocztą; wymieniam się teraz mailami z mądrymi od poczty ale na razie rezultatów nie widać i dlatego wczoraj napisałam do taishy aby przesłała mi uprawnienia na szablonykatemac; i teraz już będę i na szablon_team;
teraz Cię zaskoczę bo w grafice tytułowej nie ma żadnych sań, to złudzenie; jest tam jeden renifer i kilka cukierków w kształcie lasek, to one układają się tak jakby były tam sanie; i tak, masz racje, kilka wersji nagłówka zrobiłam, były same cukierki, cukierki z mikołajem, cukierki z bombkami a stanęło na cukierkach z reniferem;
co do koloru to miałam w zapasie jeszcze jeden odcień czerwieni, ten najprostszy, klasyczny red ale to już wyglądało okropnie;
teraz robię niebieski ze śnieżynkami
-
2007/12/19 17:52:03
a ja sie przyszlam pozegnac, ale widze ze mnie tu i tak nie bylo,
piekne szablony,
dziekuje raz jeszcze
-
2007/12/19 18:07:23
proszę bardzo mimo iż już nie korzystasz
-
2007/12/20 19:40:51
Ten czerwony razi po oczach, od razu go wyłączyłam.
-
2007/12/21 09:16:42
czerwony ma razić po oczach, dla poszukujących spokoju jest niebieski
;)
-
2007/12/28 18:13:26
A mnie się obydwa podobają!
-
Gość: , 195.184.83.15*
2009/11/13 14:24:35
CZEŚĆ
-
Gość: , 195.184.83.15*
2009/11/22 15:15:20
mi się tezpodobają
-
Gość: , 85.222.87.7*
2009/12/02 15:18:16
Mi się podobają kolory czerwony i biały , bo to bardziej kolory świąteczne a co wy na te kolory?
-
Gość: , chello087207131104.chello.pl
2009/12/07 19:42:07
głupie
-
2009/12/10 19:57:58
zielony jest na moim blogu krajalnica.blox.pl - dziekuję :)
-
Gość: , 85.222.87.7*
2009/12/22 11:44:32
To może czerwony , biały, ciemny niebieski i pomarańczowy?
A co ty myślisz gościu co na pisałeś że kolory czerwony i biały są głupie?
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...