szablony katemac

Rezygnują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 07 niebieski

kate 08 magentowy

Wybrał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.

Dwa lata temu przerabiałam Kubricka chcąc aby taka przeróbka była jak najprostsza. Dzięki łatwości takiego zadania chciałam ułatwić większej liczbie osób bezproblemowe dostosowane własnego szablonu. Tym razem zdecydowałam się na dalej idące zmiany. Wymieniłam nagłówek, dostosowałam do niego kolory, zmieniłam czcionkę, wprowadziłam poprawki do arkusza zmieniając nieco opis niektórych elementów aby były bardziej tak jak ja chcę. Dodałam też opisy niektórych skryptów i opis klas .bloks i .tyt, które mogą wygodnie posłużyć do dodawania dodatkowych treści pod wąską szpaltą.

Zapraszam do zapoznania się z pięcioma wariacjami na temat szablonu Kubrick.

kubrick 06 czerwona Georgia

kubrick 07 kolisty Trebuchet MS

kubrick 08 malarski Arial

kubrick 09 niebieski Times

kubrick 10 nocna Verdana

Tym razem nie świętaowałam. Jak ostatnio często piszę: brak mi entuzjazmu. Czasami pojawia się na godzin kilka i wydaje mi się, że mam tyyyyleeee do zrobienia ale następnego dnia zniechęcenie pokrywa entuzjazm. Szablony, które powstały w fazie entuzjazmu oczywiście mam i chyba nawet częściowo są już dostępne ale pochwalę się nimi gdy minie faza zniechęcenia.

W formie małej zapowiedzi powiem, że będą to Kubricki o których myślałam rok temu (miały być dopełnieniem tych pięciu sprzed dwóch lat) i kolejne być jak kate_mac ale na podstawie szablonu z blogu towarzyszącego, który zamierzam zmienić na typ z ornamentem. Istnieje możliwość, że być jak kate_mac powstanie na podstawie wersji 2.0 ale na razie nie mam pomysłu jak miałoby to wyglądać: jak wykorzystać brązowe paski, co zrobić z menu reklamowym, co umieścić w trzeciej szpalcie... Teoretycznie mogłabym określić wytyczne i zostawić wolną rękę w tej dziedzinie: bez pasków i menu reklamowego szablon też będzie wyglądał ok a w trzeciej można zawsze umieścić zakładki a jak ktoś będzie chciał więcej to sam zdecyduje co to ma być. Ale nie wiem czy warto, czy pomysł w takim kształcie ma sens i będzie użyteczny... A co wy o tym myślicie? Jak można wykorzystać szablon z którego właśnie zrezygnowałam na moim blogu?

Kolejny początek

Właśnie skończył się trzeci rok mojego szablonowego blogowania, dzisiaj zaczynam po raz czwarty nowy blogowy rok. Obiecałam sobie kiedyś pięć lat i postaram się tego trzymać. Z innych liczb to mogę podać, że na blogu liczba wpisów przekroczyła 200 a komentarzy 1000, statystyki bloksa pokazują ponad 200 tys odsłon ale wszystkie te liczby zostały przekroczone kilka miesięcy temu a ja sama w statystyki zaglądam tak rzadko, że już w zasadzie nie pamiętam jakie powinnam wnioski z nich wyciągać... Planując na nowo-zaczęty rok muszę uwzględnić pożegnanie ze starym typem bloksowych szablonów. Zmiana będzie dokonywać się sukcesywnie i mam nadzieję, że bez kłopotów dla użytkowników. Szablony na starym kodzie w dalszym ciągu będą pojawiać się na moim blogu. Mam kilka gotowych, które w końcu muszą się tu pojawić...

Nowy szablon

Czwarty rok blogowania postanowiłam zacząc z nowym szablonem, to mój trzeci projekt zrealizowany specjalnie dla tego bloga (pomysłów było dużo więcej ale o tym już kiedyś pisałam). Nowy szablon tak jak poprzednio nawiązuje do wcześnejszego: podobna kolorystyka i układ z główną szpaltą po lewej. Brązowe paskowane menu górne zastąpiłam częściowo brązowym paskowanym menu bocznym - jest nie tak samo a analogicznie. Zostawiłam reklamowe menu ale przesunęłam je z paska tytułowego niżej, usunęłam górną belkę, całości zamiast horyzontalnego nadałam wertykalny układ i dodałam opisy. Na razie pozostanie to menu reklamowe o podobnym do poprzedniego charakterze ale jak doświadczenie uczy nie ma się co spodziewac regularnych zmian w tym menu ale jest teraz bardzo uproszczone więc może coś w częstotliwości się zmieni a może nadam mu inny cel... się zobaczy.

