O szablonach, ich projektowaniu i moich z tym zmaganiach...
środa, 29 września 2010

Coffe by Seanau.comPlanowałam więcej zwierzaczkowych szablonów i może będzie ich więcej ale póki co nie na starym kodzie a więc w ciągu ostatniego miesiąca udostępniłam ponownie pod nowymi adresami dwa kocie szablony dodając im kilku towarzyszy. W dalszym ciągu zostały dwa kocie szablony: jeden z moich ulubionych, jasny, prosty szablon koci 05 - szary oraz mniej lubiany, przyciężkawy szablon koci 03 - różowy. Ten ostatni ma też swoje dwie psie wersje: niebieską i pomarańczową. Nie będę ich poprawiać, możliwe, że szary kiedyś pojawi się ponownie nieco przekształcony na nowym kodzie.

szablon koci 01 - ornament zielony szablon koci 02 - zielony szablon koci 03 - niebieski szablon koci 04 - beżowy szablon koci 05 - brązowy szablon koci 06 - bordowy

Poprawkom towarzyszyła ikonka Coffe autorstwa Seanau.com.

niedziela, 26 września 2010

W lutym 2008 obok kociego niebieskiego zrobiłam też brązowy. Nie był pozbawiony wad ale moim zdaniem był fajniejszy. Dlatego też nie zmieniałam go zasadniczo wcale, zrobiłam mu tylko towarzysza w chłodniejszej palecie.


szablon koci 05 - brązowy
szablon koci 05 - brązowy


szablon koci 06 - bordowy
szablon koci 06 - brązowy


0Etheme - SpokojnySzablony są na starym kodzie, dokładnie rzecz ujmując jest to spokojny. Szablony dostosowane są do popularnych skryptów, mieszczą zdjęcia o szerokości 512px a wykorzystanym fontem jest Lucida Sans Unicode (Lucida Grande, Verdana) i Times New Roman.

środa, 15 września 2010

Gdy w lutym 2008 po raz pierwszy robiłam kocie szablony, pierwszy który zrobiłam od razu cieszył się całkiem sporą popularnością. Niestety sporo rzeczy w nim nie było idealnych. Ten wzór prześladuje chyba pech bo choć większość błędów poprawiłam dalej coś nie całkiem gra w IE6. Tym razem jest to już jednak drobiazg, który nie rzuca się w oczy a, że w pozostałych przeglądarkach (także bardziej aktualnych wersjach IE) wszystko jest ok tak więc szablony zostają takie jak teraz.


szablon koci 02 - zielony
szablon koci 02 - zielony


szablon koci 03 - niebieski
szablon koci 03 - niebieski


szablon koci 04 - beżowy
szablon koci 04 - beżowy


Jak widać nie tylko poprawiłam szablon ale także wprowadziłam w nim kilka zmian. Poprzednio był to tylko niebieski lewostronny szablon. Teraz są trzy, w różnych ale w stonowanych kolorach. Jest jeden lewostronny i dwa prawostronne. Wszystkie nowości są w nich uwzględnione, opisałam też kilka skryptów i parę wklejek, jeśli kogoś interesuje co dokładnie to jak zwykle zapraszam do notek O szablonie, wszystkie istotne informacje są tam wyszczególnione. Maksymalna szerokość zdjęć w notce to dokładnie 506px czyli proponuję nie wstawiać takich 510px bo ten szablon nie jest rozciągliwy. Wydawać się może, że te 4px to nic wielkiego ale przeglądarki różnie interpretują dane, które dostają ze stron, jedne nie zwrócą uwagi na za duże zdjęcie inne w takim przypadku mogą nie zwrócić uwagi na wielości w szablonie. I choć sama zmiana wielkości nie jest dużym problemem to niestety poważnieje on gdy w szablonie tło jest graficzne a tutaj tak właśnie jest.

piątek, 10 września 2010

Tree in an inbox Icon by Mattahan (Paul Davey)Kilka miesięcy temu bloks zmienił wygląd edycji bloga - początkowo czasami trudno było się zorientować gdzie co jest bo przyzwyczajona byłam do starego układu ale nowy okazał się zjadliwy i w miarę sensowny. Sama podzieliłabym to nieco inaczej (wpisy/treść główna - boczna szpalta - komentarze - ustawienia; gdzie edycja css znalazłaby się w ustawieniach) ale jest jak jest i nie jest nawet źle. Dla nowych bloksowiczów informacje z tej notki przydadzą się na początek; dla tych co blogują często ale w ustawienia bloga zaglądają rzadko też takie podsumowanie może być przydatne.

