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

Ilustrowany przewodnik po bloksie - Kopiowanie szablonu

Na blogach prowadzonych w serwisie blox.pl szablonem jest tylko opis wyglądu strony czyli kaskadowy arkusz stylów (CSS). Nie należy mylić CSS z HTML czyli zawartością strony. CSS opisuje jak ma wyglądać HTML gdy przeglądarka wyświetli stronę w oknie. Kopiując szablon kopiujesz zewnętrzny arkusz stylów (CSS). Poprzez ten właśnie arkusz użytkownicy mogą dzielić się swoimi szablonami.

Samo skopiowanie szablonu jest bardzo proste i automatyczne. Drobne problemy mogą pojawić się w momencie gdy zechcemy coś pozmieniać na blogu zaraz po skopiowaniu szablonu. W dzisiejszej notce poza Ilustrowanym przewodnikiem po bloksie (wybieranie szablonu, kopiowanie szablonu) prezentującym dokładnie proces kopiowania szablonu znajdą się też informacje o możliwym skopiowaniu szablonu na inny serwis - jak najbardziej pozwalam ale wymaga to zawsze napisania nowego kodu więc nie bardzo polecam.

Wybierz szablon dla twojego bloga

Nie ma natomiast w tym wpisie informacji o błędach kopiowania i możliwościach ich uniknięcia. Jeżeli w poszukiwaniu pomocy w tej dziedzinie tu zajrzeliście to odsyłam do nowszych notek albo do strony skrótowo odpowiadającej na najczęściej zadawane pytania odnośnie kopiowania szablonu (znajdują się tam też linki do notek pełniej wyjaśniających wszelkie wątpliwości).

Wybieranie szablonu

Kluczowa wprost decyzja, szablon jest ubraniem bloga i tak samo jak nasze ubrania do pewnego stopnia o nas świadczy. Dla jednych znacznie ma moda, dla innych przyzwoitość bądź jej brak, jeszcze innych zadowoli porządne czyste ubranie. Tym razem nie będę doradzać, określać co jest porządne a co przyzwoite. Tym razem ograniczę się do wskazania miejsc gdzie dostępne są moje bloksowe szablony.

Po pierwsze moich szablonów można szukać w katalogach bogów:

Po drugie blox udostępnia kilka możliwości oznaczenia blogu z udostępnionym szablonem

  • Katalog blogów na temat: Szablony - dopiero niedawno zaczęłam dodawać do katalogu także blogi z szablonami więc obecne są w nim tylko te po ostatnich poprawkach
  • tagi blogowe każdemu blogowi przypisuję odpowiednio dwa: szablon, szablony katemac
  • tagi notkowe na każdym blogu z szablonem jest jedna notka z tagiem zasady korzystania, szablon do pobrania bądź pobieranie szablonu (nie dodaję ich od początku więc i one pojawiają się w przypadku szablonów już zaktualizowanych)
  • już samo włączenie udostępnienia szablonu umieszcza blog w specyficznym katalogu szablonów: Szablony stworzone przez użytkowników serwisu ułożone są one tu wg popularności przy czym zakładam, że jest to popularność wszechczasów; to trochę samonapędzająca się maszyna wzmacniająca popularność już popularnych szablonów; jednocześnie nie zachęcam do zbytniego zagłębiania się w niepopularne części katalogu bo to mocno zniechęcające;

Po trzecie sama zbieram i układam swoje szablony na kilka sposobów

  • delicious: szablonykatemac - wykaz wszystkich moich szablonów opisanych tagami uwzględniającymi kolory, temat, jasność, rodzaj czcionki, maksymalną wielkość ilustracji w notce etc.
  • blog dodatkowy: szablony - wizualny zbiór odnośników do notek o szablonach; podział wg koloru, tematu, typu etc. wszystko ręcznie przygotowane

Szablon dla blogów rękodzielniczychSzablon mamy więc już znaleziony. Ja dla tego przykładu wybrałam najpopularniejszy: Szablon rękodzielniczy 01 handmade, zielony. Dowiedzieć się można o nim kilku przydatnych praktycznych rzeczy, które pozwolą m.in. uniknąć wszelkich błędów kopiowania ale o tym przy nieco innej okazji. Przechodzimy więc na blog z szablonem.

Kopiowanie szablonu

