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

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

Temat jest chyba jednym z najbardziej istotnych wyznaczników wyboru szablonu. Przypisując szablon do jakiegoś tematu zawsze waham się, odnoszę wrażenie, że określając z góry szablon zamykam innym drogę do skorzystania z niego. Temat zazwyczaj determinowany jest przez główną ilustrację, najczęściej bardzo łatwo ją zmienić. Nie zawsze ale bardzo często.

Dziś zmieniać będę jeden z pierwszych moich szablonów piłkarski brązowy. Poprzednio, poprzez nadpisanie plików w zasobach, sportowy szablon zmieniłam w kulinarny. Proszę jednak nie sugerować się nazwą kulinarnie, nikt nie będzie zmuszał użytkownika szablonu do gotowania. Podobnie dzisiaj zrobimy szablon dla moli książkowych ale znajomość literatury nie jest wymagana. Wystarczy umiejętność czytania... instrukcji.


4 szablon piłkarski brązowy zmieniony na książkowy

Szablon sportowy 04 - piłkarski brązowy, zmieniony na typ książkowy
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 co zrobiliśmy poprzednio. I nieco trudniej, wykorzystując nieco informacji 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.

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 literacki

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 wymianę adresów w arkuszu stylów

W skrócie instrukcja wygląda tak:

1. Przygotowujemy odpowiednie pliki:

- plik o wysokości 275px, posłuży nam za górne tło

- plik o wysokości nie większej niż 180px a szerokości nie większej niż 770px (najlepiej około 250px), to nasz wyróżnik, w największym stopniu decyduje o temacie szablonu

- favikonkę zmniejszamy do rozmiaru 16x16px albo przygotowujemy inny równie mały obrazek

2. Trzy powstałe pliki ładujemy do zasobów bloga. Będziemy wykorzystywać ich adresy więc można sobie świeżo załadowane pliki otworzyć w kartach w tle.

3. Wchodzimy do edycji css i w arkuszu wyszukujemy każde background i sprawdzamy co ma wpisane w url i jeżeli jest to jeden z plików do zastąpienia to wymieniamy adres. W tym szablonie pliki zaczynające się na 04_ to grafiki wykorzystywane przy ozdabianiu notek, je zostawiamy w spokoju. Zastępujemy te których nazwy zaczynają się od s4_ to będą pliki tła, dużej piłki i małej piłeczki.

Klikamy Zapisz i publikuj i GOTOWE

Powyższa instrukcja powinna w zupełności wystarczyć ale dzisiaj grzebiemy w arkuszu stylów więc nieco większa pomoc może się przydać. 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. Grafika zastępująca piłeczkę 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.1 - Tło w body - główny element wizualny szablonu

tło w body szablonu sportowego 04Grafika powinna być raczej ciemna, litery tytułu i opisu są jasne więc muszą być dobrze widoczne. Szerokość nie ma większego znaczenia, tło powtarzane jest horyzontalnie (poziomo) 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. 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 dowolny plik graficzny.

Ja przygotowałam grafikę o tej samej kolorystyce, nawet wykorzystałam paskowane dolne tło. Zamiast trawy zrobiłam wzór w stylu tapety ale wydrukowanej na ryżowatym, ziarnistym papierze. Aby wzorek dobrze mi się powtarzał mój plik musiał być nieco szerszy (choć niekoniecznie tak szeroki jakim go zrobiłam, połowa by wystarczyła).

tło w body szablonu sportowego 04 zmienionego na ksiązkowy

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

pilka z szablonu sportowego 04Szerokość 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ż 250px. 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

ex libris do zmienionego na ksiązkowy szablonu sportowego 04Ja przygotowałam grafikę z dwoma ekslibrisami. Tym razem wybrałam bardzo regularne kształty. Pozbawiłam ją zupełnie tła pomiędzy ekslibrisami i zapisałam jak plik png. Tym razem jednak równie dobrze sprawdził by się plik typu gif. Jeżeli chcecie wykorzystać plik z przezroczystością to polecam właśnie te dwa formaty.

