szablony katemac

Ostatnio sporo o szablonach podstawowych piszę. Dla tych których temat nie interesuje mam dobrą i złą wiadomość. Dzisiejsza notka nie jest ostatnią ale następna dotycząca bloksowych szablonów podstawowych na starym kodzie będzie nie dla początkujących a dla zainteresowanych stworzeniem własnego szablonu od podstaw.

Opisałam jak unikać błędów kopiowania, jak je naprawiać i z czego moim zdaniem wynikają. Za każdym razem odwoływałam się do szablonów podstawowych bloksa. Każdy choć raz musiał się na nie natknąć bo jeden z nich wybierał przy zakładaniu bloga. Zapewne także później o te szablony potykałeś się bo nie sposób ich przeoczyć gdy chce się zmienić cokolwiek w wyglądzie bloga.

Dla tych którym co nieco się zapomniało albo potrzebują bardzo dokładnych instrukcji proponuję zapoznanie się z dzisiejszą notką. Reszcie nie będę marnowała czasu i podziękuję jedynie za dzisiejszą wizytę.

Jak zmienić szablon podstawowy bloksa?

Zaczynamy oczywiście od zalogowania się do bloksowego konta. Ja w tym celu przechodzę na stronę blox.pl i w formularzu logowania wpisuję login i hasło. Strona przeładowuje się i otwiera na nowej zakładce zatytułowanej TWOJE BLOGI. Tam z listy blogów należy wybrać ten który chce się zmieniać. Kliknij na frazę i edytuj » aby przejść do edycji bloga (pisz otworzy Ci od razu edytor nowej notki).

Edycja otworzy się na głównej karcie (WPISY) gdzie widzieć będziesz ostatnio napisane wpisy i możesz dodawać nowe. Przejdź do części zatytułowanej WYGLĄD. Zakładka ta znajduje się w górnym kolorowym menu, to ta przedostatnia, umieszczona jeszcze na niebieskim tle.

Po kliknięciu strona przeładuje się a menu poniżej zmieni się. Teraz zyskasz dostęp do kilku opcji zmiany wyglądu. Dalej iść nie trzeba, już trafiłeś do miejsca gdzie wybiera się szablony podstawowe bloksa. Są tutaj umieszczone dwa rodzaje szablonów: na nowym kodzie (new_age) o nich piszę na blogu stylekatemac.blox.pl i na starym kodzie, które układy mają ustawione na sztywno więc wybierając jeden z nich od razu decydujesz się na konkretny układ.

Klikając wybierz nie tylko zmieniasz kod HTML ale i cały szablon (czyli także kod CSS) tak więc jeżeli chcesz zachować swój szablon ale zmienić jego układ to najpierw skopiuj kod CSS do jakiegoś schowka a dopiero później zmieniaj szablon bazowy.

Zmiana układu jest prosta ale może wymagać wielu różnych drobnych poprawek. Im więcej jest różnic pomiędzy układem oryginalnego szablonu a układem na jaki chcesz zmienić swój szablon tym więcej rzeczy może sprawiać problem. Porównaj więc dokładnie oba układy aby przewidzieć w których miejscach może pojawić się problem. Polecam dwie notki na temat starych układów.

Układy, czyli bloksowe kody źródłowe blogów - Korzystając z informacji zawartych w tej notce możesz wybrać szablon podstawowy bazując na jego cechach wyróżniających: umiejscowieniu wąskiej szpalty, zagnieżdżeniu tytułu i istnieniu pustych elementów dodatkowych.

Układy, różne wersje starych szablonów podstawowych bloksa - Ta notka zawiera tylko informacje, żadnych opisów. Pozwala zarówno dowiedzieć się jakie cechy posiada układ konkretnego szablonu jak i w skrótowy sposób prezentuje informacje o cechach pozwalając dobrać kompatybilne szablony podstawowe.