Pewne zapowiedzi wyglądu nowego szablonu pojawiały się już na blogu. W miarę jak tworzyłam poszczególne elementy (a czasami to trwało zanim podjęłam ostateczną decyzję - najdłużej chyba projektowałam wyszukiwarkę i archiwum) ich zapowiedzi pojawiały się w nowych plikach wykorzystywanych na blogu.

Zrezygnowałam z trzeciej szpalty (no chyba, że ktoś uzna paski po lewej za szpaltę). Wróciłam do układu dwukolumnowego przede wszystkim dlatego że trzecia szpalta przestałą być mi potrzebna. Układ trzy kolumnowy nigdy nie był dla mnie celem sam w sobie. Uważałam że takie rozmieszczenie elementów jest korzystniejsze: najpierw były elementy a potem potrzeba ułożenia ich w trzy szpalty. Pewnie dlatego zawsze irytowało mnie gdy ktoś prosił mnie o zrobienie mu szablonu z trzema szpaltami nie mając pojęcia co chce umieścić w tej trzeciej kolumnie... W przypadku mojego pierwszego szablonu trzykolumnowego taki układ był fanaberią ale już np u Maćka Kuźmicza to miało cel i było przemyślane, czyli tak jak lubię. Najprawdopodobniej właśnie z tych powodów blog Darii Paprockiej, która początkowo myślała o trzech szpaltach skończył jako elegancki dwuszpaltowiec.

Pewnie jeszcze kilka drobnych zmian, poprawek zrobię ale nowy szablon jest gotowy.

Kolejny początek, kolejne podsumowanie...
Zazwyczaj takie spojrzenie wstecz robi się na koniec aby bez oglądania się na przeszłość zacząć nowy rok. Ja zarówno podsumowanie jak i nowe plany robię na początku. Chyba wierzę, że bez spojrzenia na to co było trudno jest określić co będzie, co mogłoby być.

Co było...

Aktualnie mam blisko 250 blogów z szablonami (nowy blox, łaskawie informuje mnie o tym w sposób bardzo bezpośredni). Pewna część tych blogów jest zamknięta i niedostępna dla zwiedzających. Staram się nie testować rozwiązań od razu na blogu z problemem, tak wiec gdy ktoś mnie prosi pomoc zakładam nowego bloga.

• Opublikowanych i ogólnodostępnych szablonów mam 147 czyli w tym roku przybyło 54 nowe szablony (w zeszłym roku to było 93 ale z tego 45 powstało specjalnie na urodziny czyli liczby nie różnią się aż tak bardzo)
• do tego dochodzi spora liczba szablonów dedykowanych i tych które zmieniałam na potrzeby konkretnych blogów (czasami to były drobne zmiany czasami całkiem poważne, trudno mi więc policzyć szablony dedykowane)
• porównując liczbę notek na blogu wyraźnie widać, że zwolniłam tempo; notek na blogu jest aktualnie 167 z czego 63 pochodzą z drugiego roku blogowania (ta liczy się już na rok trzeci); W dalszym ciągu jest to jednak więcej niż tygodni w roku więc nie ma się czy przejmować

Co będzie...

W zeszłym roku planowałam zdobywać widzę z dwóch dziedzin:

• html od podstaw i raczej szczegółowo
• zaawansowania edycja grafiki

Pochwalę się, że zamierzenia te rzeczywiście realizowałam; częściowo sama, częściowo korzystając z pomocy nauczycieli. Efekty nie są dokładnie takie jak sobie je wyobrażałam ale jestem z nich mimo wszystko bardzo zadowolona. To czego dowiedziałam się a ciągu minionego roku ułatwia mi robinie szablonów.

Plany na następny rok są jeszcze prostsze. Chcę dalej podążać ta samą drogą, to mnie ciekawi. Dodatkowo chciałabym poznać coś nowego i w tym momencienajoczywistszym wyborem wydaje mi się JavaScript.

Zobaczymy czy się uda. Życzcie mi powodzenia...

Wczoraj był lewostronny szablon ZERO, dzisiaj coś bardziej wypełnionego choć w dalszym ciągu projekt jest prosty. Na chwilę obecną to ten właśnie projekt uznałabym za uniwersalny i najlżejszy - mój prawie-ideał. Dodatkowo ma kilka fajnych rozwiązań. Poza zwyczajowym górnym menu dodałam też specjalne ikonkowe.

