O szablonach, ich projektowaniu i moich z tym zmaganiach...
piątek, 10 sierpnia 2007

CSSPrzy pierwszej styczności z CSSem (lub innym sposobem zmiany czegokolwiek w ustawieniach strony) zostajemy zaskoczeni szeregiem niezrozumiałych pojęć. Niby są one po angielsku, niby je rozumiesz ale gdy chcesz coś zrobić okazuje się, że bez choćby małego kursu CSS się nie obejdzie. I tak było ze mną. Pierwszą rzeczą którą chciałam zmienić na swoim blogu był kolor wyświetlania odnośników w notce. Był trochę za jasny w porównaniu z tekstem a ja miałam dość zmieniania go w każdej notce osobno. I tak się zaczęło.

Dzisiaj kilka podstawowych słów o budowie stylów. Każda definicja stylu musi składać się z kilku niezbędnych elementów. Budowa stylu jest bardzo prosta: najpierw określamy o który element nam chodzi, potem co chcemy zmienić i na koniec jak.

selektor {
 cecha:wartość;
}


a {color:royalblue}

Załóżmy, że masz mieszkanie do urządzenia. Wszystko masz już przemyślane i poukładane, w głowie. Niestety mieszkanie, które urządzasz jest na drugim końcu świata, albo i zaraz obok ale nie masz do niego żadnego dostępu. Musisz działać przez pośredników, z którymi na dodatek możesz porozumiewać się tylko telefonicznie. Załóżmy, że dysponujecie katalogami, próbkami itp. ale w żaden sposób nie jesteś w stanie obrazowo przekazać swoich pomysłów. Tylko słowa.

Arkusz stylów to coś podobnego. Mówimy przeglądarce znajdź wszystkie linki na stronie i daj im jako kolor tekstu królewski błękit. W naszym mieszkaniowym porównaniu to może być polecenie: chcę aby wszystkie okna miały drewniane ramy.

Możemy też powiedzieć, że okno balkonowe ma być bliżej prawej ściany oddalone od niej o metr. Ma być duże, 20% większe niż reszta i od zewnątrz ma poprzedzać je podest o połowę większy niż ono. Wszystko to muszę powiedzieć, jeżeli chcę takich zmian. Oczywiście jeżeli zostawiłabym to okno balonowe w spokoju to ono by istniało, tylko w wersji standardowej, jak inne okna. Tym moim metaforycznym oknem jest link do dalszej części wpisu na tym blogu, tzw. link więcej. Jest on wyrównany do prawej, ma rozmiar tekstu stanowiący 120% rozmiaru innych elementów informacyjnych pod notką. Jest nieco odsunięty zarówno od prawej jak i dolnej krawędzi.

.IPTwiecej { text-align: right; padding: 0em 1em 1.5em 0; font-weight:normal; font-size: 1.2em; }

Podsumowując moje porównania: okno to selektor, może to być każde okno albo tylko określone; rozmiar, kolor, odsunięcie, różne ozdoby to wszystko są właściwości, czasami nazywam je cechami i mają one konkretne wartości: drewniany, duży, odsunięty o metr, ozdobiony w prążki itd. W tym porównaniu nie musi być okno, to może być fotel, albo sukienka. Każda z tych rzeczy ma jakieś cechy: kolor, materiał, kształt i te cechy mają określone wartości jak np. fioletowa wiskoza. Dla jednej rzeczy możemy zdefiniować kilka cech albo tylko jedną.

Selektor czyli co opisujemy

Zaczynamy od selektora, który jest odwołaniem do określonego elementu w HTML. W moim porównaniu najprościej będzie powiedzieć, że HTML to mieszkanie a CSS nasza lista zadań dla dekoratora. Bez dekoracji nasze mieszkanie to tylko puste gołe ściany ale istnieją. Bez mieszkania jednak nasza lista jest tylko listą życzeń niemającą odniesienia do niczego.

