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

blokowy kremowy - dzień drugi

Jako kolejny szablon z serii blokowej przedstawiam kremowy. Inspiracją dla kolorystyki było oczywiście zdjęcie wyświetlające się w części tytułowej. Autorem zdjęcia The happy boy jest JAIRO BD. Zdjęcie jest bardzo radosne i słoneczne dlatego i kolorystyka szablonu jest ciepła. Przeważają odcienie kremowe i jasnobrązowe a jako wyróżnik linków wybrałam pomarańczowy; ogólnie całą paletę nazwałabym wypieczoną a to nasunęło mi pewien pomysł... szablon w takiej ciepłej biszkoptowej kolorystyce świetnie nadawał się będzie na bloga kulinarnego a w szczególności poświęconego wypiekom. Poprzednio wyjaśniałam zmianę stronności szablonu dzięki czemu mimo iż ten szablon jest prawostronny bez problemu można go będzie zmienić na lewostronny - jak to zrobić opisałam w poprzedniej notce. Dzisiaj zajmiemy się czymś najprostszym czyli wymianą grafiki w tytule. Dzięki temu ciepły, letni, piaskowy szablon zmienimy w ciepły, biszkoptowy, kulinarny szablon.

szablon kremowy na bloga
47 szablon blokowy kremowy

Uwagi:

  • autorem zdjęcia The happy boy jest JAIRO BD; zdjęcie zostało udostępnione na licencji cc-by
  • Bloksowa baza to Spokojny ale tak samo powinny pasować htmle szablonów: Almost Spring, Kubrick, Connections, 36i6 A, 36i6 B lub ewentualnie Theme C; html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na odcieniach kremowych (#F2ECE6, #FFE5CC, #ffddbb) i brązowych (#261D13, #564635, #BFAC99). Jedynym kolorowym dodatkiem jest pomarańczowy: ff9900 i #ddaa66.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Zmiany

Blokowy to bardzo prosty, uporządkowany i 'symetryczny' szablon łatwo wprowadzić w nim zmiany, które dostosują szablon do indywidualnych upodobań a jednocześnie nic w nim nie zepsują i szablon zachowa swój oryginalny charakter. Tym razem zmienimy główny obrazek szablonu. W przypadku tego konkretnego szablonu zmiana obrazka nie będzie wymagała niemal żadnego dostosowania grafiki. Szablon jest prosty i nie ma żadnych graficznych ramek czy dodatków wystarczy więc wybrać zdjęcie i do dzieła.

Zmiana zdjęcia w tytule

Jak pisałam poprzednio mam skłonność do rozwlekłych opisów tak więc i tym razem proszę o odrobinę cierpliwości. Wymiana zdjęcia jest banalnie prosta ale aby nie było wątpliwości postaram się ją opisać bardzo szczegółowo ;) Na zmianę zdjęcia mam dwa pomysły, pierwszy gorszy dla tych u których zbliżenie się do arkusza CSS wywołuje wysypkę i drugi rozsądniejszy a zarazem bardziej popularny zmieniający adres pliku w CSS. Zacznijmy jednak od zdjęcia.

1. Nowe zdjęcie

Na początek musimy znaleźć jakieś apetyczne ujęcie jedzonka. Gdy prowadzisz blog kulinarny zapewne dysponujesz sporą bazą smacznych zdjęć więc problemem będzie nie znalezienie odpowiedniego a wybranie tego jednego. Dla szablonu kremowego najlepiej by było wybrać zdjęcie w ciepłych kolorach, raczej pastelowych ale przy niczym się nie upieram. Dla przykładu proponuję: Yummy solar-baked bread by Abri_Beluga (cc-by) albo Shallots by daisybush (cc-by). Zdjęcie nie powinno być mniejsze niż 860px szerokości i około 300px wysokości. Nie może być mniejsze, jeżeli będzie większe to nic się nie stanie, po prostu jego część nie będzie widoczna. Jeżeli tytuł Twojego bloga, lub jego opis nie zmieści się w jednej linii może się przydać zdjęcie o nieco większej wysokości.

Yummy solar-baked bread by Abri_Beluga Shallots by daisybush

2. Metoda pierwsza: nadpisywanie zdjęcia

