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

Błędy występujące po skopiowaniu szablonu

Zacznijmy może od wyjaśnienia, że podejrzewam, że te błędy nie występują przy kopiowaniu tylko przy dalszych działaniach związanych z edycją bloga. Wszystko zaraz wyjaśnię w mam nadzieję prosty i zrozumiały sposób. Na początek może wyjaśnijmy, że HTML bloksa poza tym, że dzieli się na nowy i stary kod występuje jeszcze w różnych wariantach. Jedną z rzeczy o których marudzę to to, że kod new_age nie jest taki jednolity jak zapowiadano. W przypadku starego kodu niejednolitość wpisana jest w genezę. Te szablony dodawane były na przestrzeni czasu w sytuacji gdy taki sposób projektowania był na porządku dziennym (układ robiony tabelami zamiast stylami).

ups

Różnice pomiędzy szablonami nazywam bloksowymi układami, opierają się one na kilku cechach więc polecam jako ciekawostkę na początek tabelkę podsumowującą. Te układy w przypadku starego kodu decydują o kształcie szablonu. Kopiując jeden z szablonów użytkownika zasadniczo kopiujesz CSS (arkusz stylów jest na bloksie szablonem). Jeżeli jednak na twoim blogu uprzednio był szablon z innym układem (czyli innym HTML) to ostrożnie bo mogą pojawić się błędy. O tym jak im zapobiec i co zrobić gdy się pojawią wyjaśniam właśnie w poniższej notce. Jest ona rozwinięciem pytania FAQ z poprzedniej notki.

Nie wszystkie stare szablony na blox.pl korzystają z dokładnie tego samego kodu HTML. Elementy nazywają się tak samo ale ich kolejność może być różna dla różnych bazowych HTML. Z powodu tych różnic mogą wystąpić pewne błędy przy kopiowaniu szablonu widoczne z całą pewnością jeżeli zaraz po skopiowaniu szablonu zaczniemy wprowadzać zmiany w edycji bloga. Jeżeli przy kopiowaniu szablonu zachodzi konieczność zmiany HTML to dokonuje się ona automatycznie. Jednakże nie wskakuje on natychmiastowo w edycję bloga.

Jak zapobiegać błędom

Pisząc, że HTML zmienianego szablonu nie wskakuje od razu w edycję bloga mam na myśli coś takiego jak gdyby otworzyć edycję starej notki w dwóch kartach przeglądarki. W pierwszej do naszej starej notki dodajemy sporo ilustracji, klikamy publikuj i zaglądamy na bloga. Efekt: całkiem ładna notka z ilustracjami. To jest nasze skopiowanie szablonu. Teraz druga otwarta karta ze starą notką. Otworzyliśmy ją zanim dodaliśmy obrazki więc w niej ich nie ma i jeżeli dodamy teraz jakiś tekst czy link i klikniemy publikuj to zamiast notki z ilustracjami i linkiem otrzymamy tylko notkę z linkiem. Bo zmieniliśmy notkę, której edycję rozpoczęliśmy zanim wprowadziliśmy zmiany.

Analogicznie jest z edycją HTML czyli de facto większością zmian na blogu. Po zmianie szablonu dalej mamy otwartą starą wersję i to chyba bez względu na to czy zamkniemy kartę czy nie. Chodzi o logowanie się do serwisu blox.pl

Rozwiązanie: wylogowanie po skopiowaniu

Aby zapobiec różnym nieoczekiwanym zdarzeniom po skopiowaniu szablonu należy wylogować się z bloksowego konta. Da to właściwemu kodowi możliwość wskoczenia na miejsce w edycji bloga. Szablon od razu jest na miejscu na blogu i o ile nie będziesz czegoś zmieniać to nie zauważysz problemu ale gdy zechcesz zmienić choćby literkę w opisie to bezpieczniej będzie uprzednio się wylogować i zalogować na nowo.

wylogowanie po skopiowaniu szablonu użytkownika

Rozwiązanie: zmiana szablonu podstawowego przed skopiowaniem

Druga opcja zakłada, że wiesz na jakim szablonie podstawowym (a więc kodzie HTML) zrobiony jest szablon który chcesz skopiować. W zaktualizowanych szablonach podaję tę informację zarówno na blogu z szablonem w zakładkach w wąskiej kolumnie jak i na tym blogu w notce opisującej szablon, w tabelce przy pozycji baza bloksowa.

zmiana szablonu podstawowego przed przed skopiowaniem