W zasadzie mamy trzy typy selektorów, które będziemy najczęściej używać w naszych arkuszach. Selektorem może być:

  • znacznik - czyli podstawowy element z którego budujemy kod HTML; możemy użyć dowolnego znacznika z kodu HTML, należy tylko pamiętać, że dany znacznik może pojawić się w kodzie strony wielokrotnie, przykładowo:
    • body - wszystko co jest w oknie przeglądarki
    • h3 - nagłówki trzeciego stopnia
    • a - linki
    • p - całe akapity
    • table - tabele
    • li - pojedynczy punkt listy
    • span -dowolny element liniowy
    • itd.
  • identyfikator - sam z siebie nie istnieje w kodzie HTML, niczego nie buduje, przypisany jest natomiast dowolnemu znacznikowi po to aby go wyróżnić spośród pozostałych, jak imię i nazwisko; identyfikator o konkretnej nazwie powinien być tylko jeden na stronie, trochę jak numer PESEL; identyfikatory w kodzie CSS zaczynają się zawsze od kratki (#), przykładowo:
    • #BlogGlownyBox - bloksowy kontener z całą zawartością bloga
    • #BlogTytulBox - kontener z całą zawartością części tytułowej
    • #BlogSzerokaSzpalta - wszystko co wyświetla się w głównej, szerszej kolumnie
    • #BlogKategorieBox - boks z kategoriami i linkiem do RSS
    • #BlogArchiwumBox - kontener zawierający wszystkie elementy archiwum
    • #ZakladkiTytul - element zawierający napis zakładki nad folderami z linkami w wąskiej szpalcie
    • itd.
  • klasa - podobnie jak identyfikator sama w kodzie nigdy nie jest, zawsze przypisuje się ją znacznikowi, w odróżnieniu od identyfikatorów jedną klasę można przypisać wielu znacznikom czyli na jednej stronie dana klasa może się pojawić przy wielu znacznikach co pozwala na łatwe wspólne opisywanie wielu podobnych elementów na stronie; czyli klasa odwołuje się do wszystkich osób o imieniu kasia, wszystkich brunetów; wszystkich krzeseł na piętrze domu itd.; klasę opisujemy w kodzie CSS zaczynając od kropki (.), przykładowo:
    • .BlogDataWpisu - każda data wpisu na stronie głównej
    • .BlogWpisItemTytul - tytuł każdego wpisu na stronie głównej
    • .IPTlinkuj - przenoszące do pojedynczej notki słowo link na stronie głównej w informacjach pod notką ale także te linki nad notką na stronie z pojedynczym wpisem, które odnoszą się do poprzedniego i następnego wpisu
    • .TytulFolderaZakladek - Każda etykieta folderu w zakładkch w wąskiej szpalcie
    • itd.

W zasadzie od strony kodu CSS nie ma większego znaczenia czy style przypisujemy do znacznika, klasy czy identyfikatora, każdy z tych typów sprawdzi się równie dobrze. Różnica będzie istotna dopiero w kodzie HTML. Znaczniki mówią coś niecoś o funkcji elementu więc przeglądarka często przypisuje im odpowiedni wygląd. Np. akapity oddzielone są od siebie nieco większym odstępem niż to ma miejsce w przypadku zwykłego odstępu miedzy wierszami. Dlatego przypisując style do znacznika należy wziąć pod uwagę także jego już przypisane cechy.

Powyższe nie znaczy, że w arkuszu opisujemy sobie co chcemy: raz klasę, raz identyfikator. Elementy są z góry określone, to HTML określa czy do opisania mamy klasę czy identyfikator. Nie istnieją #TytulFolderaZakladek czy .BlogArchiwumBox.

  • selektory-znaczniki powinny być pisane małymi literami ale w gruncie rzeczy ich wielkość nie wpływa na wyświetlanie stylów
  • selektory-identyfikatory muszą koniecznie zaczynać się od kratki, żaden inny znak nie zadziała; po kratce następuje nazwa, która musi być identyczna z tą wpisaną w kodzie strony;
    przykładowo jeżeli chcemy opisywać cały boks z kategoriami to w CSS jego opis będziemy podawać po selektorze #BlogKategorieBox jeżeli wpiszemy .BlogKategorieBox albo #BlogkategorieBox czy jakiś inny wariant to nasz opis nie zadziała; identyfikator poprzedzamy kratka i zapisujemy jego nazwę dokładnie tak samo jak jest w kodzie strony, co do literki
  • selektory-klasy zaczynają się od kropki po której następuje nazwa dokładnie tak samo zapisana jak w kodzie
    przykładowo opisując datę wpisu użyję klasy .BlogDataWpisu; jeżeli natomiast zapisałabym te słowa inaczej, poprzedziła innym znakiem dodała coś od siebie to selektor ten przestałby opisywać element daty umieszczony na stronie a więc mój opis stylów nie zadziałby

Zaczęłam opisywać wszystkie selektory bloksowe dla starego kodu. Na razie nie ma tego za dużo, skończona jest tylko strona z selektorami kategorii i stronicowania na stronie głównej ale pozostałe też będą w końcu w więc zachęcam do podpatrywania w zakładkach

Cecha czyli co zmieniamy

Cechy albo właściwości można dowolnie przypisywać do selektorów. Jest ich bardzo dużo i każda specyfikacja dodaje kolejne, to cechy pozwalają nam czarować stylami. Cecha określa co zmieniamy. Może to być kolor tła (background-color), wielkość czcionki (font-size), rodzaj wypunktowania (list-style-type), sposób wyświetlania (display) i cała masa innych rzeczy.

Aktualnie obowiązuje specyfikacja CSS 2.1 dla początkujących wystarczy odwołanie do kilku jej rozdziałów: 14 Kolory i tło, 15 Własności pisma, 16 Tekst. Ja sama też zaczęłam opisywać niektóre cechy, odnośniki oczywiście pojawią się w zakładkach jeżeli tylko popełnię notkę na dany temat. Polecam też tag właściwości CSS, który grupuje wszystkie notki na ten temat.

Wartość czyli jak zmieniamy

Poszczególne cechy mogą przybierać różne wartości: tło może być czerwone, niebieskie czy zielone, czcionka może być duża, dwa razy większa niż pozostałe albo nawet o konkretnej wielkości, wypunktowywać możemy kropkami albo kwadratami, albo nawet własnym obrazkiem, wyświetlać element możemy w linii albo w bloku albo nawet wcale. Wartość określa jak zmieniamy.

Każda cecha ma swoje specyficzne wartości. To jest całkiem logiczne bo na pytanie jaki kolor nie odpowiesz: szeroki na metr.

Budowa definicji stylu

Wszystkie cechy, którymi opisujemy element ujmujemy w nawias klamrowy. Konieczne jest zarówno otwarcie jak i zamknięcie. Niezamknięte style oznaczają, że wszystko co następuje po nich jest ich częścią, a że dla stylów niewiele to ma sensu wszystko co zostanie wpisane po niezamkniętym bloku stylów będzie nieważne i nie zadziała.

Czyli zawsze podajemy najpierw selektor, nie ma znaczenia czy to będzie znacznik, klasa czy identyfikator. Możemy opisywać kilka selektorów na raz jeżeli chcemy aby miały opisane te same style. W takim przypadku poszczególne selektory oddzielamy przecinkami. Przecinek jest niezbędny, jeżeli go nie użyjemy zamiast listy selektorów uzyskamy kombinator (taką bardziej skomplikowaną wersje selektora, która najprawdopodobniej nie będzie miała sensu).

Grupy selektorów są przydatne jeżeli chcemy przypisać takie same style dla kilku różnych elementów znajdujących się w różnych miejscach na stronie i opisanych różnymi znacznikami, klasami, identyfikatorami. Wystarczy poszczególne selektory rozdzielić przecinkami.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 padding: 0px 20px 0px 0px;
 color: #B52A51;
 font-size: 1.8em;
}


