szablony katemac

Dziś na filiżankę kawy zapraszam Pineskę. Bogactwo i różnorodność jej szablonów sprawiają, że wybranie spośród wszystkich trzech lub nawet sześciu najlepszych szablonów wydaje się być zadaniem niemożliwym do wykonania. Przyjęłam więc bardzo surowe kryteria i starałam się aby każdy z sześciu tu pokazanych reprezentował inny styl. Polecam też zajrzeć na bloga Pineski - butterlandnet.blox.pl. Pojawił się tam nowy szablon w zupełnie innym stylu niż dotychczasowe więc można się spodziewać, że w szablonowej twórczości Pineski pojawił się nowy nurt. Nie wszystkie szablony mają poprawiony kod pod zmiany SEO ale Pineska prowadzi wśród swoich szablonów akcję „SEO friendly” i chociaż nie planuje poprawić wszystkich szablonów to te o których we, że mają użytkowników będą miały nowy kod. Tak więc jeżeli skorzystacie to nie zapomnijcie dać znać Pinesce że szablon który wybraliście jest w użyciu.

Nowy szablon dla butterland.net jest niezwykle elegancki i stonowany za to powstały około rok temu a la fowizm może być uważany za jego zupełne przeciwieństwo: jest niekonwencjonalny, odważny kusi nadmorskim klimatem i jedyne co mi przeszkadza to jego szerokość ale i tak całość fascynuje. Orientalny z Chinka, podobnie jak pozostałe szablony z egzotycznymi motywami, doskonale przywołuje klimat wyobrażeń o danej kulturze. Charlie czy Alfred to najfajniejsze realizacje szablonów ze sławami jakie widziałam na bloksie. Szablonów w stylu retro także jest kilka. Rok temu kiedy zaczynałam blogowanie Elegantka była jednym z szablonów, który wybrałam dla swojego bloga. Na wakacjach ma podobny staroświecki styl ze sporą dozą delikatności i stylu. Jednym z pierwszych szablonów był ten z pszczołą. Owadów nie cierpię ale ten przypadek zasługuje na wyjątek. Ostatnim z polecanych jest urocza kaczuszka. Ptaków też nie lubię... te pióra, pazury, dzioby...

PS. Mój ulubiny zwierzak

Ponownie różowy szablon. Ampla już była w kolorze toksycznej zieleni i cyjanowego niebieskiego, teraz pora na megentowy róż. Więcej chyba już nie będzie więc trzeba się delektować tymi, które są. Lekko magentowy róż od początku był moim kolorem, wolę go w nieco bardziej czerwonym (karmazynowym) odcieniu ale ten który jest w tej ampli świetnie pasuje do reszty.

---

21 szablon ampla, różowy
na starym kodzie, dla blogów na blox.pl. -500px- 

---

Szablon jest całkiem prosty, jego głównymi ozdobnikami są przerywane ramki i kolor różowy, ampla wisząca i oświetlająca szablon jest już tylko dodatkiem. Uaktualniając szablon w 2012 roku dodałam w opisie krój Segoe UI, który jest niemal równie czytelny jak Verdana (ma całkiem spore oczka) ale znacznie ładniejszy w dużym stopniu pisma (co jest problemem w przypadku Verdany).

Szablon został zaktualizowany w styczniu 2012 a ta notka znacznie zmieniona.

Myślałam o skrypcie pokazującym ostatnie komentarze na blogu już dawno temu. Dotychczas jednak nie wydawał mi się konieczny. Korzystając jednak z chwilki wolnego czasu postanowiłam spróbować. Przecież podstawą tego bloga jest uczenie się a więc nauczę się teraz jak zainstalować u siebie na blogu ten skrypt.

Na Blox.pl automatycznej funkcji pokazywania ostatnich komentarzy na stronie głównej bloga nie ma ale to w niczym nie przeszkadza bardziej zaawansowanym userom w stworzeniu takiej możliwości.

1. eskey: blox i prezentacja ostatnich komentarzy
2. s.z.y.m.o.n: Ostatnie komentarze - wersja JavaScript widgetu

Co