Jeżeli jednak nie wiesz jaki bloksowy szablon został wykorzystany jako baza i nie ma żadnych informacji na ten temat na blogu z szablonem czy w notce go opisującej to polecam najbardziej skuteczne źródło informacji czyli sam blog z szablonem. Wystarczy zajrzeć do źródła strony (Ctrl+U), w części nagłówka (head) i odszukać adres stylów (stylesheet). Nieco inny będzie adres oryginalnego niezmienianego szablonu a inny takiego w którym zmieniono choćby jedną literkę. Szablony użytkowników oczywiście występują w postaci tych drugich i z moich obserwacji wynika, że w swoim adresie mają frazę db-css więc można zlecić przeglądarce jej wyszukanie (Ctrl+F).

link href='http://szablonykatemac.blox.pl/db-css/0Etheme' type='text/css' rel='stylesheet'

Na koniec adresu wpisana jest nazwa bazowego szablonu. W powyższym jest to 0Etheme czyli szablon Spokojny. Niestety w dziale WYGLĄD w edycji bloga szablony nie są podpisane dlatego też sporządziłam podsumowanie uwzględniające różne nazwy szablonów podstawowych i ilustrację prezentującą ich wygląd. Proponuję więc zajrzeć na listę, odszukać nazwę, która pojawia się w adresie a następnie sprawdzić jak wygląda szablon o tej nazwie i wybrać go.

Wybrałeś ten szablon

Trzecia możliwość to wybranie szablonu bazowego w ciemno. Dla szablonów z wąską szpaltą po prawej proponuję szablon podstawowy Spokojny a dla tych z wąską po lewej szablon podstawowy Biały. Jeżeli wydaje ci się, że wąska szpalta zaczyna się na równi z częścią tytułową a nie jest umieszczona pod nią to wybierz na bazę jeden z szablonów gdzie tytuł umieszczony jest w jednej ze szpalt. Ja raczej tych szablonów nie używam i jeżeli tak to wygląda to jest to złudzenie a szablonem podstawowym dalej jest Biały albo Spokojny (oczywiście wyjątki się zdarzają).

Jakie błędy się pojawiają

A co zrobić jak mleko już się wylało i szablon jakiś pokręcony wyszedł? O tym za chwilkę, najpierw może trochę o tym pokręceniu i innych objawach nie załadowanego jeszcze zmienionego HTML.

Problem: Boczna szpalta jest po innej stronie niż w szablonie, który został skopiowany.

To najbardziej widoczny efekt błędu kopiowania. Wynika ze znacznej różnicy pomiędzy HTML skopiowanego szablonu a HTML szablonu, który do tej pory był na blogu. Czasami ten błąd jest nawet do zaakceptowania. Zdarza mi się, że w niektórych szablonach wręcz staram się aby wszystkie wielkości były symetryczne tak, że zmiana stronności stronności nie powoduje żadnej dysharmonii. Ale takie coś jest raczej wyjątkiem potwierdzającym regułę widoczną poniżej.

Blogowy poprawny

Przykłady sporządziłam z szablonu Blogowego (0Dtheme). Jest to jeden z podstawowych szablonów bloksa. Stworzony jest na kodzie z wąską szpaltą po lewej i tytułem umieszczonym nad obiema szpaltami, bezpośrednio w głównym kontenerze. Zachowałam jego kod CSS i jedynie podmieniałam szablony bazowe imitując błędy kopiowania.

Blogowy prawostronny

Umieszczając Blogowy na bazie Spokojnego uzyskałam popularny problem gdy wcześniejszy szablon miał inną stronność. Poza tym wszystko się zgadza i czasem taki przemieniony nieco szablon mógłby przejść gdyby nie to, że odstępy są nie tam gdzie trzeba. W tym przypadku najbardziej upierdliwym problemem jest fakt, że archiwum przykleiło się do prawej krawędzi a pomiędzy szpaltami jest nieproporcjonalnie duży odstęp.

Problem: Tytuł jest jakiś niepełny, mniejszy, wyświetla się na niewłaściwym tle.

Równie dobrze może nachodzić na wąską szpaltę umieszczoną po niewłaściwej stronie. To w dalszym ciągu jest tylko różnica w wyglądzie HTML z tym, że akurat ten HTML miał inaczej umieszczony tytuł więc i błędów widać więcej.

Blogowy ze źle umieszczonym tytułem