Po selektorze otwieramy nawias klamrowy, jest on oznaką, że zaczynamy wpisywać style, gdy skończymy musimy go zamknąć. Pomiędzy nawiasy klamrowe wpisujemy nasze informacje o wyglądzie danego elementu. Cecha i jej wartość to pojedyncza deklaracja stylu, poszczególne deklaracje oddzielamy średnikiem, koniecznie średnikiem, żaden inny znak nie zadziała. W samej deklaracji zaś cechę od wartości oddzielamy dwukropkiem, i zgadnijcie co, żaden inny znak nie zadziała.

W powyższym opisie ani razu nie użyłam słowa spacja czy enter. Na tym etapie nie ma znaczenia czy pomiędzy selektory rozdzielone koniecznie przecinkiem wstawimy spację czy nie. Nie ma też znaczenia czy poszczególne deklaracje zakończone średnikiem rozdzielimy też enterem, spacją czy niczym innym.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {padding: 0px 20px 0px 0px;color:#B52A51;FONT-SIZE:1.8em;}

 


css.blox.pl edit 2006Początkowo w tej notce znajdował się tylko link do strony, który była moją podstawą, ściągą i głównym punktem odniesienia. Cokolwiek chciałam zmienić zawsze sprawdzałam w tymże blogu czy to rzeczywiście to o co mi chodzi. Blog już wtedy był nieaktualizowany ale to wcale nie znaczy, że podstawy tam opisane są nieaktualne. Bynajmniej. Na początek nawet taka uboższa wersja lepiej się sprawdzi. Idealnie będzie oczywiście jak będzie się zaglądać do źródła strony chcąc się dowiedzieć co jest czym ale nie wiem jak wy ale ja na początku w ogóle nie mogłam zrozumieć o co chodzi z tym całym HTMLem. Ja chciałam pozmieniać sobie tylko kolorki w paru miejscach. Treść notki zmieniłam w październiku 2011 bo jej miejsce i tytuł świetnie nadawały się na drugą lekcję z dziedziny CSS.

niedziela, 05 sierpnia 2007

CSSOd pewnego czasu (by nie powiedzieć od dawna) HTML przestał być nośnikiem wyglądu. Owszem w najbardziej podstawowym znaczeniu tylko HTML decyduje o wyświetlaniu najistotniejszej części strony czyli jej treści. Wyobraźcie sobie ceramiczny balon z otworem a w środku herbatę. Napój to nasza treść, ceramiczna obła forma to HTML ale aby ten niby-czajniczek wyglądał potrzebujemy CSS, który określi jego kształt, kolor i całą tą wizualną formę. Bo korzystać możemy z niego od samego początku, herbatę zaparzymy i nalejemy nawet do kubka ale czy będzie nam wygodnie to zrobić to już inna sprawa.

Za wygląd strony odpowiedzialny jest CSS czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets). Jest to język służący do opisu sposobu prezentowania informacji na stronach WWW. CSS nie może istnieć samodzielnie, gdyż jest ściśle powiązany z językiem opisu struktury dokumentów takim jak (X)HTML. Czyli HTML określa istnienie i funkcję elementu, mówi to jest tytuł, to jest tabela, to jest link. CSS natomiast mówi linki mają być podkreślone, tytuły mają mieć dwukrotną wielkość tekstu a tabele mają mieć ramki ale jeżeli nie będzie tych tabel, linków i tytułów to co z tego, że CSS powie gdzie mają być kreseczki? Abstrahując od rozważań filozoficznych, kolor różowy nie ma znaczenia dopóki nie pomalujesz nim ściany.