Sezon świąteczno-urodzinowy rozpoczęty. Będzie teraz mniej czasu ale na szczęście przygotowałam kilka notek na zapas. Następna jeszcze przed środą. Dlaczego sezon świąteczno-urodzinowy? Moja siostra zawsze mówi, że dla niej sezon świąteczny rozpoczyna się dopiero po 23 listopada (moje urodziny, które obchodzę zawsze), dopiero wtedy jest w stanie zacząć myśleć o świętach. Ja tak nie mam bo jej urodziny są w połowie grudnia, podobnie jak mojej mamy, babci, ulubionej ciotki, siostrzeńca itd. Tuż przed świętami urodzinowe życzenia składam komuś co drugi dzień.

Kontynuując temat ilustrowanego przewodnika po bloksie, zainspirowanego dawnym wpisem DeBergeraca z animowanymi samouczkami dla początkujących dzisiaj przyszła pora na mapę prowadzącą do edycji CSS. W większości gdy piszę o jakiejś zmianie któryś raz z kolei, zapominam, że ktoś może czytać ten właśnie wpis na blogu jako pierwszy, że nie wie zupełnie co mam na myśli pisząc przejdź do arkusza stylów, albo wklej kod w polu na kod HTML.

Najdokładniej jak potrafię przedstawiam najbardziej oczywiste posunięcia. Mój blog jest o szablonach i ich robieniu. i najwyższa pora aby przedstawić krok zero czyli instrukcję jak trafić do tego arkusza stylów.

W skrócie to oczywiście:

Edycja bloga -> WYGLĄD -> EDYCJA CSS -> Edytor CSS

zapraszam jednak do rozwinięcia.

DeBergerac kiedyś, bardzo dawno temu, stworzył rewelacyjne animowane samouczki dla początkujących. W większości gdy piszę o jakiejś zmianie któryś raz z kolei, zapominam, że ktoś może czytać ten właśnie wpis na blogu jako pierwszy, że nie wie zupełnie co mam na myśli pisząc przejdź do arkusza stylów, albo wklej kod w polu na kod HTML.

Wracając do tych animowanych samouczków to od dawna nie są już dostępne. DeBergerac napisał:

Żeby ułatwić osobom początkujacym instalowanie u siebie na blogu różnorakich gadżetów, z tych co je tu publikuję, tudzież (nie będę ukrywał) by raz na zawsze odpowiedzieć na wszelkie pytania typu "a co to znaczy wrzucić do zasobów" ;) postanowiłem zrobić animowane instrukcje tłumaczące jak takie bardziej zaawansowane czynności się wykonuje. W myśl przysłowia, że obraz jest wart tysiąca słów a film - miliona (dolarow zazwyczaj).

Ja filmu nie zrobię ale mam dla was Ilustrowany przewodnik po bloksie. Najdokładniej jak potrafię przedstawiam najbardziej oczywiste posunięcia. Zacznę od dodawania dodatków do bloga. Wielokrotnie pisałam o dodatkach, zarówno tych stworzonych przez inne osoby czy udostępnione przez różne serwisy. Nawet ostatnio pokazywałam przykładowy kod utworzony dla górnego menu. Teraz pokażę bardzo dosłownie jak odnaleźć część gdzie dodajemy dodatki w postaci kodu HTML.

W skrócie to oczywiście:

Edycja bloga -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

zapraszam jednak do rozwinięcia.

O tym jak dodawać zdjęcia w notce już pisałam. W zależności od tego gdzie zdjęcie się znajduje możemy skorzystać z kilku przycisków w zaawansowanym edytorze TinyMCE ale w gruncie rzeczy to i tak nie ma znaczenia bo zawsze jesteśmy w stanie trafić w to samo miejsce a mianowicie do okna Wklej/edytuj obraz, które to okno jest naszym dzisiejszym celem.

Mamy tutaj trzy karty: Ogólne, Wygląd i Zaawansowane. Wszystkie trzy bywają przydatne choć w różnym stopniu. Część ogólne zawiera informacje podstawowe w części wręcz niezbędne do wyświetlenia ilustracji. Wygląd (dawniej prezentacja) odpowiada za różne mniej lub bardziej magiczne sposoby ustawienia zdjęcia czy dodania mu ramki. Ostatnia zakładka zawiera już bardziej zaawansowane ustawienia, związane głownie z różnymi innymi plikami powiązanymi z ilustracją.