Aby było zupełnie prosto można wybrać sobie jakąś interesującą ikonkę, na przykład ze strony www.iconarchive.com. Jest tam duży wybór z różnych dziedzin. Z około-książkowych moją uwagę zwróciły: Office v3 Icon, Books 1 Icon, Books 2 Icon, Pages brown Icon, Ink Icon ale wybór jest dużo większy. Tylko sprawdźcie licencję, nie każda ikonka jest udostępniona bez żadnych ograniczeń.

1.3 - Ozdobnik przy zakładkach

pileczka, favikonka z szablonu sportowego 04Ja wybrałam obrazek, który pojawia się na jednym z ekslibrisów a który użyłabym jako favikonki. To wygodne rozwiązanie więc je polecam jeżeli tylko wam spasuje. Jeżeli też chcesz w tym miejscu wstawić swoją favikonę to tylko przypilnuj aby jej rozmiar był nie większy niż 16x16px.

pileczka, favikonka z szablonu sportowego 04 zamieniona namaszynę do pisaniaTym razem można wykorzystać ten sam plik jako favicon jak i jako ozdobnik przy zakładkach (fizycznie ten sam, nie tylko merytorycznie).

2. Dodawanie plików do zasobów bloga

Gdy odpowiednie pliki są już gotowe możemy je załadować do zasobów naszego bloga. Tym razem nazwy nie mają znaczenia, nie musimy więc nadpisywać plików ale dalej warto je załadować do tego samego katalogu w którym już znajdują się pozostałe pliki szablonu.

WPISY -> PLIKI -> 2themeD_110908 -> Nowy plik -> Nowy plik/zdjęcia

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 i następnie w Nowy plik/zdjęcia.

Dla ułatwienia możemy sobie teraz otworzyć przygotowane pliki w dodatkowych kartach (klikając w nie na przykład rolką myszy). Potrzebować będziemy ich aktualnych adresów.

3. Zastępowanie adresów w arkuszu css

Pora na najdelikatniejszą część. W arkuszu musimy wyszukać wszystkie miejsca, w których opisane jest tło - background. Można skorzystać z jakiegoś zewnętrznego edytora tekstu i funkcji znajdź i zastąp (Ctrl+F). Szukamy wszystkich background i przy tych które mają wpisany url sprawdzamy jaki jest po nim wpisany adres. Jeżeli nazwa pliku zaczyna się na 04_ to jest to zapewne plik związany z ozdobami notki. Je zostawiamy w spokoju. Jeżeli zaś nazwa zaczyna się na s4_ to są to pliki, które zmieniamy.

Wykorzystując funkcję znajdź i zastąp możemy od razu wpisać nazwy plików z szablonu sportowego i zastąpić je nazwami własnych plików. W znajdz wpisujemy po kolei:

  • /resource/s4_body_bg.gif
  • /resource/s4_pilka.gif
  • /resource/s4_pileczka.png

Jeżeli arkusz przeszukujemy ręcznie to nazwy tych trzech plików pojawiają się w około ośmiu miejscach (linki prowadzą do ilustracji wskazujących miejsce w arkuszu):

Gdy podmienimy adresy plików pozostaje nam już tylko zapisać i sprawdzić jak wygląda nasz szablon. 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 piśmiennicze.

  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
środa, 28 września 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
felicja79
2011/09/28 21:16:58
Śliczny ten zielony wzór w stylu tapety "wydrukowanej na ryżowatym, ziarnistym papierze". Lubię takie :-) Ciekawe jak by wyglądał jako tło strony :-)
-
zauberi
2011/10/01 17:53:38
witam, bardzo podobają mi się wykonane przez Ciebie szablony, z tego co widzę robisz też dedykowane, czy mogłabym się z Tobą mailowo skontaktować w sprawie takiego szablonu? Bo nigdzie nie mogę maila do Ciebie znaleźć na stronce
-
kate_mac
2011/10/03 12:24:37
@zauberi
maile na moje główne gazetowe konto (czyli pod tym loginem) też do mnie dojdą ale główny adres kontaktowy dla szablonów to szablonykatemac@gmail.com i jest on podany na blogu w zakładce O blogu (patrz boczna szpalta). Dokładnie tam opisałam w jaki sposób najszybciej i najlepiej ze mną się kontaktować. W sprawie szablonu prywatnego pisz śmiało na maila właśnie.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...