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

Szablon kulinarny z zygzakiem [2013]

Do października 2013 szablon tu umieszczony wyglądał zupełnie inaczej. Był bardzo oczywistym nawiązaniem do wyglądu bloga Moje Wypieki z roku 2008. Uprościłam wygląd, dodałam nowe ikonki, nieco zmieniłam kolor, etc. Minęły kolejne lata i przy okazji tworzenia na nowo szablonu świątecznego zdałam sobie sprawę, że świetnie się nada także na kulinarny. Kolorystykę i klimat wzięłam zaś ze zdjęć Start a Vintage Kitchen Collection. 

szablon kulinarny 02, Rustykalny zygzak

Szablon kulinarny 02, Rustykalny zygzak,
na starym kodzie, dla blogów na blox.pl. -500px- 


Gdy zrobię taki szablon to zawsze mam mocno ambiwaletne uczucia bo wiem, że będzie się podobać. Ze względu na klimat, ze względu na całość, ze względu na kolorystykę, czcionki, wzorki ale przede wszystkim ze względu na ilustrację tytułową (te kuchenne akcesoria). I to ostatnie zawsze mnie martwi. Jeżeli pokazujesz na blogu własne rzeczy (rękodzieło, wypieki, etc.) to chwalenie się w nagłówku czymś czego w dalszej części bloga nie ma jest strasznie smutne dla mnie. Dlatego z dużymi oporami umieszczam ilustracje w szablonach o tematyce rękodzielniczej czy kulinarnej. Pociesz mnie zawsze to że w nowszych szablonach bardzo łatwo taką ilustrację wymienić.

 

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

fragmenty szablonu kulinarnego

Uwagi o szablonie
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 beżowy (#90816E) w body jasna grafika
kolor tekstu brązowy (#553D33)
kolor linków niebieski (#4F7D95)
pozostałe kolory pomarańczowy (#b64401)
krój użyty w notce Trebuchet MS; dodatkowo Stalemate 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 Stalemate
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

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 kucharzenia. Czcionki, połączenie kolorów, różnorodność tekstur, wszystko to starałam się zachować w bardzo lekkim ale kobiecym klimacie. Świeże, delikatne ale nie przesłodzone.

Jedyną rzeczą jaką bym zmieniła sobie po skopiowaniu to pastelowe babeczki - nie jestem słodką osobą i poza żółtą babeczką reszta wydaje mi się zbyt cukierkowa (żółta też jest cukierkowa ale jakoś w jej przypadku mi to odpowiada).

Wymiana tła dookoła bloga

Takie 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 tło na którym pomarańczowy drobny tekst będzie widoczny.

wzorek z szablonu kulinarnego 02

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ę k02_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 kolekcji akcesoriów kuchennych

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 wałek, nożyczki, czekolada i reszta kuchennych 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 butami musisz go albo nadpisać w zasobach bloga (plik nazywa się k02top.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 kulinarny 02, Rustykalny zygzak

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. Jasne 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 jasna, delikatna tekstura papieru. 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 #666, 50px 50px 100px hsla(0,0%,100%,.7) inset;
 background: #fff url(/resource/k02_bg_1.jpg) repeat center center;
 display:inline-block;
 color:#000;
 font-size:5em;
 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 blokowy. 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:#fff;
 font-size:0px;

ikonkiObrazeczki obok tytułów notek

Obrazki na początku każdej z notek to nic innego jak ikonki zaprojektowane przez Brainleaf i należące do zestawu: Free Cupcake 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: k02_c1.png, k02_c2.png, k02_c3.png, k02_c4.png, k02_c5.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.


czwartek, 30 lipca 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2009/08/02 20:55:33
ja bym dała dowolną.... i tapetę może w jakiś lekii wzorek żeby trochę ożywić ten szablon. Poza tym nic dodać nic ująć :)
-
2009/08/02 21:01:02
odnośnie wzorków to może taki? (trzeci od lewej)
crazy-alice.deviantart.com/art/Pattern-Part-5-101696475
-
kate_mac
2009/08/10 08:44:14
@myniolinka
fajne wzorki; jak rozumiem masz na myśli to szaro-brązowe tło w body?.. to bardzo fajny pomysł ale w tle tytułu, tam gdzie jest słoiczek z konfiturą jest już wzorek - trzeba by było więc to uwzględnić i do body dać taki który będzie harmonizował z tym co już jest albo wymienić ten w tytle na taki sam jak w tle body choć w innym kolorze i o znacznie niższym kontraście
-
2009/08/10 14:35:28
właśnie chodzi mi o to żeby body było ciemniejsze i może wtedy tytuł dopasować do wzorów z body i tylko zmniejszyć kontrast. rozumiem też że słoiczek można zastąpić swoim zdjęciem? albo parę zdjęć wstawić?? tymczasem czekam na retro-colę (chociaż jużwstępnie zdecydowałam się na inny szablon o czym pisałam na maila) pozdrawiam
-
eloise_at_kitchen
2013/01/30 09:36:30
Hej!Nie wiem gdzie o tym napisać, a w szablonie było napisane że prosisz o informacje także użyłam na swoim blogu twój szablon - kulinarny 01 - 3x cupcakes - Jest prześliczny :)
-
2014/01/12 20:49:54
Dziękuję za wspaniały szablon :)
-
Gość: kardamo.blogspot.com, *.play-internet.pl
2014/01/15 09:48:22
Witam!
Napisałam,że porywam tło ale nic z tego jestem zielona w tych sprawach czy jest możliwość wklejenia go na bloggerze?
Proszę o radę.
Pozdrawiam
-
2014/01/15 21:46:00
Dziękuje za szablon :)
-
kate_mac
2014/02/19 14:32:35
@kardamo.blogspot.com
Czy można przenieść szablon z bloksa na blogspota? Można ale należy to zrobić samemu. Najprościej wybrać szablon o najbardziej podobnym układzie elementów i tylko wymienić grafiki w tle i kolorystykę.

@kochani użytkownicy tego szablonu (panna_ce, klaudi23a, rozowakuchnia, zuzana19, peroxide09, bryssska, bernadettap, bardep85, annamaria7252, ula_salat, a także wszyscy następni) nie zasmucajcie mnie; przygotowujecie pyszne potrawy, pieczołowicie komponujecie własne zdjęcia... poświęćcie troszkę czasu na sfotografowanie własnych akcesoriów kuchennych i zastąpcie te nie-swoje w nagłówku bloga swoimi
-
bakelina
2014/05/15 22:47:51
skorzystałam, dziękuję! :)
-
anieczka.k
2014/07/18 18:25:20
Dzięki! Jest prześliczny!
-
2017/09/11 17:07:24
Czy jest możliwość zmiany czcionki i wielkości tytułu bloga? bardzo proszę o instrukcje, jestem początkująca i nie bardzo się jeszcze w tym orientuje.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...