Tym razem oczywiście zdecyduję się na wersję Szymona. Jest dużo prostsza i działa lokalnie. Dodatkową zaletą skryptu jest fakt iż tak wiele osób na bloksie z niej korzysta. W tym momencie śmiało możemy uznać, że skrypt został przetestowany i sprawdza się w działaniu wyśmienicie.

Jak

1. Dodaj skrypt do zasobów bloga
   a. pobierz plik skryptu ze strony Szymona
   b. ewentualnie zmień parametry skryptu (myślę jednak, że zastosowane są najbardziej optymalne)
   c. dodaj plik skryptu do zasobów bloga.
2. Wpisz kod wywołujący skrypt w pole na kod HTML
3. Opisz w CSS wygląd nowych elementów

Choć krok trzeci to kwestia estetyki to jednak jest konieczny. Prawdopodobnie taki surowy wygląd nie będzie odpowiedni dla żadnego szablonu.

Estetyka

Do dopasowania wyglądu do własnych oczekiwań wykorzystałam selektory które podał Szymon.

#LastComments {} – dotyczy całego boxu z komentarzami; myślę, że dobrze będzie podać tu parametry które wpisane są przy wąskiej szpalcie

#LCtitle {} – to jest tytuł całości czyli o ile nie dokonano zmian to będzie napis „Ostatnie komentarze”; najprawdopodobniej najlepiej będzie wyglądał gdy nada mu się parametry zbliżone no wyglądu napisu „Archiwum” czy „Zakładki”

#LastComments ul {} – opisuje wygląd całej listy ostatnich komentarzy, tak więc jeżeli nie chcesz aby komentarze miały styl listy najlepiej skorzystaj z rady Szymona i wpisz border:none

.LCuser {} - wygląd autora komentarza; u siebie postanowiłam ozdobić go prostym drobnym elementem zaczerpniętym z ozdobnika, który powtarza się u mnie w szablonie

.LCdate {} - wygląd daty dodania komentarza; użyłam nieco mniejszej czcionki

#LastComments li {} – wygląd pojedynczego komentarza; ustawiłam odstęp pomiędzy poszczególnymi komentarzami aby się nie zlewały ze sobą

Ikony

Do ozdobienia poszczególnych komentarzy najlepiej jest używać ikon typu chat bądź user; najbardziej kojarzą się one z komentarzami i komentującymi.

Wybrałam kilka ikon kojarzących mi się z użytkownikami zostawiającymi komentarze. Zobacz»

Na stronie www.intersmash.com znalazłam natomiast przykładowe ikony typu chat/comment.

Postanowiłam wrócić do polecania szablonów i robić to w miarę możliwości regularnie. Dzisiaj zdecydowałam się zaprosić do siebie Pointlessnostalgic. Chociaż szablony oglądam od dawna to jednak jeżeli chodzi o polecanie to miałam pewne opory. Przede wszystkim dlatego, że często szablony te nie są dostosowane do wyświetlania we wszystkich przeglądarkach. IE choć generalnie irytująca i konfliktowa robi coś czego nie robią Opera czy FF, mianowicie Explorer interpretuje opcje wyglądu suwaków. Pointlessnostalgic zrobiła kilka ciekawych szablonów, które ze względu na suwaki dobrze prezentować się będą jedynie w IE. Dlatego też choć polecam to z lekką dozą nieśmiałości. Drugim problemem może być rozdzielczość ekranu. Jeżeli jeszcze zrezygnowanie z dopasowywania wyglądu dla użytkowników rozdzielczości 800x600 wydaje się zrozumiałe to nieprawidłowe wyświetlanie się szablonu także na ekranach o rozdzielczości 1024x768 to przykra niespodzianka dla około połowy odwiedzających.
(Przykładowe choć nie blogowe statystyki można zobaczyć u Pawła Wimmera Zobacz»)

Koniec jednak tego marudzenia. Moja ulubiona jak wiecie część czyli przykładowe szablony. Ze względu na powyższe komplikacje nie tyle będą to szablony, które najbardziej mi się podobają co te, które spełniają standardy (albo jak kto woli uwzględniają statystyki) i jednocześnie podobają mi się.

Moim ulubionym szablonem jest portret Doriana Grey’a. Jest taki stylowy i do tego jeszcze to zdanie: „Death isn’t a reason to live slowly. It’s justification for a decadent lifestyle.” Polecam ten szablon gorąco.