edycja - wygląd

WYGLĄD

Szablony podstawowe - to szablony zaproponowane użytkownikom przez bloksa. Możemy je podzielićna dwie grupy: stare szablony, różniące się nieco między sobą kodem html i nowy szablon tzw. new_age. Nowy szablon to zupełnie inna historia i na razie zajmować się nim nie będziemy. Stare szablony są bazą dla większości szablonów jakie na bloksie zrobiono. Jeden z nich zawsze będzie wybrany, nawet jak na blogu masz jeden z szablonów udostępnionych przez użytkowników. Szablon podstawowy to baza - określa z jakiego kodu html Twój blog korzysta.

Więcej o szablonach bazowych możesz się dowiedzieć z notki: Układy

Szablony użytkowników - to najprostszy dostęp do wszystkich szablonów udostępnionych przez użytkowników blox.pl. Ułożone są one w kolejności od najczęściej pobieranego. Prawie dwieście stron po 18 szablonów daje naprawdę gigantyczną liczbę ale próba przejrzenia wszystkich udostępnionych szablonów to strata czasu. Jasne, zawsze można trafić na jakąś perełkę ale w większości są to zapomniane blogi z włączonym udostępnianiem CSS. Z drugiej strony wiadomo, że nowo-udostępniony szablon będzie gdzieś daleko w tyle a taki z 2005 gdy bloks był wyrostkiem dochrapał się wyższego miejsca, z biegiem czasu to się wyrównuje ale mam wrażenie, że z takiego rankingu można skorzystać tylko raz. Ta część dla mnie jest niezbyt przydatna ale dla kogoś kto zaczyna zapoznawać się z bloksem to najprostszy dostęp do szablonów użytkowników.

Jeżeli ktoś chciałby inaczej zapoznać się z szablonami szerszej grupy użytkowników zapraszam na szablon_team.

Edycja CSS - najważniejsza część edycji wyglądu bloksa, tutaj można przeprowadzić największe zmiany. Bloksowe blogi korzystają z zewnętrznych arkuszy stylów. HTML i CSS są tu wyraźnie rozdzielone. HTML tworzy szkielet, to są ściany, podłogi i okna naszego blogowego domku. CSS natomiast to wystrój wnętrza, nie zmienia on elementów. Coś musi najpierw istnieć aby można było opisać jego wygląd. CSS to wygląd HTML to element. Na bloksie masz dostęp do edycji wyglądu ale nie do edycji elementów (co najwyżej możesz dodać nowy element, ale to w innym miejscu).

Tagi do wpisów - to stosunkowo nowy element, tutaj możesz podjąć kilka decyzji odnośnie elementu chmurka tagów. Chociaż dotyczą one częściowo wyglądu tego elementu to są to zmiany związane z html (wygląd chmurki tagów opisujesz jak wygląd niemal wszystkich elementów bloga w edycji CSS). Tutaj decydujesz tylko o sposobie sortowania i ilości tagów w chmurce (dlateo też wydaje mi się, że ten element powienien znaleźć się w części ustawienia-boczna szpalta).

Pozostałe - czyli takie trochę bez ładu i składu decyzje do podjęcia: kolor belki (proponuję biały); czy opis ma się wyświetlać (tak o ile nie jest zbyt rozbudowany; powinien wyjaśniać o czym jest blog ale w sposób zwarty; jeżeli istnieje potrzeba szerszych wyjaśnień proponuję napisać stronę about); optymalizacja pod wyszukiwarki - zdecydowanie tak.

edycja - ustawienia

USTAWIENIA

Główne - z rzeczy związanych częściowo z wyglądem tutaj podejmujesz decyzję o liczbie wpisów wyświetlanych na stronie (1-25).  Oczywiście nie ma jednego słusznego rozwiązania. Długie rozbudowane notki lepiej będzie się czytało gdy będzie ich mniej na stronie. Jeżeli wpisy są krótkie, informacyjne to spokojnie można ich umieścić więcej. Automatycznie ustawione jest 10, ja wyświetlam 8 ale nawet jedna notka na stronę będzie ok. np. w przypadku bloga-galerii.

