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

My Heart Belongs to Daddy [2013]

Let's Make Love nie jest najlepszym filmem Marilyn Monroe. Szczerze mówiąc bywa uważany za jej najgorszy. Aż tak źle bym go nie skomentowała choć trzeba przyznać, że to niespecjalny film. Ma jedna kilka mocnych momentów, które mogą choćby częściowo rekompensować kiepską reżyserię czy źle dobrane kostiumy. Z całą pewnością będzie to ostatnia scena (scena w windzie) czy też sceny Montanda z Berlem, Crosbym czy Kellym. Jest jednak jedna scena, którą nawet osoby nie zainteresowane tym filmem rozpoznają i skojarzą z Marilyn Monroe: pierwsza scena Marilyn w tym filmie czyli piosenka My Heart Belongs to Daddy.

szablon filmowy 02 Let's Make Love

Szablon filmowy 02, Let's Make Love,
na starym kodzie, dla blogów na blox.pl. -500px- 


W pierwotnej wersji szablon powstał w marcu 2009 roku jednak z tej oryginalnej wersji nic poza tematem nie zostało. U podstaw zmiany znalazło się proste założenie: temat 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ść.

 

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

fragmenty szablon filmowy 02

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 (#e2d0b6)
kolor tekstu czarny (#36382E)
kolor linków szary (#585858)
pozostałe kolory czerwony (#CA0009)
krój użyty w notce Trebuchet MS; dodatkowo Devonshire 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 Devonshire
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. Pomysł był ciekawy, obrazki ładne ale całość średnio mi się podobała. 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... sam pomysł porozrzucanych na biurku rzeczy towarzyszy mi od samego początku blogowania.

W przypadku tematu Let's Make Love konieczna była obecność Marilyn, chciałam także aby szablon był bardziej retro glamour. I mam nadzieję, że mi wyszło. W dużej mierze jest to kwestia wyglądu nagłówka i rzeczy tam umieszczonych więc przy zmianie topu łatwo będzie zmienić klimat.

Wymiana tła dookoła bloga

wzorek z szablonu filomowego 02

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 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ę fm2_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 fotosów Marilyn

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 fotosy Marilyn, okulary, wycinek z gazety, biżuteria 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ę fm2_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 2 szablonu filmowego

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. Czerwona i serduszkowa 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 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:360px;
 height:177px;
 padding:70px 20px 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/fm2_bg3.jpg) repeat center center;
 display:inline-block;
 color:#000;
 font-size:3.2em;
 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 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;

daddyMarilyn obok tytułów notek

Obrazki z Marilyn na początku każdej z notek to fragment wspomnianego na początku plakatu. 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 Marylin Monroe na swoim blogu 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: fm2_mm1.jpg, fm2_mm2.jpg, fm2_mm3.jpg, fm2_mm4.jpg, fm2_mm5.jpg, fm2_mm6.jpg. 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, 08 marca 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
gniazdowy
2009/03/09 01:28:59
Jakiś czas temu juz mi pomogłaś
Jak zrobić wyrównanie kalendarza oraz ostatnich notek do prawej części prawej szpalty?
NIe umiem sobie z tym poradzic

Pozdrawiam
Gniazdowy
-
shi-ann
2009/03/10 13:46:29
Bardzo ciekawy szablon.
-
irytek05
2009/03/11 23:38:33
Kate, już wydawało się, że nic nowego nie można wymyśleć w układzie grafiki na blogu, a tu niespodzianka. Bardzo pomysłowo:) Podoba mi się ten sposób, daje wiele nowych możliwości. A ja wpadłam kuknąc na Twoją radę dotyczacą u#Stopki. Robiłam ją w kilku szablonach z dobrym skutkiem, nawet zrobiłam sobie "zjeżdżanie" w dół (lenistwo jest motorem działania;) i nagle dzisiaj w moich Zmaganiach nie zadziałało. W dół tak, w górę nie. Szablon jest "biały", więc powinno się dać. Skasowałam wszystko i przyszłam do żródła;) Niestety nie mogę znależć tej notki, ale znalazłam coś lepszego :D
"niniejszym oficjalnie, na mym blogu, obiecuję Ci Irytku, że wymyślę sposób aby ułatwić szukanie tutaj rad ;)
(czyt. zrobię tagi do blogowych notek)". hehe, Kate, to napisałaś 6 lutego 2008:D


-
malina-gb
2009/03/13 14:01:04
Witam. Bardzo ładne tworzysz szablony. Chciałabym zaczerpnąć kilku informacji. Proszę o kontakt na maila malina-gb@gazeta.pl, nie mogę skorzystać z opcji kontakt na stronie głównej Twego bloga.
Pozdrawiam
Malina
malinagb.blox.pl/html
-
kate_mac
2009/03/15 16:45:56
@gniazdowy
tekst wyrównuje się korzystając z cechy text-align; aby wyrównać do prawej podaje się wartość right; chcąc wyrównać wszystkie elementy z wąskiej szpalty opisz ta właściwość w selektorze #BlogWazkaSzpalta i oczywiście #SkomentujWazkaSzpalta sprawdź jednak czy selektory opisujące poszczególne elementy wąskiej szpalty nie mając opisanego text-align - jeżeli mają to zmień na right
nie jestem pewna czy rzeczywiście chodzi Ci o wyrównanie tekstu...
bo istnieje jeszcze coś takiego jak pływanie elementów i teoretycznie mógłbyś każdy z elementów wąskiej szpalty opisać jako pływający do prawej krawędzi (float:right;) ale z Floatami należny uważać bo z doświadczenia wiem, że łatwo sobie posypać szablon nie rozumiejąc jak działa float;

@irytek05
proszę bardzo udawana stopka
zapewne to czego szukasz najczęściej będzie w kategorii o blogowaniu
a tagi wtedy zrobiłam ;) tylko ich na blogu nie dodałam i jak teraz dodawałam chmurkę tagów to wykasowałam z niej notki blogowe zostawiając tylko szablony - razem takie pomieszane tagi nie sprawdzały się
teraz myślę o Frequently Asked Questions które zaplanowałam podzielone na trzy tematy (o blogowaniu, o CSS i o moich szablonach) tylko pytań jeszcze nie wybrałam...
póki co zrobię chyba zakładkę z 7-10 przydatnymi wpisami z mojego bloga... jakieś sugestie?
myślę o Udawanej stopce, układach, trzeciej szpalcie (html i CSS) może jeszcze linki do stron z generatorami kolorów...

@malina-gb
tam jest podany mój adres adres mailowy... nie trzeba "korzystać z opcji" wystarczy przepisać /skopiować adres
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...