Taka wersja da się zaakceptować o ile część tytułowa nie ma ilustracji (a to bywa bardzo rzadko). Ten kod umieszcza tytuł bloga tylko w szerokiej szpalcie (a nie na całej szerokości) więc jest on węższy co często będzie problemem jeżeli tytuł ma ilustrację. W przypadku wyglądu Blogowego okazało się, że archiwum nie ma górnego marginesu więc przy innym kodzie przyklejone jest do górnej krawędzi podobnie jak fragment tła kategorii (bo umieszczone jest na górze szerokiej szpalty, która teraz zawiera tytuł a nie jest pod nim).

Blogowy prawostronny ze źle umieszczonym tytułem

Połączenie pierwszego i drugiego błędu. Zupełnie inna stronność i inaczej umieszczony tytuł. W szerokiej szpalcie problemem jest nie tylko rozdzielenie tła kategorii ale i szerokość części tytułowej. W związku z tym że jest bezwzględnie określona w kodzie CSS to opis (i tytuł jeżeli byłby dłuższy) teraz zaczął nachodzić na wąską szpaltę.

Blogowy na kodzie zielonego

Tym razem to tło archiwum zostało rozdzielone. Taki kod HTML ma tylko szablon podstawowy Zielony. Nakładając na taki HTML kod CSS innego szablonu największym problemem będzie szerokość tytułu, jego tło i ewentualne tło wąskiej szpalty (które ja często wykorzystuję w moich szablonach).

Każdy z tych błędów może być ciekawą inspiracją do drobnej zmiany w szablonie. Ze względów praktycznych nie polecam szablonów lewostronnych na starym kodzie ale są one dla mnie inspiracją do szukania pomysłów dla szablonów na nowym kodzie (new_age) gdzie stronność przestaje mieć techniczno-praktyczne znaczenie.

Problem: Skopiowałam/em szablon i chcę go sobie troszkę zmienić lecz w polu na arkusz css dalej jest kod starego szablonu.

Dla większości laików kod CSS wygląda tak samo więc nie każdy rozpozna czy w arkuszu jest właściwy ale jeżeli kiedykolwiek zaglądałeś do tego miejsca to mniej więcej wiesz czego się spodziewać. Dodatkowo moje stare szablony na początek mają metryczkę. Nie gwarantuję, że zawsze będzie ona zawierała akuratną treść bo zdarza mi się zapomnieć ją poprawić ale zawsze jest.

Z całą pewnością niewłaściwy kod CSS zostanie dostrzeżony po wprowadzeniu zmiany i kliknięciu ok. Skoro w edycji arkusza był stary kod CSS to po kliknięciu zapisz i on wyświetli się na blogu.

Jak naprawić błędy gdy już się pojawiły

A co zrobić jak mleko już się wylało i szablon jakiś pokręcony wyszedł? Najprostsze rozwiązanie to skopiować ponownie szablon zachowując wspomniane na początku środki ostrożności. Nieco trudniejsze to powklejać i poukładać wszystko samemu.

Rozwiązanie: skopiuj ponownie cały szablon

To najprostsze rozwiązanie, nie jest idealne ale nie wymaga za dużo tłumaczenia więc jak ktoś zgłasza problem ze skopiowaniem szablonu to zalecam skopiować go jeszcze raz. Należy tylko pamiętać aby nie popełnić tego samego błędu i nie zacząć wprowadzać zmian od razu.

Skopiuj wybrany szablon i wyloguj się z bloksowego konta.

To najkrótsza i najprostsza rada, która skutkuje chyba w każdym przypadku. Piszę chyba bo własnego doświadczenia nie mam a osoby którym udzielałam takiej rady nie zgłaszały problemu ponownie. Rada ta ma jedną maleńką wadę: pliki graficzne związane z szablonem są dublowane w zasobach bloga.

Rozwiązanie: przekopiuj ręcznie szablon

Jeżeli ponownie kopiujesz szablon to także pliki graficzne ponownie przekopiowywane są na bloga. Łatwo to zauważyć w zasobach bloga. W menu PLIKI pojawia się kolejny folder zawierający w nazwie frazę pliki szablonu a końcówe cyfry tej nazwy zostają wzbogacone o kolejny numer.

dublowanie plików w zasobach

Nie jest to jakiś problem ale skopiowane po raz kolejny pliki nie mogą mieć tej samej nazwy i zostaje do niej dodana cyfra więc jeżeli korzystasz z jakiejś mojej instrukcji związanej z grafikami w tle, nawet jeżeli instrukcja dotyczy dokładnie tego szablonu z którego korzystasz to musisz uwzględnić ten dodatkowy numer przy pliku graficznym. Dlatego właśnie jako jedno z rozwiązań polecam ręczne skopiowanie szablonu.

Pliki graficzne wczytały się na bloga już przy pierwszym kopiowaniu więc pozostaje tylko ustalić HTML i CSS.

