O szablonach, ich projektowaniu i moich z tym zmaganiach...
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.

czwartek, 24 lipca 2008

Poprzednio pokazałam szablon stworzony wyłącznie dla idei trzech kolumn a także szablon w którym zakładki są dzięki trzeciej szpalcie wyświetlane wyżej. W tym wpisie dochodzimy do momentu kiedy standardowa zawartość bloxa nam nie wystarcza.

Aby dodać jakiś element do strony bloga należy wpisać go w pole na kod html. W ten sposób do standardowej zawartości naszego bloxa dodamy dodatkowy element który nie jest opisany w standardowym CSS. W związku z tym że element ten i tak będzie wymagał opisanie a więc równie dobrze można go opisać jako element wizualnej trzeciej szpalty. Do eksperymentu wybrałam skrypt Szymona prezentujący ostatnie komentarze.

Urodziny_szablony_kate_mac

Trzecia szpalta z OSTATNIMI KOMENTARZAMI

Umieszczenie ostatnich komentarzy w trzeciej szpalcie jest najprostszą z prezentowanych dzisiaj propozycji na trzecią szpaltę.

Ponownie przypomnę, że wizualne umieszczenie elementu na lewo od szerokiej szpalty nie znaczy, że on się tam rzeczywiście znajduje. Kolejność elementów ustalona jest w htlm i jest dokładnie taka sama jak była przed zabawą CSSem. Skrypt prezentujący ostatnie komentarze wywoływany jest po wąskiej szpalcie (nie 'w'; elementy dodawane  polu na kod html wyświetlają się w elemencie który w CSS opisany jest identyfikatorem #BlogBodyBox).

Aby umieścić ostatnie komentarze na lewo do szerokiej szpalty należało najpierw wygospodarować tam wizualnie pustą przestrzeń. Następny krok był podobny do tego w szablonie z zakładkami – wypozycjonowałam Ostatnie komentarze absolutnie w ramach elementu BlogBodyBox wypozycjonowanego relatywnie. I gotowe. Teraz wystarczy opisać wygląd ostatnich komentarzy. Ja starałam się aby wyglądały podobnie do elementów wąskiej szpalty.

Szablon został dostosowany do skryptów:

Należy pamiętać, że ostatnie komentarze wyświetlanie w ten sposób nie powinny być 'dłuższe' niż pozostałe elementy bloga.

szablon na bloga w trzech kolumnach
3X - 03 podstawowy - ostatnie komentarze
(przed skorzystaniem przeczytaj zasady)

Szablon ten wyświetla się w trzech kolumnach tylko dzięki pewnym możliwościom jakie daje CSS (czyli opis wyglądu). Czy jest on trzyszpaltowcem?

Poprzedni trzyszpaltowiec w żadnym razie nie był żartem. W szablonie 3X – kategorie stworzyłam wizualnie trzy kolumny przez co osiągnęłam cel – szablon 3X

Rozumiem jednak, że takie rozwiązanie niewielu osobom się przyda i sensu nie ma za wiele. Dlatego też kolejny 3X zrobiłam przenosząc inny element z bloksowego standardu.

Urodziny_szablony_kate_mac

trzecia szpalta z ZAKŁADKAMI

Umieszczenie zakładek nie w wąskiej szpalcie po prawej ale przeniesienie ich na lewo nie sprawiło mi większych trudności (w przeciwieństwie do przeniesienia kategorii). Powodem jest przede wszystkim fakt iż takie rozwiązanie już stosowałam w szablonie Radioblox, choć tam wykorzystałam w tym celu inne właściwości CSS.

Przeniesienie zakładek wymaga przede wszystkim wygospodarowania przestrzeni na nie w odpowiednim miejscu. Po drugie należy je wypozycjonować absolutnie (niejako 'wyjąć' z konstrukcji bloga i przykleić jak żółtą karteczkę na wierzchu w innym miejscu). Trzeba jednak pamiętać iż w rzeczywistości zakładki są dokładnie tam gdzie były czyli jako ostatni element wąskiej szpalty, zmienił się jedynie sposób ich wyświetlania.

Szablon ten także jest trzyszpaltową wersją szablonu podstawowego (29 beżowy, 30beżowy, trzeci handmade, 3X - 01 – kategorie). W odniesieniu do pierwszego (29 beżowy) zrobionego już jakiś czas temu zmieniłam w tym szablon bazowy (html) i proporcje pomiędzy poszczególnymi elementami (co wymagało zmiany plików z grafikami tła).

Szablon został dostosowany do skryptów:

Należy pamiętać, że zakładki wyświetlanie w ten sposób nie powinny być 'dłuższe' niż pozostałe elementy bloga.

szablon na bloga w trzech kolumnach
3X - 02 podstawowy - zakładki
(przed skorzystaniem przeczytaj zasady)

W tym szablonie wąska szpalta rozbita została wizualnie na dwie kolumny. Czy jest on trzyszpaltowcem?

Domaganie się trzeciej szpalty tylko dla samego pomysłu jest dla mnie zupełnie niezrozumiałe. Układ bloga w trzech kolumnach nie jest celem lecz jedynie środkiem do celu. Zadając więc pytanie: jak uzyskać złudzenie bloga trzyszpaltowego? trzeba określić co się chce mieć w tej trzeciej szpalcie.

Urodziny_szablony_kate_mac

Trzecia szpalta z KATEGORIAMI

Umieszczenie kategorii nie w szerokiej szpalcie nad wpisami ale obok nich było jednym z pomysłów które dawno chciałam wypróbować. Pomysł dość specyficzny i teoretycznie dający sporo dalszych możliwości przetwarzania wyglądu bloga. Niestety umiejscowienie kategorii w ten właśnie sposobów jest inaczej wyświetlane w zależności od przeglądarki z której korzystamy. Różnice nie są znaczne i nie powodują, żadnych kłopotów jednak przez niejednolitość wyglądu trudniej zaplanować dalsze przetworzenia pomysłu.

Szablon jest nieco bardziej zaawansowana wariacja na temat wyglądu szablonu podstawowego (29 beżowy, 30 beżowy, trzeci ręczny). Kolory są niezmienione ('szpalta' z kategoriami otrzymała kolorystykę wąskiej szpalty). Zmieniły się natomiast proporcje bloga co spowodowało konieczność wymiany grafiki w tle.

Szablon jest dostosowany do następujących skryptów:

szablon na bloga w trzech kolumnach
3X 01 podstawowy - kategorie
(przed skorzystaniem przeczytaj zasady)

W tym szablonie elementy są wizualnie rozmieszczone w trzech kolumnach. Czy jest on trzyszpaltowcem?

środa, 23 lipca 2008

Różowo-brązowy szablon z filiżanką kawy obecny jest na tym blogu od października. Zrobiłam go tylko i wyłącznie pod siebie, biorąc pod uwagę własny gust, zwyczaje i wymagania. Od początku planowałam mieć zwinięte archiwum a więc nie było sensu opisywać kalendarza. Zabawne jest to, że o ile nowości i zmiany dość szybko wprowadzałam w udostępnionych szablonach o tyle swój własny pozostawiałam przeważnie bez zmian, ewentualnie stosując rozwiązania mocno prowizoryczne. Dlatego też gdy zdecydowałam się udostępnić także „swój” szablon wymagał on znacznie więcej pracy niż tylko zmiana kolorów czy grafiki w nagłówku.

Urodziny_szablony_kate_mac

Być jak szablony kate mac czyli oddam szablon w dobre ręce

Z oczywistych względów nie zdecydowałam się udostępnić dokładnie tej samej wersji szablonu jaką stworzyłam dla swojego bloga. Udostępniam za to pięć różnych wersji tego wyglądu. Wszystkie są dostosowane do skryptów: ostatnie komentarze (z testblog), zwijane zakładki (z experymenty informatyczne), awatary z MyBlogLog.com w komentarzach (z pioornik)

szablon na bloga z filiżanka kawy - niebieski

TURKUSOWA FILIŻANKA*

jasny szablon z filiżanką z turkusowym spodkiem; linki niebieskie
bordowy szablon z kawą

OZDOBNA FILIŻANKA

szablon z jasnym tłem i ciemnym topem, w nagłówku delikatna, ozdobna filiżanka; linki czerwone
czarny szablon na bloga

BIAŁY KUBEK

ciemny szablon z białym kubkiem w nagłówku; linki żółte
granatowy szablon na bloga

GRANATOWA FILIŻANKA

jasny szablon z filiżanka ozdobioną granatowym kolorem; linki granatowe
jasny szablon na bloga

FILIŻANKA Z ŁYŻECZKĄ

szablon z jasnym tłem, w nagłówku elegancka filiżanka na tle jasnego drewna; linki zielone

* Z powodu ciągłych zmian na blogu i w szablonach grafika prezentująca projekt może się znacznie różnić od tego co znajdziesz po przejściu do szablonu. Mam nadzieję, że zmiany są jednak na korzyść.

wtorek, 22 lipca 2008

Urodziny szablony kate_macConnections to ciekawy szablon. Kiedyś go używałam i początkowo większość szablonów robiłam właśnie „na nim”. Przerabiając Connections postanowiłam zachować kremowe ramki i wymienić tyko elementy zielonkawe i brązowe. Mimo to zmian w szablonie było sporo. Bloksowy Connections ma określone kolory w wielu miejscach. Na początku 2012 roku uaktualniałam szablony i notki i postanowiłam kod szablonów zupełnie pozmieniać, tak aby było po mojemu.


szablon connections 1
Szablon connections 1 - Beretta,
na starym kodzie, dla blogów na blox.pl. -500px-


szablon connections 2
Szablon connections 2 - Berry,
na starym kodzie, dla blogów na blox.pl. -500px-


szablon connections 3
Szablon connections 3 - Biblioteka,
na starym kodzie, dla blogów na blox.pl. -500px-


Od 2008 w tej notce było pięć szablonów jednak w 2012 zmieniłam im nie tylko kod ale i wygląd więc postanowiłam zostawić tutaj tylko trzy, bo faktycznie cała seria wywodzi się z tych właśnie pierwszych urodzin. Resztę dodam we wpisach w 2012.

Stare Connections też są dostępne choć nie zamierzam już za nie odpowiadać.

Adres szablonu: http://connections01szablonkatemac.blox.pl

fragmenty

Adres szablonu: http://connections02szablonkatemac.blox.pl

fragmenty

Adres szablonu: http://connections03szablonkatemac.blox.pl

fragmenty

Uwagi o szablonie Connections:
Beretta (1), Berry (2), Biblioteka (3)
szerokość szablonu 747px
szerokość części na notkę 510px
szerokość pobocznej szpalty 195px (2×5px)
kolor tła jasne (#fff)
kolor tekstu ciemne (#333)
kolor linków c1 Pistolet granatowy (MidnightBlue)
c2 Berry czerwonawy (#c3512d)
c3 Biblioteka brązowy (#614413)
pozostałe kolory c1 Pistolet jasno brązowy (#6d5f54)
c2 Berry zielony (#598527), zielony (#8dc63f)
c3 Biblioteka brązowy (#8c6e3a)
krój użyty w notce Georgia
wielkość tekstu notki 0.9em z medium (około 14px)
interlinia w notce wartość względna: 1.6em
maksymalna wielość elementów graficznych w notce 500px
css-owe ramki przy grafikach tak
 background:#f9f3ec;
 border:#dfdad6 1px solid;
 padding:4px;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, kursywa, ramka, wcięcie akapitowe, ozdobny ornament
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 2themeDstary kod: 2themeD Connections
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 - górne menu (w układzie poziomym)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Wybrane topy to raczej kwestia przypadku ale starałam się aby pasowały do różnych tematów.

  • W pierwszym szablonie umieściłam zdjęcie Beretty jest jednak ono tak fragmentaryczne, że nie narzuca tematu. Kolorystyka jest neutralna: beże z dodatkiem atramentowego granatu.
  • Drugi Connections ma w topie rysunek rośliny, jest to mącznica. Jej owoce są jadalne, mają cierpko-kwaśny smak. Roślinę wykorzystywać można zarówno jako ozdobę w ogrodzie jak i w zielarstwie. Dawniej używano jej nawet w garbarstwie. Bardziej ogólne jako roślina z jagódkami idealnie będzie też pasować na blogi kulinarne.
  • Trzeci szablon jest bardzo brązowy. W winiecie jest zdjęcie półek w staroświeckiej eleganckiej bibliotece. Szablon pasować więc będzie zarówno na blogi literackie, recenzenckie, jaki na naukowe czy polityczne (konserwatywne).

Każdy z tych szablonów może mieć inny top, wg twojego uznania. Ja zrobiłam swoje na wzór oryginalnego Connections a więc z paskiem na menu. Górne menu dodawane jest osobno i ma w arkuszu określone tło więc nawet jeżeli zmienisz je w grafice a używasz tego menu to pamiętaj o zmianie numeru koloru także w CSS.

Zdjęcie w topie można bardzo łatwo wymienić. Zasada jest zawsze ta sama. Można też spróbować po swojemu, już zrobiłam stronę o selektorach opisujących tytuł. Polecam jednak najprostsze z rozwiązań: nadpisanie w zasobach bloga . Pliki z topem nazywają się mniej więcej tak samo, różni je tylko numer (będący numerem szablonu): c1_top.jpg, c2_top.jpg, c3_top.jpg. Pliki mają wymiary: 745×170px, dwupikselowa biała ramka jest ich częścią ale już ta ciemniejsza szarawa pochodzi z kodu CSS.


Connections w wersji poprzedniej

Starsze wersje szablonu nadal są dostępne choć w nie całkiem tradycyjnej formie. Zarówno plik szablonu jak i jego kod są do pobrania/skopiowania i po zmianie na bloksowy szablon Connections do umieszczenia w zasobach własnego blogu.

cnnections szablon na bloga z chmurami Connections 01

żółto-niebieskie niebo,
linki niebieskie

bordowy fioletowy szablon na blogaConnections 02 

bordowe krople/kleksy;
linki bordowe

zielony zółty brązowy szablon na blogaConnections 03

butelkowo zielona obdrapana ściana,
linki zielone

zielony uliczny bruk szablon na blogaConnections 04

uliczny bruk w zielonkawym świetle;
linki zielone

czarny brązowy szablon na blogaConnections 05

brązowe wzorki na czarnym tle;
linki brązowe


Zrobiwszy Kubricka postanowiłam wziąć się za Rin. I tutaj rzecz jest nieco trudniejsza. Poza nagłówkiem wymienić należy jeszcze bullet wyświetlający się obok linków w wąskiej szpalcie. Z kolorami też nie jest tak prosto. Najbardziej irytujące są jednak ramki wokół topu Rina. Jeżeli ktoś nie chce się bawić z nimi to polecam zrobić je w kolorze tła.

O ile mam wrażenie, że moje Kubricki wyglądają dobrze o tyle z Rinami rzecz ma się nieco inaczej. Fajnie wyglądają pastelowa przybrudzone paseczki w Rinie 4 natomiast różowo-czarny Rin 1 wygląda już słabiej. Zapraszam jednak do wyrobienia sobie własnego zdania. Wszystkie Riny są dostosowane do popularnych na bloxie skryptów: archiwum tym razem zwinięte skryptem Eskey’a (z experymenty informatyczne),  ostatnie komentarze (z testblog), zwijane zakładki (z experymenty informatyczne), awatary z MyBlogLog.com w komentarzach (z pioornik).

Urodziny_szablony_kate_mac

Mój Rin

rin01 różowy szablon na bloga

Rin 01

intensywny różowo-czarny nagłówek; linki różowe

rin02 granatowy szablon na bloga

Rin 02

Granatowy, przybrudzony szablon; w nagłówku granatowe krople

rin03 granatowy niebieski szablon na bloga

Rin 03

Również granatowy ale delikatniejszy, jasniejszy

Rin 04 różowy szablon na bloga

Rin 04

Pastelowe różowe paseczki świetnie wyglądające na Rinie; z prawej strony nieco ciemniejsze

rin 05 czarny szablon na bloga

Rin 05

Czarny przechodzący w szary; linki szare

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