Za pomocą CSS można opisać wszystkie pojęcia odpowiedzialne za wygląd poszczególnych elementów dokumentu (rodzina czcionek, kolor tekstu, marginesy, odstęp między wierszami, pozycja danego elementu względem innych elementów bądź okna przeglądarki). Podkreślam jednak pamiętać że Kaskadowe Arkusze Stylów definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Tak więc za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Wstawianie stylów na stronie

Są cztery podstawowe sposoby umieszczania stylów na stronie: lokalny, zagnieżdżony, zewnętrzny i importowany. Kolejność, w której wpisałam te style ma znaczenie bo im styl bliżej ciała tym bardziej definitywną odgrywa rolę. Jest to o tyle istotne, że można w zasadzie wykorzystywać wszystkie cztery rodzaje implementacji na raz. Na bloksie możemy skorzystać tylko z dwóch sposobów umieszczania stylu ale w dziedzinie wyglądu zapewnia to wystarczający stylowy dostęp. Zacznę wyliczanie od opisu implementacji, która jest najdalej od ciała.

  • importowany - do każdej strony może zostać przypisany styl importowany czyli pochodzący z innej strony
  • zewnętrzny - znajdujący się w innym dokumencie niż strona i wywoływany odpowiednim zapisem w nagłówku (head) strony 
  • wewnętrzny zagnieżdżony - znajduje się bezpośrednio na stronie w jej nagłówku (head)
  • lokalny - zostaje przypisany bezpośrednio przy elemencie który opisuje