Proszę zacząć od przeczytania zasad korzystania. Są one bardzo szerokie i pozwalają na niemal wszystko i to za darmo. Jedyna rzecz do jakiej każdy użytkownik jest zobowiązany to zostawienie jednego komentarza pod notką o korzystaniu.

http://handmade01szablonkatemac.blox.pl/html#UdostepnijCss Ładny blox? Skopiuj mój CSS

Ładny blox? Skopiuj mój CSSBloksowe szablony kopiuje się banalnie prosto poprzez kliknięcie w jeden guziczek: Ładny blox? Skopiuj mój CSS. Odkąd wyświetla się on w niektórych szablonach także na stronie z pojedynczą notką to jego odnalezienie to mniejszy problem. Staram się nie przenosić tego przycisku więc powinien znajdować się zawsze na końcu treści pobocznej, która w przypadku starego kodu zawsze ma postać wąskiej szpalty.

Do niedawna jednak ten guziczek wyświetlał się zawsze tylko na stronie głównej, stąd też komentarze o niemożności dostrzeżenia go (często tak jest nadal, tylko szablony zrobione na bazie określonych szablonów podstawowych mają guziczek także na stronie z pojedynczą notką). Nadal nie uświadczysz tego przycisku na stronie statycznej.

Czasami, jak pamiętam, to ozdabiam nieco także i ten element ale to jest zupełnie niekonieczne i do tego nie zawsze ładnie wychodzi.

„Ładny blox? Skopiuj mój CSS”

Czyli klikamy w guziczek i rozpoczynamy kopiowanie.

Logowanie

Po kliknięciu w przycisk, jeżeli nie jesteś zalogowany do bloksowego konta to serwis poprosi cię o podanie loginu i hasła. Logujemy się najzwyczajniej w świecie. Strona wygląda nieco inaczej niż reszta stron edycji bloksa bo ma stary wgląd. Blox jakiś czas temu przeszedł przemianę ale nie wszystkie podstrony mają aktualny wygląd, akurat ta jest po staremu.

Wybierz blog, którego wygląd chcesz zmienić:

Jeżeli masz więcej niż jeden blog to ostrożnie wybierz na którym chcesz zmienić szablon. Szczególnie jeżeli na jednym z tych które nie chcesz zmieniać jest szczególnie zaprojektowany szablon. Po kliknięciu ok nie ma opcji cofnij.

Wybierz blog, którego wygląd chcesz zmienić:

Aby wybrać blog na którym zmieniać będziemy wygląd klikamy w pole zaznaczenia. Jeżeli klikniemy w nazwę to otworzy nam się w nowym oknie aktualny (przed zmianą) wygląd bloga.

Po kliknięciu ok strona przeładuje się i wyświetli się informacja o dokonaniu zmiany:

Operacja zakończona pomyślnie. Szablon CSS został przekopiowany do blogu: instrukcje, przeróbki szablonowe

Nazwa bloga jest linkiem i od razu możemy zobaczyć jak nowy szablon wygląda na naszym blogu. Zapewne dokładnie tak jak trzeba.

Tutaj natomiast  zostaw komentarz informujący mnie o pobraniu szablonu.

Jeżeli podoba ci się efekt to pozostały ci jeszcze do zrobienia dwie rzeczy. Po pierwsze wróć do blogu z szablonem i pod notką opisującą zasady korzystania zostaw komentarz o pobraniu szablonu. To jest część niezbędna do spełnienia warunków na jakich udostępniam swoje szablony. Bez tego pozostaje mi uznać, że używasz mich szablonów bez mojej zgody.

Po zostawieniu wymaganego komentarza pozostaje ci się tylko wylogować z konta i proces kopiowania możemy uznać za zakończony. Jeżeli ciekawi cię dlaczego trzeba się wylogować to zapraszam do notki o błędach kopiowania.


Zastanawiam się w jakiej sytuacji następują błędy kopiowania i chociaż szablonów kopiuję całą masę (bo każdy mój szablon sprawdzam na kilku blogach zanim go udostępnię) to jednak trudno mi sobie przypomnieć czy kiedyś trafił mi się taki niewyjaśniony błąd kopiowania. Pozostaje mi więc w tym momencie założyć, ze błąd kopiowania nie jest związany z kopiowaniem.

UWAGA