Chociaż w mailach się nie powtarzają to jednak wydają się gdzieś wisieć w mojej świadomości jako pytania, które zainteresować mogą większą liczbę osób. Dzisiejsze FAQ nie jest związane z tworzeniem szablonu ale jednemu z pytających tak się wydawało. W swej istocie jednak to pytanie łączy się z edycją wyglądu i cssem czyli nie był wcale na złej drodze ale o tym dokładniej w jednej z następnych notek. Dzisiaj podstawowe pytanie i prosta odpowiedź.

Jeśli mogę prosić, to chciałbym się dowiedzieć, gdzie trzeba podłubać, żeby poprawić wpis z grafiką. W wersji szablonu nad którym pracuję tekst nie "opływa całego obrazka", jedynie pierwszy wers zachodzi na obrazek, co wygląda dość przeciętnie. Zauważyłem, że w nowych szablonach wygląda to już bardziej efektownie, ale nie wiem jak poprawić to u siebie.

Jeżeli mogę liczyć na krótką podpowiedź będę niezmiernie wdzięczny

Jak napisałam już wyżej to nie jest kwestia szablonu, taki efekt możecie uzyskać zarówno w najnowszych szablonach jak i w tych powstałych w początkach istnienia bloksa. Cała sztuczka kryje się w edycji dodawanego zdjęcia. Zakładam, że korzystacie z edytora Tiny MCE (zwykłego zaawansowanego a nie tego z nowymi zdjęciami, w tym drugim nie bardzo można edytować właściwości).

Dodając do notki obraz korzystamy z okna Wklej/edytuj obraz. To jest to miejsce, w którym nadjemy naszej ilustracji tytuł i widzimy jej podgląd. Jest tam kilka kart ale zazwyczaj większość ogranicza się do korzystania tylko z pierwszej a nasza dzisiejsza sztuczka kryje się w drugiej zakładce o nazwie Prezentacja.

Tutaj właśnie możemy wybrać wyrównanie naszego zdjęcia. Aby tekst je opływał powinniśmy zdecydować się na jedną z dwóch ostatnich opcji: Lewy albo Prawy. Wybieramy w ten sposób umiejscowienie naszego zdjęcia: po lewej stronie tekstu albo na prawo od niego.

Więcej o edycji wstawianego do notki obrazu we wpisie: dodawanie obrazu, właściwości 

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.

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).

Opisaniem wyglądu komentarzy i odpowiadającego za ten wygląd właściwego fragmentu CSS niewątpliwie się zajmę kiedyś, w dalekiej przyszłości. Od dłuższego czasu zastanawiam się gdzie sięga moja granica „oczywistości”, czyli jak bardzo oczywiste sprawy jestem w stanie wyjaśniać. Dochodzę do wniosku, że takiej granicy nie ma. Jeśli uznam za stosowne to mogę nawet tłumaczyć układ alfabetu.

Wpisywanie komentarzy

Gdy chcesz skomentować jakiś wpis przechodzisz na stronę komentarzy a tam pojawia Ci się mniej więcej taki widok:

Masz do uzupełnienia cztery pola:

1. Login - czyli twój identyfikator
2. Hasło - potrzebne jeżeli masz konto na Gazeta.pl
3. URL - pole na wpisanie adresu
4. Komentarz - czyli cel twej wędrówki

W zasadzie jeżeli nie posiadasz konta na Gazeta.pl albo nie chcesz się logować interesować cię będzie jedynie pole na komentarz. Tutaj wyjaśnień żadnych nie ma potrzeby dawać.

Jeżeli jesteś posiadaczem konta na Gazeta.pl to komentując wpisz login i hasło dzięki temu przy twoim komentarzu, obok twojego identyfikatora, nie pojawi się adres.