Jeżeli jesteście laikami to zapewne nie macie zielonego pojęcia o czym piszę tutaj. Jeżeli trochę znacie się na HTML to pewnie coś wam świta ale nie za każdym razem potraficie sobie wyobrazić różnicę. Postaram się więc na przykładach opisać jakie są zalety konkretnych rozwiązań.

Przypominam, że implementacja ma swoja hierarchię. Lokalne są ważniejsze od zagnieżdżonych, zagnieżdżone od zewnętrznych a zewnętrzne od importowanych. Oczywiście nie oznacza to, że lokalne są najlepszym rozwiązaniem. Wprost przeciwnie. Najlepiej wszystko umieszczać jak najwyżej. Im bliżej ciała tym bardziej w drodze wyjątku.

Style importowane

Pochodzą z innej strony niż ta, której wygląd opisują. Umożliwia to dodanie jednego szablonu, dokładnie takiego samego na wielu różnych stronach. Wywołuje się je przez polecenie @import, po którym podany jest adres url, umieszczone w nagłówku (head) strony.

style importowane przykładowy kod

Wyobrażam sobie, że takie style świetnie sprawdziłyby się w większym serwisie blogowym. Są najdalsze od ciała jak to chyba tylko możliwe a więc w razie zaistnienia konkurencji liczą się w najmniejszym stopniu. Mogą jednak umożliwić sprawne dodanie nowości na wielu stronach na raz. Wystarczy zmianę opisać w jednym arkuszu, do którego odwołanie będzie na każdej stronie. Zakładam jednak, że jest coś wielce kłopotliwego w takim rozwiązaniu bo nie zetknęłam się z nim jeszcze (tzn. nie zauważyłam jeżeli się jednak zetknęłam co nie jest wcale takie dziwne). Możliwe, że koszty/wady nie są warte zalet takiego rozwiązania.

Style zewnętrzne

Ten rodzaj implementacji działa na bloksie. Każdy blog ma swój własny arkusz stylów, który znajduje się w osobnym/zewnętrznym dokumencie i jest tylko wywoływany w nagłówku (head) każdej strony bloga (jeden arkusz dla wszystkich podstron bloga). Powinien to być dokument tekstowy z rozszerzeniem css.

przykładowy kod stylów zewnętrznych

Takie style są podstawą bloksowych szablonów. Wygląd wszystkich podstron opisany jest w jednym dokumencie wspólnym dla wszystkich podstron. Chcąc zmienić cokolwiek w wyglądzie blogu wystarczy wpisać poprawkę w jednym miejscu.

Ciekawym rozwiązaniem może być dodanie kilku arkuszy zewnętrznych prezentujących alternatywną aranżację. Użytkownik będzie wtedy mógł sobie wybrać najbardziej odpowiadający mu wygląd strony.

Style zagnieżdżone

W tym sposobie implementacji style umieszcza się w nagłówku (head) strony, którą opisują. Zamiast wywołania dokumentu ze stylami mamy w kodzie HTML wpisaną całą jego treść.

przykładowy kod stylów zagnieżdżonych

Nie jest to złe rozwiązanie, każde style są dobre ale chcąc wprowadzić zmianę, która ma być uwzględniona na wielu stronach/podstronach trzeba by chyba było dodawać ja na każdej podstronce osobno. Oczywiście odpowiednie edytory mogą wszystko ułatwić. Na bloggerze w źródle strony (poza dziwnymi kodami z tamtejszego edytora szablonów) można zobaczyć kod css.