Szablony nie mają jednego wyraźnego stylu, są bardzo zróżnicowane. Wykorzystywane są w nich grafiki bardzo różnego typu i charakteru. Swoistym dopełnieniem wyglądu są pojawiające się w formie grafik napisy-cytaty, np. „bo my jesteśmy chirurgami tej ulicy/ tylko Ty i Ja umiemy wstrzymać jej tętno”. Kolory są ciekawie dobrane choć muszę zastrzec, że w niektórych szablonach raczej trudne ale generalnie jest bardzo interesująco i przede wszystkim właśnie dlatego polecam. Z sześciu tu pokazanych mogłabym skorzystać z czterech.

Czyż on nie jest słodki?

Kto jest się w stanie oprzeć tak uroczemu liskowi?

 

Dzisiaj nie będzie szablonów. Dzisiaj będzie królować literka P.

• P jak propaganda
• P jak promocja
• P jak przeglądarka
• P jak pobierz za darmo Firefoxa

Dawno nie polecałam tu cudzych szablonów. Bynajmniej nie dlatego, że nie ma co polecać, oj jest i to sporo. Powodem było raczej to, że tak bardzo pochłonęły mnie nowe szablony i odpowiedni dobór kolorów do nich.

Dziś jednak polecam szablony sophyi. Projekty prezentują się całkiem dobrze. Saphyia nie wprowadza wielu zmian ale te na które się decyduje w sposób istotny zmieniają wygląd strony. Przede wszystkim kolorystyka. Kolory są przeważnie spokojne i stonowane. Grafika interesująca. W konstrukcji większych zmian nie widać. Myślę, że to ciekawe propozycje.

Pora na kilka przykładów

Pierwszy szablon z serii Clean (typ A) nazwę swoją zawdzięcza nagłówkowi z szablonu "CleanJS - WEB 2.0 look". Moja wersja jest czerwona jest jednak w w wielu miejscach zupełnie różna od oryginału (w zasadzie z oryginału wzięłam tylko dwie najbardziej charakterystyczne rzeczy: tło nagłówka i wygląd szukacza) i w większości przypadków tylko do niego luźno nawiązuje. Początkowo też od strony kodu opierała się na bloksowym szablonie Szymona umieszczonym w szablonowni.

---

Szablon 20 Clean - czerwony,
na starym kodzie, dla blogów na blox.pl. -550px- 

---

Szablon przeszedł niewielki lifting gdy w listopadzie 2011 dodawałam mu górne menu. Unikałam radykalnych zmian i w zasadzie poza poprawieniem położenia i ekspozycji kilku elementów niewiele wizualnie się zmieniło. Najbardziej radykalna zmiana dotyczyła szukacza, który w poprzedniej wersji był w formie graficznej, teraz natomiast jego wygląd to zasługa kodu css i jedyną ilustracja którą wykorzystuje jest lupa.

Tak jak wcześniej obiecałam dzisiaj zajmę się wersją B skryptu Eskey'a. Pierwsza funkcja skryptu ograniczała się w zasadzie jedynie do zwinięcia zakładek. Niezwykle istotna funkcja i bardzo prosta do zastosowania ale zwijane zakładki na bloxie już były. Wydaje mi się, że skrypt Eskey'a jako prostszy jest lepszym rozwiązaniem ale jeżeli ktoś korzystał z pomysłu Szymona to najprawdopodobniej wygodniej mu byłoby korzystać ze znanego rozwiązania i nie bardzo zainteresowałby go skrypt Eskey'a.

Istnieje jednak druga funkcja skryptu i to ona przede wszystkim wprowadza ogromną różnicę pomiędzy rozwiązaniami. Jak kiedyś Eskey samokrytycznie napisał na swoim blogu, że lepsza wersja ostatnich komentarzy (szymona) wyprze gorszą (eskeya) tak teraz można by powiedzieć, że prostsza i dająca więcej możliwości wersja Eskeya wyprze rozwiązanie Szymona. Tą różnicującą funkcją skryptu jest właśnie możliwość wyświetlania zakładek na stronie z komentarzami.

