Dostosowujemy szablon - Projektant szablonów

Dziś mały tutorial oraz opis możliwości projektanta szablonów. W sieci jest mnóstwo szablonów do blogera - w rzeczywistości nie różnią się one niczym poza grafiką.

Rys.1

Wszystko pozostałe jest na jedno kopyto pisane, ale projektom tym brakuje wielu funkcji i możliwości jakie daje nam projektant szablonów.  Dziś dodamy je do dowolnego szablonu z sieci, a raczej odwrotnie ;) szablon projektanta zmienimy na wzór tego z sieci...
Pisałem już o tym na forum że to nie takie trudne - szablon do dostosowania był banalnie prosty, a samo dostosowanie zajęło mi kilka minut dosłownie - wiec może coś bardziej skomplikowanego.

Zatem... Google: blogger tempalates search i pierwszy wynik z brzegu Tutaj jest DEMO niezbyt skomplikowany ale ciekawy, w sam raz na przykład :)

Rys.2

Zapewne byście pobrali już szablon lecz nie dziś, nic z tych rzeczy klikamy na demo online i pobieramy wszelkie tła na nasz dysk lub zapisujemy do nich linki - zalecam je zapisać mniej roboty oraz pobrać bo czasem mogą się nam przydać.


Jako wierny użytkownik Mozilli Firefox'a klikam więc Narzędzia - Informacje o stronie [rys.2] - wklejam do notatnika url wybranych grafik - skupiam się tutaj na tych większych gabarytowo, pomijam zawartość mniej ważną do szablonu, lecz nic nie stoi na przeszkodzie zapisać wszystkich. [rys.3]

Rys.3

Przechodzimy do Projektanta szablonu i szukamy czegoś podobnego w układzie, pośród kilkunastu szablonów Simple [rys.4] jest najbardziej podobny więc wybieram go jako bazę do nowego szablonu.

Staramy się wybrać najbardziej podobny szablon względem układu - szatę graficzną pominiemy w tym przypadku.

Rys.4

Teraz kolej na usunięcie wszelkich niepotrzebnych grafik z naszego projektu i zastąpienie ich tymi zapisanymi z szablonu.
 
Klikamy więc kolejno na zakładki i usuwamy na początek tło [rys.5]
następnie ustawiamy kolorki strony na przezroczyste [rys.6] sugerując się naszym szablonem usuwamy też  linie podziału [rys.7]

Rys.5

Rys.6

Rys.7

Kolej na dostosowanie projektu
Pomocną zakładką będzie: Dodaj arkusz CSS z sekcji Zaawansowane. [rys.8]

Rys.9

Rys.8

Tutaj przyda nam się nieco znajomość CSS i budowy szablonów.
Najlepiej mieć pełen podgląd w to co się robi, więc klikamy na zastosuj do bloga a następnie wracamy do bloga - dodajemy przykładowe gadżety w każdym z możliwych elementów, [rys.9] dobrze żeby były tam też jakieś posty, jeśli ich nie mamy powrót do bloga i robimy przykładowe wpisy. 

Powróćmy do tematu dostosowania naszego szablonu:
Na pierwszy ogień idzie tło i header rzeczy oczywiste w szablonie... więc wklejamy odp arkusze:

body {background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTf-gahmuMrIiyEXtaxVl2opj1rJVkYtsKhx6A_A2W3uoxzMJtc3gZAtAHurACKjF0PFpxKXYI80Nnabi9gCl76tTSh5ZSL5vSRXraznGlDkQ_If2nxQ8lykDzU9tRUnGBf0mvUpDf-dk/s0/bgbody.jpg) repeat-x top center;
margin-top:-30px;
}
.header {
height:178px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_nkkDHvxMEBrQxOPTknlh34NWFy7rkYnozTo80EGX687g5NCK1-513EfOlbfO-MF_cflZlyQxNgbSk3O1zMcJ_Ne4x14lHxLmF8Ijkv4yqM3PT-hSHL5yXGEynxUSfkAbRErOu3xD34/s0/bgheader.jpg) no-repeat top center;
}

na czerwono adresy naszych plików z tłami reszta to małe dostosowania
w wyglądzie: margin-top w body usuwa nam pasek nawigacji,
header height określa wysokość naszego bannera
teraz kolej na resztę:
nasza środkowa część bloga nie ma jeszcze tła i stopka jest nieco inna więc:

.region-inner {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAF30q5O5unWyBuFE6cYa38Q3QwZNl-W-9X_NpiUEkyevN-_oNnKFswoj6XE_AaUSGrvWto7fTOUTf_J2V_UudqvEFfn8iZQy523ZoM9udMNVoUQV1aEyHSOKD_brPvhA5IRE0-q1wd0/s0/bgcontent.gif) repeat-y center center;
}
.region-outer {background: transparent;}