Boczna szpalta - to drugie najistotniejsze dla wyglądu (po edycji CSS) miejsce w edycji bloksa. Tutaj decydujesz o sposobie wyświetlania archiwum (lista miesięcy czy kalendarz), czy wyszukiwarka ma być na blogu czy nie, co z elementem Ostatnie wpisy (element, który wyświetla linki do 10 ostatnio opublikowanych na blogu wpisów). Tutaj możesz włączyć newsletter. Ostatnim elementem tej części edycji jest miejsce na dodatki - tutaj możesz dodać kod html elementów które chcesz aby pojawiły się na blogu. Automatycznie wyświetlać się będą poniżej wąskiej szpalty. Wystarczy że wpiszesz tu kod html elementu, edycję jego wyglądu możesz przenieść do arkusza CSS.

Wpisy - tutaj można znaleźć kilka interesujących rzeczy do edycji: wybraną kategorię, przyciski facebooka i wykopu, podział na wstęp i treść, pole pod pojedynczą notką etc.

poniedziałek, 06 września 2010

Maile szablonoweNiektóre pytania w mailach powtarzają się regularnie i chyba prościej mi będzie umieścić odpowiedzi na nie tutaj, szczególnie biorąc pod uwagę jak rzadko zaglądam do skrzynki i odpowiadam na nie. W ten sposób dużo łatwiej i szybciej powstanie FAQ i jakiś rodzaj przewodnika po tworzeniu szablonu. Zacznijmy od prostych pytań i podstawowych wyjaśnień, tak dla bardzo początkujących.

Pobrałam szablon i ... :) teraz próbuję przerobić go "pod siebie". Bardzo proszę o pomoc. Czy może mi Pani powiedzieć, gdzie jest edycja ustawień - coś takiego jak w blogspocie? nie moge tego znalezc.

Większość zmian w wyglądzie przeprowadzać będziemy w części WYGLĄD -> EDYCJA CSS. Zmiany te realizować można poprzez opisywanie elementów cechami CSS - czyli potrzebna nam będzie znajomość CSS albo chociaż jakaś mała ściągawka co-jest-czym i do-czego-służy.

Na chwilę obecną nie ma na bloksie zaawansowanego edytora wyglądu łatwego w użyciu dla laika. Niemniej jednak dostęp do edycji arkusza stylów pozwala realizować większość pomysłów.

Więcej o edycji wyglądu w edytorze bloksoweym w notce: edycja bloksa: Zmiany w wyglądzie bloga


Przykładowe notki i strony na temat CSS bloksa

środa, 01 września 2010

trzecie urodziny szablonykatemacRezygnując z mojego pierwszego szablonu zdecydowałam się dostosować go do wymogów powszechnego udostępniania i podzielić się pomysłem. Rzecz okazała się całkiem przydatna więc gdy pojawił się pomysł aby zmienić szablon z blogu dodatkowego zdecydowałam się powtórzyć temat być jak kate_mac a nawet więcej bo zdecydowałam się od razu podzielić także nowym pomysłem i tak powstała seria z ornamentem. Ostatecznie szablonu na blogu dodatkowym nie zmieniłam bo nie bardzo miałam czas i nastrój na napisanie szablonu ornamentowego dla siebie ale może jeszcze to się zmieni... Tymczasem dzielę się także starym (choć nadal wykorzystywanym) wyglądem blogu towarzyszącego. Przy okazji zastanawiam się nad sensem tego blogu. Powstał gdy na bloksie nie było jeszcze stron statycznych, tratowałam go trochę w ten właśnie sposób a teraz poniewiera się po internecie bez celu...


kate 06 żółty ciemny
kate 06 żółty ciemny


kate 07 niebieski
kate 07 niebieski


kate 08 magentowy
kate 08 magentowy


0Etheme - SpokojnyWybrałam trzy wersje kolorystyczne: czarno-żółtą jak z jednego z szablonów z kawą, szaro-niebieską bazującą na szablonie dashed i magentowo-brązową nawiązującą do oryginalnego wyglądu. Szablony dostosowane są do popularnych skryptów, mieszczą zdjęcia o szerokości 500px a wykorzystanym fontem jest TrebuchetMS.

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...