O szablonach, ich projektowaniu i moich z tym zmaganiach...

Wpisy z tagiem: urodziny bloga

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

sobota, 07 sierpnia 2010

trzecie urodziny szablonykatemacDwa 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
kubrick 06 czerwona Georgia


Kubrick 07
kubrick 07 kolisty Trebuchet MS


Kubrick 08
kubrick 08 malarski Arial


Kubrick 09
kubrick 09 niebieski Times


Kubrick 10
kubrick 10 nocna Verdana

środa, 28 lipca 2010

3 urodzny szablonykatemacTym 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

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

przykładowy baner szablonyaktemac

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.

poniedziałek, 27 lipca 2009

Kolejny początek, kolejne podsumowanie...
2 urodziny szablony kate_mac 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...

niedziela, 26 lipca 2009

2 urodziny szablony kate_macWczoraj 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 4
Szablon 04 dashed - niebieski,
na starym kodzie, dla blogów na blox.pl. -500px-


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


szablon 6
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, nic nie 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

fragmenty

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

fragmenty

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

fragmenty

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: 0Ethemestary 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

#menuIkon - górne menu z małymi obrazkami

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

@ftrssnewsletterNajbardziej rzucające się w oczy jest ikonkowe menu w prawym górnym rogu. Nie jest ono w standardzie, to specjalny dodatek do tego szablonu. Szablon był już kilkukrotnie poprawiany i choć jego wygląd zasadniczo się nie zmieniał to w obrębie tych ikonek zaszły drobne zmiany. Aktualnie, w pobieranych szablonach dashed jest pięć elementów: twitter, facebook, kontakt, rss i newsletter. Wszystkie ikonki to tylko opcje. Aby pojawiły się na blogu należy dodać odpowiedni kod html.

Kod podzieliłam na dwie części (położenie i wygląd) dzięki czemu jeżeli nie chcesz takich ikon możesz poszukać sobie innych i tylko obejmując kod swoich ikon divem o identyfikatorze menuIkon sprawisz, że znajdzie się nad tytułem.

Położenie

Planuję zrobić tak, że w każdym szablonie, w którym umieszczę takie ikony ten konkretny identyfikator (menuIkon) będzie odpowiedzialny za położenie ikon. Div z takim identyfikatorem sprawia, że dowolna zawartość zmienia swoje położenie.

Wygląd ikon

Możesz skorzystać z własnych ikon, mogą linkować one do dowolnego miejsca. Wystarczy, że do zasobów bloga dodasz własne obrazki i w polu na kod HTML, w ramach identyfikatora określającego położenie (tego wspomnianego wyżej) wpiszesz ich kod (prosty kod linkującego obrazku).

Możesz też skorzystać z moich ikon, skopiowały się razem z szablonem. Tym razem zrobiłam tylko pięć: kontakt, facebook, twitter, rss i newsletter. Jeżeli css nie jest dla ciebie czarną magią to przygotowałam też pustą ikonkę - możesz zrobić własne obrazki. W arkuszu trzeba te własne dodatkowe ikonki opisać analogicznie do tych istniejących więc wystarczy bardzo elementarna wiedza o CSS.

