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

kolejny szablon serdeczny - wielokolumnowa bliskość [2013]

Planując w lutym 2009 serię serdeczną bardzo mi zleżało na tym aby szablony różniły się charakterem. Chyba nawet za bardzo. Gdy natrafiłam na grafikę OTH: Show Me The Way To Your Heart która ma zupełnie inny charakter niż moje szablony zdecydowałam, że będzie ona podstawą szóstego projektu. Szablon wyszedł intensywny i ciekawy i długo spełniał swoje zadanie. W 2013 roku zdecydowałam się zmienić go, nie dlatego, że był zły, brzydki czy przestarzały. Zmieniłam go bo miałam pomysł na szablon, który będzie mi się bardziej podobał.

szablon serdeczny 06, bliskość rzeczy

Szablon serdeczny 06, Bliskość rzeczy,
na starym kodzie, dla blogów na blox.pl. -500px- 


W pierwotnej wersji szablon powstał w maju 2009 roku jednak z tej oryginalnej wersji nic poza ogólnym tematem nie zostało. Jest to teraz jasny szablon z zarówno kobiecymi jak i męskimi akcesoriami. Jest bardzo w moim guście. Wielokolumnowość jest tu rozwiązana naturalnie: jak będzie wystarczająco dużo miejsca to poszczególne kolumny pojawią się we właściwych miejscach.

 

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

fragmenty szablonu serdecznego06

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 jasne (#f0e3c2) w body kremowa grafika
kolor tekstu czarny (#000)
kolor linków malinowy (#f20d34)
pozostałe kolory niebieski (#464370)
krój użyty w notce Trebuchet MS; dodatkowo Amatic SC 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 Amatic SC
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 związków damsko-męskich. Czcionki, połączenie kolorów, różnorodność tekstur, wszystko to bardzo mi odpowiada. Połączenie elementów słodkich i nieco szorstkich jest dla mnie idealne.

Jedyną rzeczą jaką bym zmieniła sobie po skopiowaniu to serduszkowe czekoladki - nie jestem serduszkową osobą i wystarczyłyby mi te na butach ale czekoladki te idealnie pasują do tematu tego szablonu więc się na nie zdecydowałam. Jeżeli ktoś będzie szukał serdecznego szablonu to takie rozwiązanie będzie dla niego odpowiednie.

Wymiana tła dookoła bloga

wzorek z szablonu serdecznego 06Takie 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.

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ę ser06_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 rzeczy

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 buty, klucze, cała masa damsko-męskich drobiozgó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ę ser06_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 6 szablonu serdecznego

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. 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/ser06_bg_1.jpg) repeat center center;
 display:inline-block;
 color:#000;
 font-size:4em;
 line-height:1em;
 word-spacing:0.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 Double-J Design i należące do zestawu: Chocolate Hearts 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: ser06_c1.png, ser06_c2.png, ser06_c3.png, ser06_c4.png, ser06_c5.png, ser06_c6.png, ser06_c7.png, ser06_c8.png, ser06_c9.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.


niedziela, 03 maja 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
RSS dla pomarańczowego z szablony katemac
Zrobiłam sobie małą przerwę i teraz wracając przyglądam się poprzedniemu wpisowi... Przyszło mi więc do głowy, że w żółtym szablonie można całkiem wyraźnie wyróżnić RSS. Aktualnie link znajduje się zaraz obok kategorii czyli w tradycyjnymbloksowym ... »
Wysłany 2009/05/23 14:39:08
Komentarze
shi-ann
2009/05/03 19:38:48
Jak zawsze ciekawy szablon. Choć te czerwone linki bardzo mi nie pasują...
-
mrs_dalloway
2009/05/05 22:20:16
Szalenie mi się podoba ten szablon i bardzo chętnie bym go przygarnęła, gdyby nie drobiazg. Prawa ręka mężczyzny. Widać, że cięta. Sylwetka wygląda jak, nie przymierzając, Przemysław Edgar. Da się to poprawić? Niby szczegół, ale... No właśnie. Ja zawsze najpierw zauważam takie duperele. Broń Boże się nie czepiam, bo całokształt jest naprawdę świetny!
-
mateusz3980
2009/05/12 01:10:38
Mnie się podoba i sobie przywłaszczyłam. Chociaz tematyka do blogu mego nie pasuje
Fajne sa 3 kolumy i kolorki.
pozdrawiam
Ania
-
gryflash
2009/05/23 14:50:15
Pobarałem ten szablon i będę go urzywać. Kate, tworze szablony sa naprawde ciekawe. Osobiście gotów bym był nawet za nie zapłacić;) Pozdrawiam!
-
kate_mac
2009/05/23 15:43:47
@gryflash, mateusz3980(Ania), mrs_dalloway, shi-ann
cieszę się, że szablon się podoba; charakter szablonu w dużej mierze zależy od głównej ilustracji, ta jest jak na mnie dość nietypowa ale szablon dzięki niej wyszedł fajny i nawet po wymianie grafiki będzie ciekawy

@mrs_dalloway
tą duperelę też zauważyłam nawet zastanawiałam się czy nie poprawić ale ten szablon wychodzi z podobnych założeń co blokowe - za wyjątkiem przycinania grafik staram się ich nie poprawiać przede wszystkim dlatego, ze w tych konkretnych przypadkach szablon tworzę CSSem a grafikę każdy może sobie dobrać sam

@shi-ann
przyznam, że to ciekawe bo mi pasują ;)
więc chodzi tylko o kolor? że czerwone? czy tez może o coś więcej?
są bardzo wyraziste i to nie każdemu przypadnie do gustu (podobnie było w przypadku The Kid)
-
2009/05/24 16:35:02
skorzystalam z szablonu, dziękuję :)
-
2009/06/17 19:44:22
piękny szablon. Przygarnęłam. Dzięki Twojemu blogowi i szablonom można się wiele nauczyć.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...