Pole na URL może pozostać puste. Polecam jednak jego wypełnienie. Powodów może być wiele. Przykładowo wypełnianie pola URL możesz potraktować jako element promocji własnego bloga. W gruncie rzeczy nieistotne jest dlaczego będziesz wypełniać pole URL, ważne jest aby to robić. Czytelnicy często czytając czyjeś komentarze chcą się dowiedzieć czegoś więcej o osobie komentującej. W tym miejscu możesz zadecydować czego się dowiedzą.

Do niedawna niewypełnienie pola na URL powodowało, że login dokonywał przekierowania na stronę osoby komentującej na ludzie.gazeta.pl. Nie było to najlepsze rozwiązanie. Dostęp na stronę mieli tylko zalogowani użytkownicy czyli cały czas kręcimy się tylko we własnym świadku. Teraz jest nieco inaczej. Jeżeli nie wypełnisz pola na URL twój login będzie linkował na stronę twojego profilu. Jak na razie umieszczone są tam początki twoich ostatnich notek ze wszystkich twoich blogów, linki do stron na których komentowałeś i do twoich wpisów które zostały skomentowane. W ustawieniach profilu możesz zadecydować o jego niewyświetlaniu. Ogólnie jest to nieco lepsze rozwiązanie ale ma pewne wady więc nie wszyscy chętnie z niego korzystają. Link do profilu należy traktować jak alternatywę a nie jak konieczność. Szkoda jednak, że profil można wyłączyć. Może to przekonałoby tych opieszałych w uzupełnianiu URL, że lepiej samemu zadecydować do czego ma linkować mój login.

Mój login najczęściej jest odnośnikiem do tej strony czyli wpisuję:
http://szablonykatemac.blox.pl

Linki w komentarzach

Adresy w komentarzu zaczynające się od protokołu http:// zostają automatycznie zamienione w linki. Tak więc gdy komentując na cudzym blogu będę chciała odwołać się do własnego umieszczę w polu na URL własny adres http://szablonykatemac.blox.pl lub w treści komentarza wpiszę adres zaczynając od http:// a po opublikowaniu wyświetli się samo szablonykatemac.blox.pl.

Jeżeli adres do którego linkujemy nie jest istotny, liczy się to co chcemy polecić, to lepiej skorzystać z 'tagów' dostępnych w bloksowym formularzu. Tagi te nawiązują do html jednak zamiast nawiasów ostrych należy wykorzystać nawiasy kwadratowe. Do dodania linku służy oczywiści tag a który w bloksowym komentarzu powinien przybrać mniej więcej taki wygląd:

[a="http://szablonykatemac.blox.pl/html"]szablony katemac[/a]

po opublikowaniu kod ten zmieni się w hiperłącze: szablony katemac

Na koniec źródło mej inspiracji znalezione na Forum:

Czyta/em ja sobie "Bez jaj" i zaswędzia/y opuszki.
Niestety, technika powyżej budzika, budzi mooj lęk.
Czym-Kim jest,rośliną, rybą czy minera/em, oow URL,
co stoi mi na przekoor?
Z odpowiednim poważaniem,
Scoolony.

O edytowaniu wyglądu linka podziału notki na wstęp i treść już było. Myślę że w tym temacie wszystko jest jasne pozostaje więc teraz przejść do etapu pisania notki. Wiele osób uważa, że podział wpisu na wstęp i treść jest zniechęcający. Tak dalece tego bym nie określiła. Ułatwia nie-przeczytanie całej notki ale może zachęci do przeczytania następnej?

Dzisiejsza notka jest częścią ilustrowanego przewodnika po bloksie, gdzie opisuję jak edytować notki i w ustawieniach bloga znaleźć odpowiednie elementy. Tym razem opiszę jak wygodnie pisać wstęp, dodając do niego ilustracje i linki bez konieczności znajomości HTML.

• Wady dzielenia na wstęp i treść
• Zalety dzielenia na wstęp i treść
• Na co zwrócić uwagę przy dzieleniu
• Edycja wstępu (od TinyMCE do HTML, czyli jak we wstępie umieszczać linki i ilustracje)