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

Ciemny szablon z biżuterią [2013]

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.


niedziela, 19 kwietnia 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
irytek05
2009/04/20 22:14:17
Są szablony, które inaczej odbiera się o różnych porach dnia. Ten właśnie do nich należy. Wyrażnie zyskuje w godzinach wieczornych. Co nie znaczy, że w dzień mi się nie podobał;) Zyt dużo światła nie pozwalało jednak na docenienie jego uroku. Ma przepiękne kolory. Tło w dwóch odcieniach daje wrażenie aksamitu. Linki i tytuły w barwach szarego różu, fioletu, trudno nawet je nazwać, a jeszcze trudniej znaleźć w paletach kolorów. Delikatny, spokojny, pełen elegancji. Mój numer 1 wśród Twoich szablonów. Że też ja takiego nie wymyśliłam;)))
W tej chwili wykorzystuję twoje doświadczenie z impactem, chyba mam szablon, w którym ta czcionka będzie pasowała ;-)
-
2009/04/21 18:13:25
Piękny... jak zwykle:)
-
Gość: jupiters, *.neoplus.adsl.tpnet.pl
2009/04/24 14:35:49
zrobisz, katie, kiedyś szablony książkowe? ; ]
-
kate_mac
2009/04/25 13:17:21
@irytek05
oczywiście masz rację; ciemne szablony o stłumionych kolorach nie lubią światła dziennego ;)
ciesze się, że tak bardzo Ci się podoba bo j nie byłam do niego przekonana; robiłam go dwa czy trzy razy od nowa, chciałam aby był ciemny i przytłumiony, chciałam lekko czerwonawo-niebieskawy ale nie jaskraw fioletowy; miałam problem ze znalezieniem takich odcieni które by byłyby zbyt oczywiste - faktycznie zależało mi aby trudno było nazwać te kolory ;)
samym szablonem już mniej się przejmowałam - po prostu wybrałam beżowy basic i dużą georgię i nad reszta się nie zastanawiałam
jakoś ten szablon nie kojarzy mi się z Tobą, bardziej z Finetką (połączenie ciemnego, szerokiego szablonu z szeryfową czcionką)
Twoje szablon są mniejsze, bardziej jakby zwarte... nie bardzo wiem jak to określić ale za to w kolorach ostatnio widzę zmianę, wydaje mi się, że wcześniej miałaś okres mocno beżowy, stonowany a teraz na wiosnę bawisz się bardziej intensywnymi kolorami: niebieskościami i zieleniami...

@jupiters
nie wykluczam choć w pewnym sensie część rękodzielniczych, typograficznych czy też z cudzymi topami pasuje do blogów o książkach; nie wiem czy zrobię osobną serię z tematem książki... bardziej prawdopodobne że wątek pisarski pojawi się w serii rękodzielniczej
-
Gość: biżuteryjna, *.ip.xcore.pl
2012/07/22 20:04:27
kate_mac, chciałabym skorzystać z tego szablonu, czy mogłabym? :) Pozdrawiam ;)
-
Gość: Blue, *.eaw.com.pl
2013/12/23 20:15:45
Witaj , piękny szablon ! Czy mogłabym go wykorzystać ? Nie umiem tworzyć szablonów , a przeglądając internet tylko ten tak naprawdę mi się spodobał (ogólnie tylko twoje szablony mi przypadają do gustu ) . Jeśli bym mogła go wykorzystać , to mogłabym również otrzymać instrukcję jak go wstawić ?
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...