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

Każdy szablon można zmienić: sportowy na kulinarny

Temat szablonu to rzecz względna. W dużej mierze ten temat definiowany jest przez główną ilustrację. Wystarczy wymienić jedno zdjęcie i temat zmieniony. Co innego klimat, to coś bardziej nieuchwytnego. Wybierając szablon należy znaleźć swój klimat, patrzeć na układ, wielkość i odstępy między elementami, kolory... a następnie wymienić sobie główną ilustrację i może jeszcze pozmieniać parę dodatków. Klimat zostanie, tylko temat się zmieni.

Dziś zmieniać będę jeden z pierwszych moich szablonów (licząc ten, który zrobiłam dla siebie piłkarski brązowy będzie dokładnie trzecim). Zawsze mam wrażenie, że jest niedostatecznie atrakcyjny. Wszyscy piłkarze rzucili się na jego towarzysza, szablon piłkarski zielony i w porównaniu do niego popularność brązowego wypada słabo. Ale pora to zmienić.


4 szablon piłkarski brązowy zmieniony na kulinarny

Szablon sportowy 04 - piłkarski brązowy, zmieniony na typ kulinarny
na starym kodzie, dla blogów na blox.pl. -500px- 



Temat szablonu możemy zmienić na dwa sposoby. Bardzo prosto poprzez nadpisanie plików w zasobach bloga. Równie prosto ale ucząc się co nieco o css i w arkuszu właśnie wprowadzając zmiany. Podaję tylko gotowe rozwiązania. Obie instrukcje są bardzo proste do zastosowania i można je stosować zamiennie. Zacznę od nadpisywania plików w zasobach.

Jeżeli ktoś chce się pochwalić swoją zmianą albo ma jakieś pytania odnośnie zmiany tego szablonu to zapraszam do komentarzy.

Adres zmienianego szablonu: http://sportowy04szablonkatemac.blox.pl

szczegółowe informacje o szablonie można znaleźć w notce: Po zielonej trawie piłka goni... część 2

fragmenty szablon sportowy 04 na kulinarny

Całkiem sporo rzeczy w szablonie zostawimy w spokoju. Bardziej zaawansowane zmiany można wprowadzać we własnym zakresie. Teraz prosto, łatwo i przyjemnie zajmiemy się topem i kilkoma innymi piłkarskimi elementami. W spokoju zostawimy zaś wielkość elementów, kolory, wygląd pojedynczej notki.

Zmiana poprzez nadpisanie plików w zasobach

W skrócie instrukcja wygląda tak:

1. Przygotowujemy plik o wysokości 275px i koniecznie nazywamy tak samo jak ten z szablonu czyli s4_body_bg.gif

2. Przygotowujemy plik o wysokości nie większej niż 180px a szerokości nie większej niż 770px (najlepiej około250px) i zapisujemy go koniecznie pod nazwą s4_pilka.gif

3. Favikonkę zmniejszamy do rozmiaru 16x16px i zmieniamy jej nazwę na s4_pileczka.png

4. Trzy powstałe pliki ładujemy do zasobów bloga zaznaczając uprzednio opcję nadpisz pliki.

GOTOWE

Powyższa instrukcja powinna w zupełności wystarczyć ale jeżeli potrzebujesz czegoś dla bardziej zielonych to poniżej wpisałam dokładnie tą samą instrukcję uwzględniając dokładniejsze wyjaśnienia i wizualizacje.

Pliki graficzne z szablonu piłkarskiego brązowego:

  • http://sportowy04szablonkatemac.blox.pl/resource/04_top.jpg
  • http://sportowy04szablonkatemac.blox.pl/resource/04_repeat.jpg
  • http://sportowy04szablonkatemac.blox.pl/resource/04_bottom.jpg
  • http://sportowy04szablonkatemac.blox.pl/resource/s4_body_bg.gif
  • http://sportowy04szablonkatemac.blox.pl/resource/s4_pilka.gif
  • http://sportowy04szablonkatemac.blox.pl/resource/s4_pileczka.png

Pierwsze trzy piliki to delikatne ozdoby dookoła pojedynczej notki, je zostawiamy w spokoju. Do zmiany mamy trzy pliki: tło w body, zawierające dwa wzory, tytułowe i pod kategoriami; obrazek wyświetlany obok tytułu; i piłeczkę, dokładnie taką samą jak faviconka. Mogą być w zasadzie dowolnego rozmiaru i koloru, powinny jednak pasować do szablonu brązowego. Tło powtarzane w body powinno być ciemne bo tytuł i kategorie pisane są jasnym kolorem. Piłeczka zaś powinna być niewielka. Zwykła faviconka może być dowolnego rozmiaru ale my wykorzystamy ten obrazek jeszcze jako ikonkę obok tekstu więc nie powinna być większa niż ok. 1em (czyli wysokość litery).

1. Tło w body - główny element wizualny szablonu

tło w body szablonu sportowego 04Nazywa się s4_body_bg.gif i jest plikiem typu gif i taki właśnie plik musimy przygotować. Szerokość nie ma większego znaczenia, tło powtarzane jest horyzontalnie więc zadbać trzeba tylko aby jego końce pasowały do siebie. Wysokość jest istotna bo będzie stała a na tym tle muszą się zmieścić dwa elementy: tytuł i kategorie. Kolorystyka najlepiej niech będzie ciemna bo zarówno tytuł jak i kategorie pisane są jasną czcionką. Ilustracja nie musi się składać z dwóch wzorów, jednolita też spełni swoje zadanie.

Wysokość elementu tła: 275px

Część tytułowa: ok. 180px

Część na kategorie: ok. 95px

Pięć pikseli mniej czy więcej nie zrobi różnicy ale już piętnaście może powodować kłopoty.