Jeżeli zamieszasz wprowadzać na blogu jakiekolwiek zmiany bezpośrednio po skopiowaniu szablonu. Nieważne czy będą one dokonywane w szablonie (edycja CSS) czy generalnie na blogu (włączenie wyszukiwarki, zmiana opisu blog a etc.) najpierw wyloguj się ze swojego blokowego konta i zaloguj na nowo. Daj szablonowi możliwość wskoczenia na swoje nowe miejsce także w edycji bloga.

Stary kod chociaż ma tak samo ponazywane elementy nieznacznie różni się w zależności od szablonu bazowego na jakim jest zrobiony. Dlatego staram się na blogu z szablonem umieścić także informacje o szablonie podstawowym. Jeżeli najpierw na swoim blogu zmienisz szablon podstawowy a dopiero potem skopiujesz szablon użytkownika to unikniesz ewentualnych problemów.

Kopiowanie szablonu na inny serwis

Tutaj może pojawić się mały problem. O ile nie mam nic przeciwko temu aby moje szablony czy to w oryginalnej czy zmienionej formie pojawiły się na innym serwisie o tyle nie zamierzam ich dostosowywać bezinteresownie i na życzenie. Serwisów blogowych jest wiele a i moich szablonów całkiem sporo więc bezinteresownie co najwyżej mogę zaproponować podpowiedzi i pomoc.

Zabierając się za dostosowanie szablonu do potrzeb serwisu blogowego z którego korzystasz musisz co nieco znać się na HTML i CSS. Będziesz kopiować wygląd i choć możesz dosłownie skopiować style, to jednak nie na każdym serwisie będą wszystkie bloksowe elementy, nie wszystkie elementy z różnych serwisów są na bloksie no i dochodzi jeszcze kwestia konfiguracji (ułożenia i kolejności). Dlatego proponuję po prostu połączyć wygląd jednego z moich szablonów z wyglądem jednego z szablonów dostępnych w twoim serwisie blogowym.

Potrzebować będziesz:

1. Plików do tła

W Firefoksie wystarczy najechać na element tła, kliknąć prawym przyciskiem myszy i wybrać z menu opcję Pokaż obrazek tła. Wyświetli się tylko ilustracja, którą można tradycyjnie zapisać wybierając z menu otwieranego prawym przyciskiem myszy opcję Zapisz obrazek jako.

Nie jestem pewna jak sprawa prezentuje się w innych przeglądarkach ale jakaś forma zapisu ilustracji z tła zapewne jest dostępna. jeżeli nie to adresy plików wykorzystanych jako tła szablonu dostępne są w arkuszu CSS.

2. Podglądu kodu HTML

Źródło strony do podejrzenia dostępne jest w każdej przeglądarce. Wystarczy kliknąć Ctrl+U i w nowym oknie powinien otworzyć się kod źródłowy strony. Dzięki dostępowi do kodu możesz porównać jak od strony kodu wyglądają poszczególne elementy na bloksowym blogu i u ciebie.

3. Dostępu do arkusza CSS

W źródle strony, na początku dostępny jest adres szablonu. Gdzieś około osiemdziesiątego wiersza ale niekoniecznie dokładnie tam. W każdym bądź razie w nagłówku strony będzie wywołanie adresu zewnętrznego arkusza stylów.

adres zewnętrznego arkusza

Oczywiście istnieją prostsze i bardziej automatyczne rozwiązania jeżeli chodzi o dostęp do wyglądu. Tłumaczenie zawsze trzeba zrobić samemu, wtedy wychodzi najlepiej ale wszystkie te skomplikowane czynności można zastąpić zwykłym Zbadaj element. Trzeba tylko odpowiednio dostosować własną przeglądarkę. Ja lubię WebDevelopera i niemal od początku z niego korzystam.

Gdy masz wszystkie rzeczy potrzebne do opisania wyglądu zaczynasz go od nowa budować na swoim blogu. Układ głównych elementów, wygląd tytułu, wygląd notki, poszczególne elementy w bocznej kolumnie...

To tyle. Mój opis kopiowania szablonu na inny serwis ma cię nieco przestraszyć, to całkiem sporo pracy, pełne tłumaczenie szablonu. Nie jest to bardzo skomplikowane, większość moich szablonów jest bardzo prosta. Konieczne jest jednak jakieś pojęcie o CSS i skąd się biorą selektory które opisane są w szablonie. I tyle. Jeżeli masz jakieś pojęcie to w zasadzie nie potrzebujesz powyższego wypunktowania.