Warunkiem skorzystania z tej metody jest znajomość nazwy zdjęcia w tytule. Łatwo to można sprawdzić w arkuszu ale skoro w tym przypadku do arkusza się nie zbliżamy... musimy przejrzeć zasoby bloga. Jeżeli szablon został skopiowany niedawno to wszelkie pliki związane z używanym szablonem powinny być w jednym folderze. Wystarczy więc przejrzeć grafiki w tym konkretnym folderze i odszukać tą która wyświetla się w tytule. Gdy znać będziemy nazwę pliku dokładnie tą samą nazwę nadamy naszemu nowemu plikowi ze zdjęciem. Plik dodać musimy do zasobów bloga pamiętając o tym aby zaznaczyć opcje nadpisz pliki. Oryginalne zdjęcie zostanie zastąpione w zasobach nowym. Ta metoda ma nieco 'brutalny' charakter więc ją odradzam.

zasoby nadpisz

2. Metoda druga: wymiana adresu wywoływanego zdjęcia w arkuszu

Sposób ten został już bardzo dokładnie opisany na blogu css.blox.pl w w tej sprawie nic sie nie zmieniło.
Zaczynamy więc od dodania naszego zdjęcia do zasobów bloga - tym razem nie musimy się przejmować jego nazwą. Gdy plik będzie już w zasobach kopiujemy jego adres - będzie nam potrzebny do wpisania w arkuszu.
Następnym krokiem jest odnalezienie w arkuszu CSS odpowiedniej linijki. Chcemy wymienić zdjęcie będące tłem tytułu bloga tak więc odpowiednim miejscem będzie #BlogTytulBox. W przypadku szablonu 47 szablon blokowy kremowy opis tego selektora wygląda tak:

#BlogTytulBox {
WIDTH: 860px;
MARGIN: 0px 20px;
PADDING: 210px 0px 10px 0px;
TEXT-ALIGN: left;
background: url(/resource/47_top.jpg) no-repeat top left;
}

Wystarczy więc teraz wymienić część dotycząca tła. Zastępujemy tylko adres, pozostałych wartości nie trzeba ruszać. Możemy wstawić cały adres zdjęcia albo jego skróconą wersję w postaci '/resource/nazwa_pliku.jpg'

I gotowe

wtorek, 23 czerwca 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
blokowy na kulinarnego z szablony katemac
Witam powakacyjnie i pourlopwo... Wakacje offline, offkomputer, offcodzienność to coś co polecałabym każdemu. Ten wpis przygotowałam wcześniej i planowałam opublikowć w trakcie wakacji ale off było zbyt kuszące... Niektóre szablony bardzo łatwo ... »
Wysłany 2009/08/27 10:31:23
Komentarze
Gość: woz, *.zetosa.krakow.pl
2009/07/08 20:58:47
hej.
spodobal mi sie ten szablon, wykorzystam go w swoim blogu.
pozdrawiam
www.luznegatki.blog.pl
-
2011/03/15 12:30:18
Witam,
i mi spodobał się ów szablon. Wykorzystałem go w swoim blogu. Pozdrawiam serdecznie,
DG.
-
2013/05/02 22:24:15
Witam, wykorzystałam i przerobiłam. Dziękuję bardzo. Nie ma to jak łopatologia :)
-
ssylvvia
2014/02/11 22:41:56
A jak wprowadzić obrazek w tytule gdy go nie ma w szablonie? Dokładnie chodzi mi o szablon biurkowy czerwony.
-
kate_mac
2014/02/19 14:08:55
@ssylvvia
szablon biurkowy czerwony zrobiony jest na nowym kodzie (new_age) więc nie tylko 'brak obrazka w tytule' będzie w tej instrukcji nieadekwatny;
zapraszam na bloga dotyczącego szablonów na nowym kodzie, tam pod wpisem opisującym wspomniany przez Ciebie szablon zostawiłam wyjaśniający komentarz

@mak1903, denisgierat
mam nadzieję, że szablon służył dobrze

@woz
od strony technicznej szablon pasuje tylko na blogi w serwisie blox.pl
jeżeli ktokolwiek chciałby wykorzystać go gdzie indziej to nie mam nic przeciwko ale odpowiednich zmian należy dokonać samodzielnie
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...