Naszą ilustrację zapisujemy jako plik gif o nazwie dokładnie takiej samej jak oryginalny plik z szablonu czyli: s4_body_bg

Ja przygotowałam grafikę o tej samej kolorystyce ale odwrotnym ułożeniu barw. Zamiast pasków i trawy zrobiłam deski i tapetę. Aby wzorek dobrze mi się powtarzał mój plik musiał być szerszy.

tło w body szablonu sportowego 04 zmienionego na kulinarny

2. Tło w części tytułowej - główny indywidualny ozdobnik

pilka z szablonu sportowego 04Nazywa się s4_pilka.gif i jest plikiem typu gif i taki właśnie plik musimy przygotować. Szerokość nie ma większego znaczenia, istotne jest jednak aby uwzględnić miejsce na tytuł. W części gdzie będzie wyświetlał się napis tło nie powinno być ani jasne, ani przesadnie wzorzyste. Maksymalnie można przygotować ilustrację szeroką na <770px, to szerokość bloga. Najlepiej jednak jeżeli nie będzie ona dużo większa niż 300px. Wysokość jest istotna bo bardziej ograniczona, tytuł jest wysoki na 180px i to jest maksymalna wysokość tej części.

Wysokość maksymalna: 180px

Maksymalna szerokość: 770px

Proponowana szerokość: ok. 250px

Naszą ilustrację zapisujemy jako plik gif o nazwie dokładnie takiej samej jak oryginalny plik z szablonu czyli: s4_pilka.gif

jabłka do zmienionego na kulinarny szablonu sportowego 04Ja przygotowałam grafikę z przekrojonym jabłkiem. Pozbawiłam ją zupełnie tła ale to nie znaczy, że wszędzie się nada. Pliki typu gif nadają elementom ostre, pikselowe krawędzie bo choć obsługują przezroczystość to tylko w wersji wszystko albo nic. Warto więc przygotować ilustrację o regularnych prostokątnych kształtach albo połączyć ją z tłem albo skorzystać z następnej instrukcji, która da więcej swobody zmieniającemu.

3. Ozdobnik przy zakładkach

pileczka, favikonka z szablonu sportowego 04Ja wybrałam obrazek, który potem wykorzystuję jako faviconę. To wygodne rozwiązanie więc je polecam jeżeli tylko wam spasuje.

Jeżeli też chcesz w tym miejscu wstawić swoją faviconę to tylko przypilnuj aby jej rozmiar był nie większy niż 16x16px. Konieczna jest też zmiana nazwy i możliwe, że typu pliku (rozszerzenia, musi być png).

pileczka, favikonka z szablonu sportowego 04 zamieniona na jabłkoObrazek przy zakładkach nazywa się dokładnie s4_pileczka.png i taką nazwę powinien mieć. Dla przeróbki zmniejszyłam jedną z połówek jabłka. W oryginale jest zaś zupełnie odrębna piłeczka.

4. Nadpisywanie plików w zasobach

Gdy odpowiednie pliki są już gotowe i mają odpowiednie nazwy możemy je załadować do zasobów naszego bloga.

WPISY -> PLIKI -> 2themeD_110908 -> Nowy plik -> Nowy plik/zdjęcia (+nadpisz istniejące pliki)

Wchodzimy więc w edycję bloga. W menu WPISY wybieramy zakładkę PLIKI. Otwiera się nam lista zasobów bloga. Jeżeli pliki szablonu są w jakimś folderze a zapewne będą to warto je tam zostawić. Wchodzimy więc w folder z plikami naszego szablonu 2themeD_110908, tam powinny być już załadowane pliki z piłeczkami i tłem. Klikamy w opcję nowy plik. Następnie zaznaczamy nadpisz istniejące pliki i klikamy Nowy plik/zdjęcia.

Teraz pozostaje już tylko sprawdzić czy nasz szablon wygląda tak jak powinien. A powinien wyglądać na zmieniony. Mój zmienił się tak:

Dla tych co chcą nie wyjaśnień a gotowego szablonu

Nie ma tak łatwo moi mili. To jest szablon prezentujący sposób zmiany więc w gotowej wersji nie istnieje. Dla niecierpliwych mam jednak instrukcję błyskawiczną. A dla zniechęconych inne szablony kulinarne.

  1. pobierz pliki zmienionego szablonu
  2. załaduj pliki graficzne do zasobów bloga
  3. jako szablon podstawowy wybierz connections
  4. w polu edycji css zastąp istniejący kod tym znajdującym się wśród pobranych plików
poniedziałek, 19 września 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
s.z.y.m.o.n
2011/09/23 22:43:47
spotrowy? Coś Ci klawiatura figle płata, ale za to tytuł wyszedł intrygujący ;)
-
kate_mac
2011/09/28 10:31:45
@s.z.y.m.o.n
Próbowała się zorientować czy coś takiego jak spotr istnieje, można by zrobić intrygujący szablon :D ale niestety najbliższe sensowne wyjaśnienie takiej zlepki liter to chyba "spot R". Póki co nie wiem co to miałoby być ale temat do zastanowienia się jest.
A tan na serio to nie-całkiem-zaskakujące jest jak często zdarza się taka literówka. Google nawet nie proponuje już wyników wyszukiwania dla poprawnej formy tylko podaje adresy do spotrowych stron. Moja notka jednak taką już za chwilę przestanie być, zaraz to poprawię. Dzięki na info bo sama pewnie bym nie zauważyła.
-
joly_fh
2012/07/29 20:24:47
Uff, mnie się udało zmienić tło i obrazek :)
-
Gość: Ballie, *.icpnet.pl
2015/12/15 13:12:19
Jakoś kolory mi nie pasuja do sportowego, oprócz loga nie widzę tam nic sportowego.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...