Szablon 04 dashed - niebieski,
na starym kodzie, dla blogów na blox.pl. -500px-

Szablon 05 dashed - zielony,
na starym kodzie, dla blogów na blox.pl. -500px-

Szablon 06 dashed - malinowy,
na starym kodzie, dla blogów na blox.pl. -500px-

Szablon pasuje na każdy blog. Wyraźne brązowe ikonki w prawym górnym to jego osobliwość ale pojawi się ona dopiero jak wpisze się do pola na kod html odpowiednie identyfikatory. Jeżeli nie odpowiadają Ci one to bez obaw, tylko RSS jest na stałe. Jeżeli zaś chcesz je to zapraszam do dalszej części notki, wszystko wyjaśnię.

Adres szablonu: http://04szablonkatemac.blox.pl

Link do natychmiastowego pobrania szablonu: skopiuj szablon

Adres szablonu: http://05szablonkatemac.blox.pl

Link do natychmiastowego pobrania szablonu: skopiuj szablon

Adres szablonu: http://06szablonkatemac.blox.pl

Link do natychmiastowego pobrania szablonu: skopiuj szablon

Uwagi o szablonie dashed:
niebieskim (04), zielonym (05), czerwonym (06)

szerokość szablonu		770px
szerokość części na notkę		510px
szerokość pobocznej szpalty		190px (+2×15px)
kolor tła	04 niebieski	jasne (#dddcd4)
	05 zielony	jasne (#deddc4)
	06 czerwony	jasne (#e9e5e0)
kolor tekstu		szary (#444)
kolor linków	04 niebieski	niebieski (#5769aa)
	05 zielony	niebieski (#669900)
	06 czerwony	szary (#ff0022)
pozostałe kolory		szary (#96968a), beżowy (#c1c0b5)
krój użyty w notce		Trebuchet MS i Georgia (w nagłówkach)
wielkość tekstu notki		small
interlinia w notce		wartość względna: 150%
maksymalna wielość elementów graficznych w notce		500px
css-owe ramki przy grafikach		brak
wypunktowanie/numerowanie		automatyczne
pogrubienie/kursywa		automatyczne
blok cytatu (blockquote)		przesunięcie i kursywa
nagłówki w notce (h1, h2, h3, h4, h5, h6)		automatyczne h3 - powiększenie, szeryfowy krój, brak pogrubienia
wyróżnienie akapitów		automatyczny odstęp
baza bloksowa		stary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki		zwijane archiwum, avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious, wklejka fotoforum na bloga
dodatkowe klasy i identyfikatory		#menuTop - specjalne menu (nie jest górne tylko wyświetla się w bocznej szpalcie) #uStopka - udawana stopka .boks i .tyt - dodatkowe kontenery w bocznej szpalcie #mMail, #mFejs, #mTwit - identyfikatory górnych ikonek

Szablon jest jasny i w gruncie rzeczy prosty. Jego głównym wyróżnikiem jest kolor linków a to bardzo łatwo zmienić. Owszem tło każdego z szablonów jest nieznacznie inne (czerwony ma najjaśniejsze a zielony najcieplejsze) ale poza tym jedyna różnica polega na kolorze linków więc wystarczy zdecydować się na nowy kolor odnośników, wprowadzić w szablonie drobną zmianę i po sprawie.

Ikonkowe górne menu

Najbardziej rzucające się w oczy jest ikonkowe menu w prawym górnym rogu. Nie jest ono w standardzie, to specjalny dodatek do tego szablonu. Ja zaprojektowałam cztery elementy: twitter, facebook, kontakt i rss. Rss jest w standardzie, wyjęłam go z kategorii i przeniosłam do góry więc pojawi się tam na każdym blogu korzystającym z tego szablonu. Pozostałe elementy są jednak jako opcje. Aby pojawiły się na blogu należy dodać odpowiedni kod html. W zasadzie może to być dowolny znacznik zawierający odpowiednią treść (czyli link) ale ja polecam te, które nie mają własnych właściwości czyli div bądź span.

Znacznikowi należy dodać opisany przeze mnie identyfikator a element pojawi się nad tytułem. Jako kontakt opisałam identyfikator mMail, facebookowi przypisałam mFejs a twitterowi mTwit. W znaczniku, który opiszemy tymi identyfikatorami należy umieścić link (czyli identyfikator nie powinien być przypisany bezpośrednio linkowi). Samą ilustrację przypisałam cesze tło (background), zawartość tekstową linku przesunęłam poza granice ekranu a pole linkujące powiększyłam.

Po tym przydługim opisie pora na część praktyczną. Kod wklejony w polu na dodatki powinien wyglądać mniej więcej tak:

Mam nadzieję, że powyższy zapis jest zrozumiały. Jasne fragmenty należy zastąpić własną treścią: adresem konta na twitterze, adresem fanpeage'a na facebooku i własnym adresem mailowym do kontaktu. Wpisując kod należy pamiętać o wszystkich znacznikach, nawiasach i cudzysłowach. Każdy znak, za wyjątkiem tych zaznaczonych na jasno powinien znaleźć się w kodzie w dokładnie takiej samej formie.

• Jak dodać obrazek obok tytułu bloga (na przykładzie szablonu ZERO)?
• Jak dodać obrazek w topie bloga?
• Jak dodać boks/dodatkowy element w bocznej szpalcie?
• Jak stworzyć treść dodatkowego menu?
• Jak zmienić kolor linków w szablonie dashed?

W tym roku świętuję bardzo skromnie - tylko sześć szablonów i zamiast tygodnia skromny weekend. Nawet szablony są skromne... Cel do jakiego od pewnego czasu dążę to bardzo lekki, bardzo jasny, bardzo minimalistyczny szablon. Szablon ZERO przeszedł moje oczekiwania, jest w najwyższym stopniu minimalistyczny: najminimalistyczniejszy.

Szablon 01 ZERO - jasnoszary,
na starym kodzie, dla blogów na blox.pl. -550px-

Szablon 02 ZERO - kolorowy,
na starym kodzie, dla blogów na blox.pl. -500px-

Szablon 03 ZERO - ciemny,
na starym kodzie, dla blogów na blox.pl. -550px-

Szablon proponuję blogom fotograficznym i chociaż miejsca w notce jest około 500px szerokości to dzięki umieszczeniu wąskiej szpalty po lewej i przyklejeniu bloga do lewej krawędzi przeglądarki, zdjęcia niemal każdej wielkości będą prezentowały się bez problemów.

O ile oczywiście może być więcej niż jeden początek. Wydaje mi się, że tak. W tym roku jednak nie startuję od zera. Mam za sobą kilka nienajgorszych liczb:

• 103 wpisy (ten jest 104)
• 106 ukończonych szablonów z czego 93 dostępne dla wszystkich.
  • 24 kolorowe
  • 24 tematyczne
  • 45 urodzinowych
  • 13 dedykowanych

Kolejny rok mimo iż o jeden dzień krótszy zamierzam zakończyć nie gorszym rezultatem choć liczby prawdopodobnie będą zupełnie inne.

Celem na pierwszy rok blogowania było nauczyć się robić szablony.

W związku z tym, że jest to niejako blog motywacyjny mający na celu prezentowanie moich postępów w zdobywaniu wiedzy i umiejętności na najbliższy rok wyznaczam sobie nowy cel a w zasadzie cele gdyż jeszcze nie wiem która ścieżka bardziej mnie wciągnie

1. Nauczyć się tworzyć strony a nie tylko opisywać ich wygląd
2. Nauczyć się robić sensowne grafiki, edytować zdjęcia itd.

Tyle na nowy początek.

Jeśli tylko macie dla mnie jakieś uwagi to wszystkie chętnie wysłucham.

PS. Wszystkim, którzy razem ze mną świętowali urodziny bloga za uwagę serdecznie dziękuję. Mam nadzieję, że także w zwykłym, codziennym funkcjonowaniu bloga odnajdziecie interesujące was rzeczy i zapraszam na kolejny rok szablonów kate mac.

W poprzednim wpisie zamieściłam kilka wskazówek jak uporządkować elementy w polu na kod html tak aby było łatwiej wyświetlić je jako trzecią szpaltę. Teraz przejdziemy do edycji CSS i przekształcimy jeden z szablonów w wersję xxx. Do tego celu posłuży nam szablon specjalnie w tym celu stworzony:

3X - podstawowy wersja bez x

Rozmiar bloga

Rozpoczynamy od określenia wielkości. Dotychczas blog miał szerokość 775px ale w związku z tym, ze chcemy dodać element wpływający na jego szerokość musimy bloga nieco powiększyć. Docelowa szerokość to 995px. Jest to szerokość, która zdecydowanej większości użytkowników pozwoli prawidłowo wyświetlać wygląd bloga. Według statystyk podanych na stronie ranking.pl niespełna 50% użytkowników korzysta z rozdzielczości ekranu 1024x768. Będzie to nasza docelowa najmniejsza rozdzielczość (drugie 50% używa większych rozdzielczości; użytkownicy 800x600 to nieco ponad 3%).

Szablon 3X - podstawowy wersja bez x (fajna nazwa ;) nieprawdaż?) powstał na bazie Spokojnego i kolejność elementów, którą tu dzisiaj będę opisywać dotyczy właśnie tego układu (wąska szpalta po prawej, tytuł bloga umieszczony ponad wąską i szeroką szpaltą)

Nową szerokość bloga podajemy przy selektorach

Pamiętaj, jeżeli box ma określone jakieś inne elementy wpływające na szerokość (margin, padding, border) to sumę ich wartości left i right musisz odjąć od docelowej wielkości

Miejsce na element TrzeciaSzpalta

W zależności od szablonu który przekształcasz miejsce to może się nieco różnić wielkością. W przypadku 3X - podstawowy wersja bez x zależało mi właśnie na takiej wielkości. Pozwoli ona na nadanie trzeciej szpalcie tej samej wielkości co wąskiej i pozostawi taki sam odstęp pomiędzy trzecią a szeroką jak szeroką a wąską.

Wiedząc ile możemy mieć miejsca przesuniemy o tyle szeroką szpaltę. W tym celu wykorzystam właściwość margin-left. Dotychczas ta cecha byłą określona jako 0px więc po prostu zmienię jej wartość na 220px. Jeżeli jednak w waszym szablonie szeroka szpalta ma lewy odstęp to zsumujcie liczby.

#BlogSzerokaSzpalta {
MARGIN: 0px 0px 0px 220px;
}

W tym momencie po zapisaniu zmian w waszym szablonie powinno pojawić się puste miejsce. Tam właśnie wypozycjonujemy nowy element.

Pozycjonowanie elementu TrzeciaSzpalta

Do wypozycjonowania elementu wykorzystamy właściwość position. Świetnie opisał ją e-maupa i stamtąd właśnie moja wiedza pochodzi. Wcześniej używałam nieco innej metody.Polecam cały wpis o pozycjonowaniu Podstawy layoutu CSS czesc I choć w zasadzie wykorzystamy to co opisał w ostatnim fragmencie Absolutnie/relatywnie

Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego.

Tym otaczającym elementem będzie oczywiście wspomniany już #BlogBodyBox. Wśród jego właściwości należy dopisać

position: relative;

Teraz każdy element zagnieżdżony w BlogBodyBox a pozycjonowany absolutnie nie wyjdzie poza ramy BlogBodyBox.

W zasadzie mój opis do tego momentu dotyczy także powstania przykładowo szablonu 3X - 03 podstawowy ostatnie komentarze. Teraz jednak przejdziemy do części w której potrzebuje kodu html który zbudowałam poprzednio.

Całości elementów które przenosimy daliśmy jeden znacznik o identyfikatorze TrzeciaSzpalta teraz właśnie wykorzystamy selektor #TrzeciaSzpalta. Będzie to element, który wypozycjonujemy absolutnie. Poza cechą position musimy jeszcze określić jej położenie, dysponujemy właściwościami: top, right, bottm, left. Z oczywistych względów wykorzystamy top i left.

#TrzeciaSzpalta {
width: 190px;
position: absolute;
top:0px;
left:0px;
}

Umieściło to naszą trzecią szpaltę w oczekiwanym miejscu. Teraz pozostaje nam jedynie opisać wygląd nowego elementu. Zaplanowałąm wyglad trzeciej szpalty jako analogiczny do wyglądu wąskiej a więc musiałam określić wyrównanie tekstu, kolory linków, wygląd listy wypunktowanej i wyglad tytułów który nadałam klasę tyt. Fragment CSS dotyczący tych elementów możesz zobaczyć tutaj»

W zależności od tego co umieści się w elemencie TrzeciaSzpalta trzeba będzie to opisać w CSS. W poprzednim wpisie podałam kilka przykładów. Efekt finalny wygląda tak:

3X - 04 podstawowy trzecia szpalta

zapraszam do skorzystania