Style lokalne

Umieszczone są najbliżej ciała więc mają dla elementu największe znaczenie. Umieszcza się jej jako fragment kodu html bezpośrednio opisywanego elementu.

przykładowy kod stylów lokalnych

Takie style są dostępne na bloksie wszędzie tam gdzie jest dostęp do kodu HTML. Pisząc notkę, korzystając z zaawansowanego edytora, w ten właśnie sposób edytuje się jej wygląd. Gdy dodajesz do słowa podkreślenie edytor zamienia twoje polecenie w kod html ze stylami lokalnymi, który wyglądać będzie mniej więcej tak:

<span style="text-decoration: underline;">słowo</span>

Wadą tego rozwiązania jest problem wprowadzania zmian. Aby zmienić raz dodany styl lokalny trzeba dosłownie wejść do elementu przy którym jest on dodany i zmienić go, do każdego pojedynczego elementu. Oznacza to, że jeżeli zmieniałeś czcionkę czy kolor tekstu w każdej notce w zeszłym roku a teraz masz nowy szablon i krój tej czcionki czy kolor tekstu przestały Ci odpowiadać to aby się go pozbyć ze starych notek musisz  wejść do każdej z nich i przy każdym akapicie w którym zmieniłeś wygląd tekstu zrobić to na nowo. I tak za każdym razem gdy chcesz wprowadzić zmianę.

Dlatego lepszym rozwiązaniem od stylów lokalnych będzie wykorzystanie stylów zewnętrznych, nawet w przypadku zmiany wyglądu trzech zdań w każdej notce. Zdaję sobie jednak sprawę, że style lokalne dodaje edytor, nic prostszego niż kliknięcie guziczka ale zalety klas są naprawdę spore więc zaczynam wspominać temat. Z cała pewnością go rozwinę na razie jednak prosta ilustracja proponowanego rozwiązania.

zamiast stylów lokalnych

Jeżeli zależy Ci na tym aby dany fragment notki był pisany czerwoną czcionką to nie ma problemu. Style lokalne są dobrym wyborem. Jeżeli natomiast chcesz wyróżnić te try zdania z otaczającego je tekstu a samo pogrubienie wydaje ci się być za mało to zamiast zmieniać kolory, dodawać podkreślenie czy powiększać rozmiar kroju wykorzystaj możliwość dodania klasy. Stwórz styl wyróżnienia w arkuszu, nazwij go jakąś klasą i za każdym razem gdy będziesz chcieć coś wyróżnić zamiast tych wszystkich stylów wpisuj klasę.

Oczywiście czerwony, podkreślony i powiększony tekst rzeczywiście jest mega choć niekoniecznie już mega estetyczny. To tylko jaskrawy przykład.


Treść notki została zmieniona w październiku 2011. W sierpniu 2008, kiedy została po raz pierwszy opublikowana, w ogóle nie rozumiałam zależności między kodem HTML i CSS. Sam CSS był dla mnie językiem magicznym, który dopiero zaczynałam zgłębiać. Wiedziałam, że na bloksie szablony tworzy się edytując zewnętrzny arkusz stylów, wiedziałam, że użytkownik nie może sam dodać stylów w sposób wewnętrzny zagnieżdżony ale na czym polega ważkość różnicy pomiędzy tymi dwoma sposobami nie miałam najmniejszego pojęcia. Style lokalne były zaś niedostępne wręcz dla mojego pojmowania ze względu na moją zupełną ignorancję w dziedzinie HTML.

niedziela, 29 lipca 2007

Podstawową zaletą tych szablonów są zdjęcia i rysunki, które epeeya wybiera. Dobry, choć bardzo oszczędny, jest też dobór kolorów. Są one dopasowane do ilustracji i stonowane.

Mała prośba od autorki szablonów:

Pod szablonem, który wybierzesz, w komentarzach, zostaw link do swojego bloga, umieszczę go na tej stronie. Będzie mi miło jeśli stronę tę polecisz swoim znajomym, a na swoim blogu umieścisz do niej link. Wszelkie pytania i komentarze proszę zostawiać w Księdze Gości.