Uaktualnienie: Szymon zwrócił mi uwagę, że jego sposób także działa na stronie komentarzami. Jeżeli chcesz zobaczyć przykład zastosowania jego czarów to polecam guslarka.blox.pl - wygląda to bardzo dobrze. Tak więc wygląda na to, że podstawową różnicą pomiędzy rozwiązaniami pozostanie stopień trudności zainstalowania (podstawową z mojego punktu widzenia).

Zakładki na stronie z komentarzami

Aby skorzystać z wersji podstawowej czarów Eskey'a należało wykonać trzy kroki: dodać skrypt do zasobów bloga, wpisać kod wywołujący skrypt w pole na kod HTML, opisać w CSS wygląd nowych elementów zakładek. Proste łatwe i przyjemne. Umieszczenie zakładek na stronie komentarzowej również nie jest skomplikowane - instrukcja. W trzech krokach wyglądać to będzie tak:

1. eksport zakładek na dysk (w pliku OMPL)
2. załadowanie do zasobów pliku z zakładkami (plik z rozszerzeniem xml)
3. wpisanie nieco zmienionego kodu w pole na kod HTML

• w niektórych przypadkach potrzebny będzie krok czwarty czyli edycja wyglądu w CSS przy zastosowaniu selektora: #ZakladkiOPML

Nie było to trudne. W zasadzie ograniczało się do kliknij, wpisz, kopiuj, wklej.

Oczywiście rozwiązanie Eskey'a ma pewne ograniczenia. Po pierwsze po każdej zmianie zawartości zakładek należy wymienić plik w zasobach na aktualny ale jak łatwo zauważyć nie trwa to długo i nie jest skomplikowane. Po drugie wygląd zakładek na stronie z komentarzami. Na chwilę obecną nie udało mi się uzyskać wyglądu identycznego zakładek zarówno za stronie z komentarzami jak i na głównej ale nie tracę nadziei. Wygląd to bardzo indywidualna sprawa przede wszystkim ze względu na szablon. Generalnie nie widzę większych problemów to tylko ten mój szablon taki kapryśny. Udostępniane przeze mnie szablony powinny reagować miej alergicznie (na sucho mogę ocenić że w większości przypadków nie będzie różnicy; wyjątek stanowić może jeden ze sportowych szablonów).

Na koniec oferta. Jeżeli ktoś miałby problem z dostosowaniem wyglądu zakładek na stronie z komentarzami to z chęcią udzielę pomocy. Oczywiście granicą tej pomocy jest moja wiedza i możliwości ale i tak zapraszam.

A Eskey'owi ponownie dziękuję. Ten skrypt idealnie wpasował się w moje oczekiwnia.

Uaktualnienie: polecam drugą wersję tego samego skryptu - zwijane zakładki - wersja druga

 

Zakładki to jedna z najbardziej interesujących mnie rzeczy na blogu. Nie mam pojęcia dlaczego tak się dzieje ale skoro tak jest to dzisiaj ponownie wpis o wyglądzie zakładek. Nie będę dzisiaj czarować bo nie potrafię ale chciałabym zwrócić uwagę na pewien niezbyt często wykorzystywany selektor, mianowicie:

.PoziomDrzewa { }

Jak pisze na css.blox.pl

.PoziomDrzewa – to położenie całej zawartości folderów z zakładkami w stosunku do nazw tych folderów

W skrócie:

• box z zakładkami (BlogZakladkiBox)składa się z napisu zakładki (ZakladkiTytul) i i łącznie folderów zakładek (ZakladkiItems);
• foldery składają się z tytułów folderów (TytulFolderaZakladek) i z ich zawartości czyli właśnie tego co zawiera się w PoziomDrzewa;
• następnie mamy już tylko etykiety zakładek (ZakladkaEtykieta) czyli w uproszczeniu nasze właściwe zakładki – linki

Z całą pewnością jest kilka ciekawych efektów jakie można uzyskać za pomocą selektora .PoziomDrzewa; ja chciałabym opisać jeden z nich: każdy folder zakładek w osobnej ramce. Uzyskamy dzięki temu nieco inny efekt niż w przypadku szablonów Connections czy Radioblox

Każdy folder zakładek w osobnej ramce

Efekt można osiągnąć także inaczej ale mnie zależy na tym aby ramkom dodać graficzne ozdoby. Efekt można obejrzeć sobie tutaj »zobacz. O wyglądzie zakładek decyduje tam kilka elementów.