HTML czyli szablon podstawowy. Po pierwsze, jeżeli są w szablonie jakiekolwiek pliki graficzne to nazwę HTML odkryjemy także w menu PLIKI. Na powyższej ilustracji widoczna jest nazwa zaraz po frazie pliki szablonu: 2themeD. Szablony nie są jednak podpisane w edycji bloga więc jeżeli potrzebujesz podpowiedzi to sporządziłam alfabetyczną listę nazw szablonów podstawowych na starym kodzie. Ta sama nazwa będzie wyświetlała się jako fragment adresu arkusza stylów. Odszukujemy odpowiedni szablon w menu SZABLONY PODSTAWOWE (w części WYGLĄD) i wybieramy go.

Aby podejrzeć CSS wystarczy teraz przejść na blog z szablonem który skopiowałeś i otworzyć podgląd źródła strony (Ctrl+U). Przewinąć nieco stronę aby dojść do opisu adresu zewnętrznego bloku stylów (stylesheet). Fragmentem adresu jest m.in. nazwa szablonu podstawowego więc i tutaj można to sprawdzić. Tym razem jednak otwieramy adres szablonu.

link href='http://szablonykatemac.blox.pl/db-css/0Etheme' type='text/css' rel='stylesheet'

Kopiujemy cały kod dostępny pod adresem, przechodzimy do edycji CSS (WYGLĄD -> EDYCJA CSS) i usówamy znajdujący się tak kod i wklejamy ten skopiowany.

Zmiany wprowadzamy dokładnie w tej kolejności, najpierw HTML (szablon podstawowy) a potem CSS (kod spod adresu zewnętrznego arkusza stylów).

Klikamy zapisz i sprawdzamy na blogu czy teraz wszystko jest ok. Jeżeli tak to tym razem już nie musimy się wylogowywać tylko od razu można zacząć wprowadzać zmiany.


Ta notka o podobnym temacie lecz nieco inaczej napisana była już na blogu od bardzo dawna. A że była pod tytułem Kopiowanie szablonu postanowiłam zostawić tam tylko informacje dotyczące bezpośrednio kopiowania a szczegóły dotyczące błędów przeniosłam do nowej notki. Mam nadzieję, że mimo zalewu słów notka się przyda.

Przy okazji przypominam, że można zaproponować pytanie do FAQ. Nawet jeżeli już znalazłaś na nie odpowiedź to może się ona przydać komuś innemu. Nie ma głupich pytań i nie ma oczywistych rzeczy gdy zabierasz się za coś po raz pierwszy. Są osoby, które blogują od lat i skaczą po różnych serwisach, wiedzą czego szukają, czego im brakuje i o co mają się pytać. Są też osoby, które dopiero zakładają swój pierwszy blog, nie wiedzą jak dodać link czy wyświetlić wyszukiwarkę na blogu.

Notki o kopiowaniu szablonu i szablonach podstawowych bloksa:

środa, 14 marca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
art.krolowasniegu
2012/04/05 06:36:02
Dziękuję za ten wpis! Pomógł mi w moich zmaganiach z szablonem - po skopiowaniu szablonu, który przygotowałam na innym blogu, na blogu docelowym wszystko się sypało. Pomogło wybranie najpierw odpowiedniego szablonu podstawowego.
Szkoda tylko, że blox nie ułatwia życia osobom, które próbują same tworzyć szablony. Niejeden pewnie się zniechęcił, natykając na takie problemy...
-
Gość: , *.torun.mm.pl
2012/04/07 14:44:17
W prawdzie mam kilka pytań, ale to nie pora, zatem.
Radosnych, szczęśliwych Świąt Wielkanocnych, mocnego dyngusu,
oraz "wesołego" jajka.
-
kate_mac
2012/04/11 08:04:57
@art.krolowasniegu
proszę bardzo; fakt blox ma problem z dokładną komunikacją; wszystkie te informacje gdzieś tam są ale często napisane drobny druczkiem i nie w miejscu w którym tego szukasz; czasami nawet pojawiają się sprzeczne komunikaty jak przy dodawaniu nie-zdjęć do zasobów - pojawia się komunikat że dodawanie nie doszło do skutku bo to nie jest plik graficzny ;-)
na szczęście jednak wszystko jest tylko trzeba to ogarnąć
-
kate_mac
2012/04/11 08:10:58
@rysx
dziękuję za życzenia, akurat w różne święta zazwyczaj mam troszkę czasu na szablony :D więc jak najbardziej przedświąteczne to dobra pora na pytania
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...