Jeżeli jednak wystarczy ci te pięć które już przygotowałam to ich dodanie jest banalnie proste. Kolejność jest zupełnie dowolna i zależna od ciebie. Liczba także więc jeżeli chcesz tylko kontakt i facebooka to nie ma najmniejszego problemu. Kody wybranych ikonek wstaw w ramach divu o identyfikatorze menuIkon (czyli wklej je tam gdzie pisze dowolna zawartości. Oczywiście w kodach ikonek wpisz własne adresy.

mMail kod dla kontaktu

Ikonka kontaktu - identyfikator mMail. Polecam adres mailowy ale w gruncie rzeczy jakakolwiek możliwości zostawienia wiadomości dla właściciela bloga będzie mile widziana. Jeżeli nie chcesz udostępniać swojego adresu mailowego to może wpisz tutaj adres strony w serwisie z którego często korzystasz. Jeżeli chodzi o adres mailowy to polecam stworzenie strony kontaktowej (jako jednej ze stron statycznych na blogu) i tam umieszczenie adresu wraz z zasadami kontaktu.

Istnieje też możliwość wpisania polecenia automatycznego otwierania systemu pocztowego użytkownika. Wtedy po kliknięciu w link użytkownik będzie mógł od razu przejść do pisania maila. W takim przypadku zamiast adresu zaczynającego się od protokołu http:// należy wpisać polecenie mailto:adres@mailowy - gdzie oczywiście zamiast adres@mailowy wpisujesz wybrany przez siebie adres. Pamiętaj że pomiędzy mailto, dwukropkiem a adresem nie ma żadnej spacji.

mFejs kod dla facebookowego fanpege'u

Ikonka facebookowego fanpege'u - identyfikator mFejs. Facebook to jeden z najpopularniejszych serwisów społecznościowych. Wcale nie trzeba być jego wielkim miłośnikiem aby móc wykorzystać jego możliwości. Fanpage na facebooku może ułatwić też komunikację z czytelnikami. Najczęściej jednak służy do promowania bloga i wpisów na nim umieszczonych.

mTwit kod dla twittera

Ikonka mikrobloga w serwisie twitter - identyfikator mTwit. Twitter to serwis społecznościowy oferujący możliwość mikroblogowania (140 znaków) i śledzenia wpisów ciekawych osób. Serwis można wykorzystać zarówno do promowania własnych wpisów jak i do utrzymywania kontaktu z czytelnikami.

mRSS kod dla kanału RSS

Ikonka subskrypcji RSS - identyfikator mRSS. Kanał RSS jest dostępny na każdym bloksie. Normalnie link do RSS wpisów wyświetlany jest w starym kodzie obok kategorii i stamtąd można go skopiować. Jeżeli menu ikon ma zawierać odnośniki do opcji subskrypcji to RSS będzie tu najlepiej pasował.

Jeżeli zdecydujesz się na adres RSS wszystkich wpisów to możesz ukryć tek, który wyświetla się obok kategorii:

#BlogRss {display:none;}

mNews kod dla newslettera

Ikonka newslettera - identyfikator mNews. Oczywiście adres służący do zapisywania się na newsletter to nie będzie blox.pl Aby poznać adres newslettera trzeba go najpierw włączyć w edycji bloga w części:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Włączyć newslettery na blogu? - Link

Na starym kodzie działa tylko opcja link albo nie. Po włączeniu funkcji można przejść na bloga i na końcu kolumny z treścią poboczną znajdzie się opcja zapisania się na newsletter. Wystarczy skopiować adres znajdującego się tam linku i wstawić go w odpowiednim miejscu w kodzie HTML.


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.


sobota, 25 lipca 2009

2 urodziny szablony kate_macW 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 1
Szablon 01 ZERO - jasnoszary,
na starym kodzie, dla blogów na blox.pl. -550px-


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


szablon 3
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.

niedziela, 27 lipca 2008

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.

Urodziny_szablony_kate_mac

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.

sobota, 26 lipca 2008

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
podstawowy szablon na bloga blox

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

  • #BlogGlownyBox
  • A także warunkowo jeżeli selektory te miały wcześniej określoną szerokość, jeżeli nie to nie ma potrzeby niczego zmieniać, dopasują się automatycznie:
    #BlogTytulBox – jeżeli korzystasz z szablonu który tytuł bloga umieszcza na całej jego szerokości
    #NadTytul
    #Stopka
    #BlogBodyBox  - to w elemencie o tym identyfikatorze pojawiają się wszelkie dodatki

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

Docelowa szerokość bloga – aktualna szerokość bloga = miejsce na trzecią szpaltę
995px-775px=220px

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
trzyszpaltowiec

zapraszam do skorzystania

Urodziny_szablony_kate_mac

Liczba elementów bloksowych jest z góry określona. Mamy tytuł bloga, notki i boczną szpaltę, każdą z tych rzeczy edytujesz i zmieniasz jej zawartość w nieco innym miejscu. Każdą z tych rzeczy możesz wykorzystać na swój własny sposób i do wybranego przez siebie celu. Potrzeba tylko choć odrobinę pomyśleć nieszablonowo. Najwięcej możliwości oczywiście dają notki ale drugim takim fajnym miejsce są pola na dodatki: jedno wyświetla się tylko na stronach z pojedynczą notką ale to drugie, to podstawowe pole na dodatkowy kod HTML wyświetla się na blogu zawsze co daje bardzo wiele różnych możliwości. Na przykład stworzenia własnego zestawu elementów w wąskiej kolumnie.

W zasadzie mniej istotne jest to co potem z tym zestawem elementów zostanie zrobione ale głównym powodem do napisania tego wpisu była tzw. trzecia szpalta. Można ją zrobić na kilka sposobów i może zawierać różne elementy więc nie ma jednej uniwersalnej rady ale jeżeli chcesz aby ta trzecia kolumna zawierała rzeczy, które nie są w bloksowym standardzie (dodatki wklejone przez pole na kod HTML) to w zasadzie musisz zacząć od odpowiedniego przygotowania kodu tych dodatków.

element dodatkowy #Trzecia

Szablony z trzecią szpaltą podzieliłam wg. kilku cech (zobacz w chmurce tagów pod hasłem trzecia). Jedyne szablony dla których ta notka nie jest potrzebna do wizualnego powstania trzeciej kolumny to szablony z samoistną trzecią szpaltą (bo przesunięta do trzeciej kolumny jest cała bloksowa wąska szpalta albo wybrana jej część). Nie znaczy to jednak, że ta notka i przy tych szablonach się nie przyda.

 

Tworzenie dodatkowego elementu Trzecia

Samo stworzenie tego elementu jest banalnie wprost proste. Wybieramy te elementy które mają się znaleźć w takim specjalnym kontenerze i obejmujemy je divem o unikalnym identyfikatorze. Ja wybrałam Trzecia (choć nie zawsze zawartość tego elementu wyświetla się w trzeciej kolumnie, to już kwestia CSS). Jeżeli korzystasz z jednego z moich szablonów na starym kodzie to proponuję wybrać tą sama nazwę dla identyfikatora. Jeżeli jednak chcesz dodać trzecią kolumnę do własnego szablonu (którego ja nie robiłam) to nie ma to większego znaczenia, równie dobrze może to być zosia, C-3PO czy TrzeciaKolumnaZeSpisemTresci. Pamiętaj tylko, że każda literka ma znaczenie, jeżeli piszesz dużą to potem w CSS pamiętaj o tym, nie używaj spacji i nie używaj polskich znaków.

O co chodzi z tym obejmowaniem divem o identyfikatorze? Bardzo prosta sprawa. Na początku kodu wpisujesz , następnie przechodzisz na koniec kodu i wklejasz tam znacznik zamykający . I po sprawie. Oba są niezbędne, wszystko co zostało otwarte powinno zostać zamknięte.

identyfikator trzeciej szpalty

zobacz przykładowy kod w wersji tekstowej »

Podpowiedź dla zielonych jak szczypiorek na wiosnę: Jeżeli niepewnie czujesz się z wprowadzaniem zmian w kodzie i boisz się, że popełnisz błąd to umieść w elemencie Trzecia wszystkie dodatki, całą zawartość pola na kod HTML. Czyli w polu na dodatki wklej znacznik otwierający na początku kodu a zamykający na końcu nie przejmując się zawartością.

na początek pola

na koniec pola

Koniec. Trzecia szpalta zrobiona.


Podstawowe uwagi o HTML

  1. Tagi HTML umieszczamy zawsze w ostrych nawiasach
  2. Każdy element musi mieć opisany osobno zarówno początek jak i koniec. Zamykający element różni się od otwierającego tym, że poprzedzony jest ukośnikiem.
    Otwarcie: <div id="Trzecia">
    Zamknięcie: </div>
    (jest kilka wyjątków od tej reguły ale są one nieliczne i łatwo je zapamiętać - <img />, <hr />, <br />)
  3. Nie mieszaj znaczników. Elementy mogą się w sobie zawierać ale pamiętaj o kolejności (zamykasz w odwrotnej kolejności do otwierania: abc – cba).

Te trzy uwagi na początek wystarczą. Można zacząć grzebać w kodzie. Jeżeli po zapisaniu zmian okaże się, że strona się sypie to na 90% jedna z powyższych trzech zasad została złamana.

Co można dodać w HTML

Wszystko co planujesz umieścić w trzeciej kolumnie musi się znaleźć w przestrzeni pomiędzy otwarciem a zamknięciem znacznika o identyfikatorze Trzecia. Polecam kategorię: pomocnik do tworzenia dodatkowego kodu na blox.pl, znajdują się tam notki wyjaśniające co dodawać i jak to działa. W skrócie najprzydatniejsze elementy to:

  • tekst umieszczaj w znacznikach akapitu <p>Przykładowy tekst</p>
    • akapity najczęściej oddzielone są zwiększonym pionowym odstępem co może być przydatne w wizualnym porządkowaniu treści
  • jeżeli nie chcesz kończyć akapitu a jedynie przejść do następnej linijki to używaj znacznika złamania wiersza <br /> – to jest przykład znacznika składającego się tylko z jednej części; 

Przykład wykorzystujący oba znaczniki:

<p>Przykładowy tekst<br />
Drugi wiersz tekstu<br />
Trzeci wiesz i koniec akapitu</p>

  • Innym przykładem wyjątku od reguły zamykania znaczników jest znacznik obrazu
    <img src="http://adres-obrazu.jpg" alt="nazwa alternatywna" />
  • Aby umieścić aktywny odnośnik musisz skorzystać ze znacznika linku
    <a href="http://adres-linku">linkujące słowo</a>

Linkiem nie musi być tylko słowo, linkować może obrazek wtedy zapiszesz to tak:

<a href="http://adres-linku.pl"><img src="adres-grafiki.jpg" alt="opis" /></a>

  • Istnieją specjalne tagi tworzące listy, bardzo przydatne gdy chcesz np. zrobić spis treści. Najbardziej przydatna wydaje się lista nieuporządkowana (czyli wypunktowana choć najczęściej samo wypunktowanie ukrywam w wąskich kolumnach). Listę linków tworzymy przy pomocy polecenia <ul> </ul>. W ramach listy znajdą się poszczególne punkty wykazu czyli nasze elementy z linkami, które wprowadzamy za pomocą polecenia <li> </li>. Należy pamiętać o zagnieżdżeniu w pojedynczym punkcie listy znacznika linku.

Przykładowo:

<ul>
<li><a href="http://adres.pl">linkujące słowo</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>

To są najprostsze, najczęściej używane znaczniki. Po bardziej szczegółowe informacje o znacznikach i dodawaniu im różnych atrybutów zapraszam do kategorii pomocnik HTML.

W zasadzie mogłabym już na tym zakończyć bo element istnieje, ma nazwę i można go pozycjonować w CSS. Sam wiesz najlepiej co znajdzie się w twojej trzeciej szpalcie. Ze względu jednak na estetykę podam jeszcze kilka przykładowych klas, które ja opisuję w swoich szablonach na wzór bloksowych elementów z wąskiej szpalty.

Specjalne klasy dla dodatkowych boksów

W moich szablonach często opisuję dodatkowe rzeczy. Często są to własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga. Takim czymś jest właśnie element o identyfikatorze Trzecia. Są też zupełnie niezależne od niego uStopka czy menuTop. To są jednak elementy, które mogą się pojawić na stronie tylko raz bo używam ich do przeniesienia części kodu w inne miejsce na blogu.

W szablonach jednak dodaje kilka stylów, które można wykorzystywać wielokrotnie, niczego nie przenoszą w jakieś dziwne inne miejsce tylko edytują wygląd danego elementu: a to dodają podkreślenie, a to zwiększają odstęp pomiędzy elementami, zmieniają kolor etykiety tytułowej, etc. Takie style wielokrotnego użytku dodaje się poprzez przypisanie elementowi określonej klasy.

  • Przede wszystkim pojedynczy zbiór elementów ujmuję w divy o klasach boks:
    <div class"boks">Zawartość pojedynczego kontenera</div>
    Taki kontener to coś analogicznego jak element z linkami do dziesięciu ostatnich notek czy pojedynczy folder z linkami, tylko tutaj samodzielnie decydujesz o treści.
  • Aby upodobnić nową szpaltę do istniejącej wąskiej tworzę klasę dla tytułów:
    <div class="tyt">Przykładowy tytuł</div>

Wykorzystując te specjalnie stworzone w moich szablonach klasy i zwyczajne znaczniki HTML można przykładowo stworzyć listę spisu treści:

<div class="boks">
<div class="tyt">
Spis treści</div>
<ul>
<li><a href="http://adres.pl">pierwszy element</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>
</div>


To są wszystko dodatki. Nie są one niezbędną częścią trzeciej szpalty, to co sobie do niej wstawisz to twoja sprawa. Powyższe informacje mają ci jedynie pomóc podjąć decyzję i ewentualnie uporządkować elementy. Jeżeli sobie zupełnie z tym nie radzisz to polecam szablony z samoistna trzecią szpaltą (należą do nich m.in. te z przeniesionymi zakładkami).

Ta notka opisuje tylko podstawy tworzenia własnej zawartości trzeciej kolumny o ustawianiu jej we właściwym miejscu polecam przede wszystkim CSSowe notki z tagów: trzecia bezwzględnie położona i trzecia pływająca. To są dwa podstawowe sposoby umiejscawiania stworzonej dzisiaj treści jako trzeciej kolumny. Zasadniczo nie różnią się wyglądem: pierwszy jest bardziej na chama więc może tworzyć problemy ale pozwala przenieść element w zupełnie dowolne miejsce, drugi jest bardziej naturalny i idealnie współgra z resztą bloga.


piątek, 25 lipca 2008

Kilka dni temu zaprezentowałam nieco zmienione wersje trzech standardowych szablonów: Kubicka, Rin, i Connections. Podstawową zmiana dokonaną w tamtych szablonach była wymiana grafiki w nagłówku. W zdecydowanej większości wyszło mi to raczej przeciętnie. Chyba przywykłam już do większej ingerencji w CSS i wymiana koloru i topu jest jak zatrzymanie się w połowie drogi. Bardzo kusiło mnie aby choć trochę więcej pogrzebać sobie w CSS.

Uaktualnienie: w 2012 roku zmieniałam niemal wszystkie szablony, niektóre dostały nowe topy ale wszystkie otrzymały poprawiony kod CSS więc także wyżej wspomniane Connections i reszta zostały znacznie zmienione (choć niekoniecznie wizualnie).

Dużo bardziej niż szukanie ilustracji do nagłówków i dopasowywanie ich do szablonu odpowiada mi działanie odwrotne: dopasowywanie elementów szablonu do charakteru nagłówka, którego autorem niekoniecznie jestem ja. Oto 10 szablonów stworzonych przy wykorzystaniu nagłówków wykonanych dla Smashing Magazine i dostępnych free. Szablony są dostosowane do niektórych skryptów, dokładniejsze informacje znajdują się w nowszych notkach na temat poszczególnych szablonów.

Urodziny_szablony_kate_mac


autor nagłówka: Nathaniel Heller

top 01 - Lucifix

Szablon top 01 - Lucifix, kolorowy,
na starym kodzie, dla blogów na blox.pl. -500px- 

wygląd poprzedniej wersji szablonu (The Magic Box)


autor nagłówka: Betsy Chang

top 02 - Betsyness

Szablon top 02 - Betsyness, nastrojowy,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (Betsyness)


autor nagłówka: João Filipe Cunha

top 03 - Kultivating

Szablon top 03 - Kultivating, naturalny,
na starym kodzie, dla blogów na blox.pl. -530px- 

wygląd poprzedniej wersji szablonu (Kultivating)


autor nagłówka: Daniela Mincheva

top 04 - Inspiration

Szablon top 04 - Inspiration, pomarańczowy,
na starym kodzie, dla blogów na blox.pl. -565px- 

wygląd poprzedniej wersji szablonu (Inspiration)


autor nagłówka: Nate Legaspi

top 05 - Ephemeral

Szablon top 05 - Ephemeral, trzykolumnowy,
na starym kodzie, dla blogów na blox.pl. -450px- 

wygląd poprzedniej wersji szablonu (Flowers)


autor nagłówka: Wirdy Hamidy

top 06 - This Is How It Feels

Szablon top 06 - This Is How It Feels,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (This Is How It Feels)


autor nagłówka: Jimmy R.

top 07 - New Tech Earth

Szablon top 07 - New Tech Earth, ciemny,
na starym kodzie, dla blogów na blox.pl. -510px- 

wygląd poprzedniej wersji szablonu (New Tech Earth)


autor nagłówka: María

top 08 - Drawing Hands

Szablon top 08 - Drawing Hands, czerwony,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (Drawing Hands)


autor nagłówka: María

top 09 - cups of tea

Szablon top 09 - cups of tea, elastyczny,
na starym kodzie, dla blogów na blox.pl. -560px- 

wygląd poprzedniej wersji szablonu (Cups Of Tea)


autor nagłówka: Robert Winkler

top 10 - Typography

Szablon top 10 - Typography, elastyczny,
na starym kodzie, dla blogów na blox.pl. -500px- 

wygląd poprzedniej wersji szablonu (City Under Heat)


Wszystkie szablony są dostępne i gotowe do użycia. W czerwcu 2012 publikuję szczegółowe notki na temat każdego z szablonów więc linki do nich pojawią się tutaj jak tylko notki zyskają status opublikowanych.

 
1 , 2
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...