Przydatne wpisy:

czwartek, 04 marca 2010, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
irytek05
2010/03/05 00:31:43
Oj, to ja należę chyba do pechowców, bo zazwyczaj po skopiowaniu szablonu w arkuszu css mam poprzednie style;) A że robię to bardzo często, uważam, że jest to obecnie na Bloxie dużym problemem. Kilka lat temu zdarzało się to sporadycznie.
No cóż, trzeba sobie z tym jakoś radzić, ale samo wylogowanie się z konta nie wystarczy. Nie wiem, dlaczego przeglądarki szablony bloxowe (tylko szablonistów!) tak nieładnie traktują, bo to one są za wszystko odpowiedzialne. A w szczególności za to, że w swej pamięci pozostawiają na dłużej (fakt, że nie zawsze;) style z poprzedniego szablonu. Na szczęście jest na to rada. Możemy to przyspieszyć, zamykając na moment przeglądarkę. Ja obecnie nawet nie sprawdzam, jak się skopiowało, tylko od razu wychodzę z przeglądarki.
Z wieloletniego doświadczenia tez wiem, że aby właściwie prezentował się nowy szablon, wystarczy, by była zgodność stron wąskich szpalt, plus zamknięcie przeglądarki!!! Po ostatnich zmianach, szablony bloxowe nie mają widocznych nazw (kiedyś były podpisane), dlatego nawet trudno komuś tłumaczyć, jaki powinien szablon wybrać, aby pasował do "wizji" docelowego szablonu:)
Pozdrawiam serdecznie!
-
kate_mac
2010/03/05 10:41:56
@ Irytek
Teraz jak się nad tym zastanawiam to może kiedyś faktycznie takie błędy mi się także zdarzały. Zresztą pamiętam, że się Ciebie o to też pytałam i kilka rzeczy które tu opisuję właśnie Ty mi wyjaśniłaś.
Co do pozostałości w przeglądarce to kilka średnio przyjemnych niespodzianek też miałam, chyba najczęściej po dodaniu nowych skryptów.
Brak podpisów pod szablonami podstawowymi to rzeczywiście kłopot ale ja zdałam sobie z tego sprawę dopiero jak pisałam tą notkę ;) Ja jeszcze wiem który był blogowy, który spokojny etc. ale dla nowego użytkownika to totalna magia. Dlatego ponownie zmieniłam notkę o układach (jest link do niej w zakładkach) wymieniając stare nazwy na nazwy w źródle strony i dodając grafiki z wyglądem szablonu i nazwą jednocześnie. Jeżeli będziesz potrzebowała to korzystaj, odwołuj się kopiuj... co tylko chcesz. Obrazeczki są malutkie (140px) więc nawet w wąskiej szpalcie się zmieszczą.
Zupełnie off topic powiem, że po tych nazwach widać kilka rzeczy: było kilka faz dodawania szablonów podstawowych i nie wszystko jest równiutko od linijki ;) przykładowo Theme A jest pod adresem default... mam spaczone poczucie humoru i bawią mnie takie rzeczy :D
-
Gość: seb, *.rene.com.pl
2010/03/08 00:16:23
Dziękuję za dobry temat:)
-
henrykprzedstawiciel
2010/03/08 13:46:05
Witam ,skopiowałem od Ciebie szablon CleanJS - WEB 2.0 look. Chciałbym wstawić reklamy w ten pasek pod tytułem i opisem bloga, jak to zrobić?? Czy w ogóle jest to możliwe?
-
agattt1
2010/03/18 22:28:09
hey:) po 1. skopiowałam twoj szablon na swojego bloga + umiescilam link do ciebie
po 2 mam pytanie - masz pod notką opcję `dodaj do:` i rozne portale tam wymienione, mozesz mi wytlumaczyc jak zrobic to z facebookiem?
-
kate_mac
2010/05/22 17:20:04
@agattt1
opcja 'dodaj do:' istnieje na blogu dzięki skryptowi Szymona: Lista odnośników społecznościowych dla bloga w Blox.pl
wydaje mi się, że facebook także był uwzględniony przez Szymona; poczytaj sobie jego notkę, obejrzyj skrypt... wydaje mi się, że można zarówno dodać opcję z facebookiem jaki usunąć pozostałe... sprawdź sobie
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...