szablon piąty by epeeya - kołonotes Szablon z kołonotesem

adres: http://szablonpiatybyepeeya.blox.pl
autor: epeeya
-454px- | Georgia | #000

szablon podstawowy: Niebieski
uaktualniony kod -500px-


szablon 58 by epeeya - malarskiSzablon malarski (farbki)

adres: http://szablon58byepeeya.blox.pl
autor: epeeya
-531px- | Georgia | #000

szablon podstawowy: Blogowy
uaktualniony kod -508px-


szablon 96 by epeeya - kiciaSzablon z kotem

adres: http://szablon96byepeeya.blox.pl
autor: epeeya
-370px- | Verdana | #000

szablon podstawowy: Blogowy
uaktualniony kod -400px-


szablon 102 by epeeya - motylSzablon z motylem i kwiatkiem

adres: http://szablon102byepeeya.blox.pl
autor: epeeya
-513px- | monospace | #333

szablon podstawowy: Blogowy
uaktualniony kod -500px-


szablon piąty by epeeya - pocztówkaSzablon z pocztówką

adres: http://szablon103byepeeya.blox.pl
autor: epeeya
-513px- | Garamond | #333

szablon podstawowy: Blogowy
uaktualniony kod -500px-


Szablony mimo upływu lat dalej są bardzo atrakcyjne. W ciągu tych kilku lat dodano kilka drobiazgów na bloksie więc dla zainteresowanych podaję także uaktualnione przeze mnie kody do tych szablonów. Starałam się nie zmieniać kolorów czy proporcji czasem jednak wygodniej było policzyć coś na nowo i nieco inaczej powpisywać cechy.

Epeeya jest w zasadzie powodem dla którego zaczęłam się interesować szablonami. Gdy założyłam pierwszego bloga i szukałam szablonu dla siebie to właśnie jej projekty spodobały mi się najbardziej. Przez nieco dłuższy czas korzystałam z dwóch: 102 i 103. Najpierw był ten z pocztówką ale ma bardzo jasne linki, były za jasne jak dla mnie więc szukałam informacji jak je zmienić. Potem był ten z motylem, wtedy już wiedziałam jak wprowadzić drobne zmiany więc i krój o stałej szerokości znaku od razu zamieniłam na Trebuchet MS. I tak się zaczęło...


Wpisy na podobne i powiązane tematy:

sobota, 28 lipca 2007

Nie dla wszystkich wszystko jest jasne od samego początku. Niektórzy potrzebują dodatkowych wyjaśnień albo wskazania w którą stronę mają patrzeć. Dla tych właśnie jest treść notek Ilustrowany przewodnik po bloksie dla początkujących. Dzisiaj wyjaśnienie rzeczy która jest elementarną częścią blogowania dla wielu piszących ale nie każdy wie jak wstawić zdjęcie czy film do notki. A rzecz jest bardzo prosta.

dodawanie zdjęć i filmów

Powyższa ilustracja wszystko już obrazuje. Adres ilustracji i filmu wstawiamy w odpowiednie okno, które otworzy się po kliknięciu w odpowiedni guzik. Edytor jest czymś niejako niezależnym od bloksa. Ja polecam używanie zaawansowanego TinyMCE bo jest najprostszy w obsłudze, stale aktualizowany i udostępnia najpopularniejsze funkcje w bardzo czytelny sposób. Jeżeli ktoś ma jednak wątpliwości to w rozwinięciu instrukcja dodawania zdjęć i filmów rozbita na elementy pierwsze.

piątek, 27 lipca 2007

Z definicji blog ma dotyczyć szablonów. Problem pojawi się gdy ktoś zacznie się zastanawiać jaka powinna być zawartość bloga o adresie szablonykatemac.blox.pl. Niestety prawdopodobnie nie spełnię wszystkich waszych oczekiwań. Początkowo zaś nie spełnię żadnych. Zamierzam dopiero nauczyć się robić szablony. Ten blog do pewnego stopnia będzie to dokumentował.

Tyle na początek.

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

1 ... 26 , 27 , 28 , 29 , 30
 
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...