.footer-outer {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTf-gahmuMrIiyEXtaxVl2opj1rJVkYtsKhx6A_A2W3uoxzMJtc3gZAtAHurACKjF0PFpxKXYI80Nnabi9gCl76tTSh5ZSL5vSRXraznGlDkQ_If2nxQ8lykDzU9tRUnGBf0mvUpDf-dk/s0/bgbody.jpg) repeat-x top center;) repeat-y top center;
}
.footer-inner {background: transparent;}

stopka była tak szeroka jak body strony więc użyłem stylu podwójnie dla stopki .footer-outer oraz dla jej zawartości .footer-inner ustawiłem przeźroczystość.  Jeśli chcemy możemy teraz dodać jeszcze dowolną grafikę z przezroczystością do szablonu ;) Podobnie możemy zrobić z .region-outer.



Brakuje jeszcze nam małego gadżetu z ciekawą grafiką więc dodajmy go:
Wracamy na moment do projektu i dodajemy nowy gadżet HTML/JavaScript to załatwi sprawę.
Aby nasz gadżet był kompletny piszemy jego treść: <div class='top'> następnie nasza przykładowa zawartość gadżetu i zamykamy znacznik </div>
znów projektant i dopisujemy arkusz CSS dla nowego gadżetu

.top {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYU16xFWjXejam7Jl1ynLh4KbkeIESayQYA8XRWDWED5Mx2CQhvOZuILVJtsF9HQZzWqK9FyKy7NT5_vIWlCNVtbWE5sumSfhy31WcO5DVcpgIRHumXdoaWbGoyXUBHOyQqq4fH-bnQcI/s0/bgcrosscol.png) no-repeat center center;
height:197px;
padding:40px;
margin-top:2px;
}

podajemy wysokość HEIGHT aby zawsze była stała mimo iż nasza zawartość jest niebyt wielka;) dodatkowo dodałem marginesy i padding gadżetu, w celu usunięcia nieciekawej linii podniosłem go do góry o 2px;  Co do tego elementu mam niezbyt miłe uczucia - poco ładować taki duży plik na takie samo tło - autor szablonu o tym nie pomyślał - nie lepiej było zrobić transparentny plik z samym detalem i podpiąć go jako tło, ale przykład to przykład nie będziemy poprawiać autora

Rys.10

Jak widać nasz gadżet strony jest zbyt nisko podnieśmy go więc do góry, opis bloga jest zbyt nisko i ma spory margines, tytuł jest zbyt nisko poprawmy to: klikamy w zakładkach zaawansowane i ustawiamy odp kolory wielkość czcionki i to co się da :) Klikamy kolejno i ustawiamy kolorystykę wielkości czcionki, [rys.10] później zajmiemy się ustawianiem odstępu i odległości względem pozostałych elementów


Poustawiane - jeszcze tylko kilka wpisów CSS i gotowe

.tabs .widget {margin-top:-310px;}
.descriptionwrapper {margin:0px; margin-top:-25px; font-size:8px;}
.titlewrapper {padding:0px; margin:0px;}

Nasze marginesy już są gotowe, szablon nabrał wyglądu zbliżonego do oryginału.
Co jakiś czas zapisujemy ustawienia i otwieramy bloga ponownie - ja już mam otwarty w innej karcie więc odśwież w celu sprawdzenia naszych poczynań - podgląd działa lecz warto też sprawdzić jak to się ma do rzeczywistości.
Aby sprawdzić styl dowolnego miejsca w blogu zaznaczamy jego fragment i podglądamy kod HTML zaznaczenia. Wyszukujemy w nim klasę stylu i dopisujemy odp. arkusz :)
Nasze dostosowanie powtarzamy korygując kolejne elementy co zatem idzie poklikamy tu dość sporo - na początku może to nieco zniechęcić ale nie jest to aż tak skomplikowane aby nie sprostać temu wyzwaniu.

Czy nasz szablon jest podobny do oryginalnej wersji LINK - zapewne tak jeszcze tylko dopracować wielkości czcionek, kolorystykę itd i mamy perfekcyjny szablonik "Made by: MY SAMI" w stopce możemy też dodać kto jest autorem grafiki naszego bloga - a niech się cieszy dobry ludek ;)

Po tych wszystkich zabiegach - jak wpadniemy w nawyk i znamy podstawy CSS to w ciągu kilku godzin opracujemy każdy szablon jaki sobie wymarzymy z projektantem szablonów. Zalety szablonu z projektanta - chyba nie trzeba o nich pisać...

PS. Ten tutorial ma charakter informacyjny proszę nie prosić mnie o dostosowanie znalezionych w sieci szablonów. Zamiast rozpisywać się o tego typu prośby spróbujcie sami swoich umiejętności. Zalecam prowadzić doświadczenia na nowym przykładowym blogu, w którym w skutek nieprzewidzianych niespodzianek podczas edycji nic się niezwykłego nie wydarzy ;) po osiągnięciu zamierzonego rezultatu szablon zapisać na dysk lub wkleić do docelowego bloga.
Pomocne kursy CSS można znaleźć w odsyłaczach na moim blogu.


10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110