• po pierwsze grafiki
  górna (top):
  i dolna (bottom):

• po drugie tło
  background: #e2e2e2;

• po trzecie ramki
  border:#a7a7a7 2px solid;

• po czwarte odstęp pomiędzy zawartością poszczególnych folderów
  margin: 10px;

Sposób przyrządzenia

Do zrobienia osobnych "pudełek" na zakładki wykorzystany dwa selektory: .TytulFolderaZakladek i .PoziomDrzewa

1. .TytulFolderaZakladek to jak sama nazwa mówi selektor opisujący wygląd nazwy jaką nadaliśmy folderowi z zakładkami; w tym miejscu powinniśmy określić cechy wpływające zarówno na wygląd samego napisu jak i na wygląd tego co go w boxie otacza
   

   wpisujemy	oznacza
   padding:15px 5px 0px 5px;	padding czyli wewnętrzny odstęp; w tym przypadku będzie to odstęp pomiędzy zawartością (czyli nazwą folderu) a ramkami; kolejność określania cechy powinna być taka: górny, prawy, dolny, lewy
   background: #e2e2e2 url(/resource/ws_top.gif) no-repeat top center;	tło; najpierw określamy kolor, w tym przypadku będzie to szary (#e2e2e2); następnie podaję adres grafiki górnej umieszczonej dzięki paddingowi nieco powyżej tekstu; "no-repeat" oznacza, że grafika nie powinna się powtarzać a "top center" że w boxie umieczsona jest u góry, na środku
   border-top:#a7a7a7 2px solid; border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid;	border czyli ramka ramkę określam jedynie dla trzech krawędzi: górnej i bocznych; górna ramka sprawiłaby, że tytuł foldera oddzielony byłby linią od zawartości czyli linków
   font-size: 12px; color: #333333; font-weight:bold; text-align:center;	przykładowe właściwości określające wygląd tekstu; kolejno: wielkość czcionki, kolor, grubość, wyrównanie tekstu;

2. .PoziomDrzewa to jak już ustaliliśmy wygląd zawartości foldera, czyli same linki; w selektorze tym określamy podobne cechy jak w .TytulFolderaZakladek; wyjątek stanowić będą niektóre właściwości tekstu ponieważ zależne będą one od wyglądu linkw (a)
   

   padding: 10px 5px 20px 5px;	tym razem większy robimy padding dolny ponieważ będzie znajdować się tam grafika
   background:#e2e2e2 url(/resource/ws_bottom.gif) no-repeat bottom center;	podobnie jak górna grafika dolne też nie powinna się powtarzać; jej płożenie koniecznie trzeba określić jako bottom w przeciwnym wypadku wyświetlać będzie się zaraz pod nazwą folderu
   border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid; border-bottom:#a7a7a7 2px solid;	tym razem pozostawiamy nieokreśloną ramkę górną
   margin-bottom: 10px;	margin czli odstęp zewnętrzny; odstęp pomiędzy elementem który opisujemy a elementem sąsiadującym;

Prościej tego wyjaśnić nie potrafię ale mam nadzieję, że i tak opis jest zrozumiały. Na koniec fragment opisywanego tu CSS »Zobacz

Miał bisować różowy szablon ale różowy to bardzo trudny kolor, niewiele jest odcieni różowego, które sprawiałby przyjemne wrażenie. Dlatego też dzisiaj pojawia się niebieski. Jest to typ AMPLA, znacznie jednak spokojniejszy niż toksycznie zielony pierwowzór.

---

18 szablon ampla, niebieski
na starym kodzie, dla blogów na blox.pl. -500px- 

---

Szablon jest całkiem prosty, jego głównymi ozdobnikami są przerywane ramki i kolor niebieski, ampla wisząca jest już tylko dodatkiem i oświetla w nieco mniejszym stopniu niż ta zielona. Uaktualniając szablon w 2012 roku dodałam krój Segoe UI, który jest niemal równie czytelny jak Verdana (ma całkiem spore oczka) ale znacznie ładniejszy w dużym stopniu pisma (co jest problemem w przypadku Verdany).

Szablon został zaktualizowany w styczniu 2012 a ta notka znacznie zmieniona.