O szablonach, ich projektowaniu i moich z tym zmaganiach...
piątek, 31 października 2008

Arial jest krojem zaprojektowanym w 1982 roku dla IBM przez Robina Nicholasa i Patricię Saunder z firmy Monotype, jednej z najsłynniejszych firm zajmujących się typografią. Powstała jako tańszy odpowiednik kroju Helvetica (firmy Linotype) i początkowo nazywała się Sonoran San Serif.

original_sketch_of_an_arial_letterform
Źródło: www.monotypeimaging.com

Cała historia początków popularności Ariala związana jest w zasadzie z PostScript czyli językiem opisu strony. Jest to tekstowy opis zawartości dokumentów, który po przesłaniu do drukarki zamieniany jest w bitmapowy obraz strony. Dopiero w tej formie informacja trafia na papier. Język ten wprowadziła na rynek firma Adobe Systems, która też to firma kupiła licencję na wykorzystywanie kroju Helvetica i zaczęła go dołączać do każdego swojego interpretatora Postscript. Nie wnikając zbytnio w szczegóły należy powiedzieć, że istnieją dwa rodzaje fontów postscriptowych przy czym Adobe nie udostępniło specyfikacji do tego lepszego rodzaju (Type1). Firmy Apple i Microsoft doszły do porozumienia w celu stworzenia alternatywy dla technologii Adobe - Apple daje format fontów TrueType, konkurencyjny dla Type1 a Microsoft udostępnia swój kolon technologii PostScript - TrueImage. I tyle by było w zasadzie historii.

Narodziny Ariala

Podstawą popularności Ariala stał się sukces Windowsa. W 1992 wprowadzono na rynek Windows 3.1 gdzie jednym z podstawowych krojów był właśnie Arial. Krój ten zostaje dołączany do większości produktów Microsoftu (Apple natomiast kupuje licencję na Helvetikę). Dołączenie tego kroju do systemu operacyjnego Windows spowodowało, że Arial stał się jednym z najpopularniejszych "fontów" na świecie skutecznie wypierając swój pierwowzór. To właśnie Microsoft zmienił nazwę na Arial.

Roznice_w_ksztalcie_znakow
Źródło: typografia.ogme.pl

Geneza projektu

Mimo, że Arial jest prawie identyczny z Helvetiką, to nie jest jej idealnym klonem. Zacznijmy od tego, że zaprojektowana w 1957 roku Helvetica miała być nowym, uniwersalnym bezszeryfowym krojem pisma, który miał konkurować z Akzidenz-Grotesk. Podstawą dla Helvetiki był krój Schelter-Grotesk i początkowo (do 1960 roku) nosiła ona nazwę Neue Haas Grotesk. Arial natomiast posiadając proporcje, szerokość liter i odstępy Helvetiki wzorowany jest na Monotype Grotesque 215. Tak więc oba kroje wzorowane są na dziewiętnastowiecznych krojach Grotesque (w Niemczech Grotesk). Arial posiada proporcje Helvetiki z prostej przyczyny – miał ją zastępować. W dokumentach drukowanych na urządzeniach posiadających nieoryginalny interpreter PostScriptu, w miejsce oryginalnej Helvetiki można było podstawić Ariala, zachowując proporcje tekstu.

Różnice - Arial vs. Helvetica

Mimo różnej genezy i nieco odmiennego charakteru krojów są one bardzo podobne i przy niewielkim stopniu pisma trudno dostrzec różnice. Niemniej te różnice istnieją. Arial ma więcej cech humanistycznych, piętki (końcówki liter) są ostro ścięte, krzywe są miększe. Najwyraźniej różnice widać w literach „a”,  „t”,  „G”,  „R”.

ARIAL_a ARIAL_t ARIAL_G ARIAL_R ARIAL_f ARIAL_c
Źródła: www.ms-studio.com, ilovetypography.com

Czy widzicie już różnicę? Może warto to sprawdzić?
Rozróżnisz Ariala od Helvetiki? Sprawdź się»

Krytykowanie Ariala za to, że powstał na podstawie innego kroju jest zupełnie bezsensowne. Typografia, która nie opiera się na tym co już stworzono jest złą typografią. Należy wzorować się na poprzednikach, należy stosować się do klasycznych zasad. Litery są przede wszystkim narzędziem komunikacji, dlatego też m.in. nie można zastrzec ich kształtu. Można głosić piękność Helvetiki i brzydotę jej kopii w postaci Ariala ale jeżeli litery różną się między sobą tylko nieznacznie i tylko w kilku przypadkach to co jest krytykowane? Przeszkadza nam to, że Arial jest kopią Helvetiki czy to, że nie jest kopią idealną?

To co jest problematyczne w Arialu to to, że Microsoft wybrał go aby nie płacić licencji za dużo popularniejszy wtedy krój Helvetica a dzięki sukcesowi Windows doprowadził do tego, że Arial wyparł Helvetikę.

Źródła:

  • {typografia.oinfo/: Arial vs Helvetica
  • ilovetypography.com: Arial versus Helvetica. How to tell them apart.
  • Mark Simonson Studio: How to Spot Arial
  • Mark Simonson Studio: The Scourge of Arial
  • iliveonyourvisits.com: quiz - arial or helvetica?
  • wikipedia: porównanie Akzidenz-Grotesk i Helvatica
  • wikipedia: Microsoft Windows 3.x
  • PLDOS: Historia MS Windows
poniedziałek, 27 października 2008

Kolejny szablon typograficzny. Tym razem padło na krój Arial. Sporo jest osób które zarzucają Arialowi, że jest tylko kopią Helvetiki. Do pewnego stopnia jest to prawda niemniej jednak kroje te różnią się między sobą i należy pamiętać, że mają inny klimat. Ten szablon z Helveticą wygląda zupełnie inaczej i projektując dla Helvetiki wybrałabym zupełnie inny wygląd. Jeżeli Arial jest kopią Helvatici to jest on kopią o bardziej humanistycznym charakterze.


38 szablon Arial, jasny

Szablon 38 Arial, niebieski,
na starym kodzie, dla blogów na blox.pl. -570px- 


Szablon nigdy nie był przesadnie popularny. O skorzystaniu z niego poinformowało mnie sześć osób (średnio 1,5 osoby na rok - heh). Był bardzo spokojny i stonowany i nic chciałam tego zmieniać. Dlatego też mino znaczącej zmiany w wyglądzie jakiej dokonałam w lutym 2012 roku nie spodziewam się gwałtownego wzrostu zainteresowania tym projekcie. Z drugiej strony szablon został nieco uwspółcześniony, nie tylko od stron kodu css ale także pod względem wyglądu. Jest teraz znacznie szerszy, w tle dookoła bloga ma delikatną teksturę wiec mniejsze powinno być odczucie pustki na dużym ekranie. Dodatkowo dodałam mu grafikę w topie a kolor linków opisałam tylko w jednym miejscu. Dzięki temu szablon można łatwo dostosować do własnych upodobań.

 

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

fragmenty szablon 38 Arial

Uwagi o szablonie 38 Arial, niebieskim
szerokość szablonu 970px
szerokość części na notkę 580px
szerokość pobocznej szpalty 300px
kolor tła białe (#fff) a w body szare (#f0f0f0)
kolor tekstu ciemny (#4d4d4d)
kolor linków niebieski (#0e73b8)
pozostałe kolory czarny (#000), jasnoszary (#eee)
krój użyty w notce Arial
wielkość tekstu notki 12px
interlinia w notce wartość względna: 150%
maksymalna wielość elementów graficznych w notce 570px
css-owe ramki przy grafikach tak
 background:#f6f6f6;
 border: #eee 1px solid;
 padding:4px;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie i zmiana kroju na Segoe Print
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
h3 - odstęp, powiększenie, czarny kolor
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme RiSpokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 830px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablon jest całkiem niezły, bardzo jasny i spokojny. Odstępy są bardzo rytmiczne i mniej więcej mają stałą szerokość 30px. Szablon jest stosunkowo szeroki ale większość tej dodatkowej szerokości przeznaczyłam dla wąskiej szpalty, ma ona aż 300px. Ostatnio często umieszczam długie linki w zakładkach pomyślałam więc, że może komuś przyda się szablon o podobnych proporcjach. Lubię szerokie szpalty boczne.

Pierwszy szablon Arial był całkiem podobny, jasny, prosty i niebieski. Nowy Arial jest znacznie szerszy ale tak samo jasny, prosty i niebieski. Początkowo nie planowałam ilustracji tytułowej, zazwyczaj wolę jej nie dodawać zostawiając możliwość zaprojektowania bardziej ozdobnego topu użytkownikowi. Robiąc szablony reliefowe pomyślałam, że jakąś prostą ilustrację jednak dodam. Zajmuje ona dolną część topu i może, jeżeli zajdzie taka potrzeba być większa, nawet do samej góry.

Zrobiłam alternatywne ilustracje do topu, wszystkie niebieskawe ale kolorystykę szablonu łatwo zmienić, generalnie jest szara z dodatkiem niebieskiego w linkach a kolory linków zmienić najłatwiej.

alternatywne topy dla szablonu 38

Moje ilustracje mają wymiary 910×200px. 910px w poziome to cała szerokość boksu tytułowego więc nawet jeżeli ilustracja będzie szersza to więcej niż 910px nie będzie widać. 200px w pionie to wysokość ilustracji uwzględniająca miejsce na górne menu. Jeżeli jednak nie zamierzasz z niego korzystać to równie dobrze możesz dodać ilustrację wysokości 260px. Jeżeli natomiast dodasz jeszcze większą ilustrację to w pionie będzie ona wypełniać cały boks tytułowy, czyli aż po sam tytuł (pamiętaj więc aby odpowiednio zaprojektować miejsce w ilustracji gdzie będzie widoczna nazwa bloga).


środa, 22 października 2008

Notka o charakterze wyjaśniającym i instruującym. W kilku szablonach obok tytułu wpisu pojawiają się ilustracje. Można je tam dodać na wiele różnych sposobów. Najważniejsze aby sposób dobrać do oczekiwanych rezultatów. Przede wszystkim rezultatem będą obrazeczki nie związane z treścią notki, są one częścią szablonu czyli wyglądu a nie notki czyli treści. Oczywiście w szablonie dodajemy je za pomocą CSS ale możemy je przypisać kilku różnym selektorom i na kilka różnych sposobów. Dzisiejszy to rozwiązanie najprostsze. Obrazek dodamy bezpośrednio przy elemencie tytułowym notki korzystając z jego selektora.

Obrazki obok tytułów notek

W dalszej części notki lista szablonów, w której takie obrazeczki już istnieją (z podziałem na różne sposoby ich umieszczenia) a także szczegółowa instrukcja jak je dodać w każdym innym szablonie na starym kodzie w wybrany sposób:

  1. Dodaj obrazek/obrazki do zasobów bloga
  2. Przejdź do edycji arkusza stylów
    • Dodaj opis ilustracji przy selektorach tytułu notki
    • Odsuń tytuł wpisu

Gdzie już istnieją obrazeczki obok tytułów notek

Obrazeczki obok tytułu notki pojawiły się już w szablonach biurkowych (seria starszych szablonów zmienionych w 2013 roku na biurkowe) jednak umieszczone są tam one w znacznie bardziej skomplikowany sposób. Jest też obrazeczek z serduszkami w jednym z szablonów warstwowych lecz jest to raczej pojedynczy przypadek (chociaż pod względem sposobu bardzo podobny do dzisiaj prezentowanego).

Dzisiejszy sposób omawiać będę na przykładzie kilku szablonów sportowych. Umieściłam tam literki „s” na różnych tłach ale dzięki tej instrukcji m.in. będziesz mógł zastąpić te obrazeczki innymi.

szablon sportowy 05 - czerwony szablon sportowy 06 - zielony szablon sportowy 07 - granatowy szablon sportowy 08 - pomarańczowy

Jeżeli potrzebujesz ikonkowej inspiracji to polecam strony prezentujące zbiorowo prace artystów tworzących te małe obrazki: W poszukiwaniu ikon Oto kilka przykładów na różne okazje.

G12 Football - Teekatas Suwannakrua Canary girl - Iconka.com Lamp - Hand Drawn Goods Car orange bevel-and-emboss Cat laptop Iconka.com Blue computer - Shek Bird red - Sirea

Jak dodać obrazek obok tytułu notki

Obrazek obok tytułu notki można dodać na kilka sposobów, wszystko zależy od efektu jaki chcesz uzyskać.

  1. Jeżeli chcesz aby przy każdym tytule na stronie był inny obrazek (ale przypisany do kolejności notek a nie do konkretnej notki czy kategorii) skorzystaj z pseudoklasy :nth-child - więcej o tym sposobie pisałam przy okazji szablonów biurkowych
  2. Jeżeli zamierzasz skorzystać z tylko jednego obrazka, który będzie się miał pojawiać przy każdym tytule notki (przy każdym tytule ten sam) i chcesz (albo i nie) aby także był linkiem do notki to ta instrukcja będzie najodpowiedniejsza

Takie rozwiązanie sprawdzi się gdy np. zechcesz obok tytułów notek umieścić swój avatar albo favikonę. Może to być też element czysto dekoracyjny, jakiś ornament, fragment wzorku z tła, coś co wzmocni wizualne skojarzenia z twoim i tylko twoim blogiem (albo z jego tematyką).

Jeszcze inny powód to sezonowe zmiany ozdób. Czasami fajnie jest ozdobić troszkę bloga na różne święta i okazje: na Boże Narodzenie, na urodziny, z okazji dnia Ziemi czy Nocy duchów. A może sezonowo: śnieżynki na zimę, kwiatuszki na wiosnę, latem słoneczka a jesienią liście... Powodów jest tyle ilu chętnych na zmiany - w każdym przypadku ten prosty sposób będzie odpowiedni.

Christmas tree - Samborek 04 earth Thomas Veyrat Cake VisualPharm Cat Aha-Soft Status weather snow Oxygen Team Marvel dominicanjoker Osd sun Mag1cWind0w

A. Dodaj obrazek/obrazki do zasobów bloga

Gdy już zdecydujesz się na obrazek w edycji bloga przejdź do części, w której dodajesz pliki do zasobów.

Edycja bloga -> WPISY -> PLIKI -> Nowy plik

Jeżeli korzystasz z jednego z szablonów w którym już taki obrazek istnieje przy tytule notki to nazwij swój tak samo jak te w szablonie (pamiętaj aby typ pliku był taki sam) i zaznacz opcję nadpisz pliki. Dodając je teraz do zasobów bloga zastępujesz te istniejące swoimi nowymi. Dzięki takiemu rozwiązaniu podmiana obrazków jest iście automatyczna.

Obrazki z literką „s” w szablonach sportowych nazywają się odpowiednio: s05_small.png, s06_small.png, s07_small.png, s08_small.png.

B. Przejdź do edycji szablonu (arkusza stylów)

Szablon na bloksie to tzw. arkusz stylów (CSS). Jego edycja znajduje się w części wygląd.

Edycja bloga -> WYGLĄD -> EDYCJA CSS -> Edytor CSS

W swoim arkuszu znajdź wspomniane selektory odpowiedzialne za wygląd tytułu wpisu. W zależności od autora szablonu mogą się one znajdować w różnych częściach arkusza, mogą być zgrupowane razem albo opisane osobno. Jeżeli masz problem z ich odnalezieniem to skorzystaj z przeglądarkowej wyszukiwarki (Ctrl + F). Najlepiej wyszukuj każdy selektor osobno.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
BACKGROUND: url(/resource/ikonka.png) no-repeat left top;
 min-height:30px;
 padding:0 0 0 40px;
}


Aby dodać ikonki do szablonu opisz dla tych elementów wygląd tła w postaci graficznej.

  • Pamiętaj, że obrazek ma się pojawić tylko raz w lewym górnym rogu a nie powtarzać jako tło całego kontenera z wpisem.
  • Ustalając położenie weź też pod uwagę sytuację gdy tytuł zajmować będzie więcej niż jedną linijkę.

Aby tekst nie nachodził na obrazek trzeba ten tekst nieco przesunąć.

  • Skorzystaj z dopełnienia (nie marginesu) bo dopełnienie współdzieli tło z treścią elementu a margines nie.
  • Wielkość tego dopełnienia zależna jest od wielkości twojego obrazka. Moje literki „s” są małe ale jeżeli wymieniałabym je na którąkolwiek z pokazanych tu w przykładach ikonek to musiałabym zwiększyć wartość dopełnienia.
  • Jeżeli ikonka ma być po lewej stronie tytułu to oczywiście użyj lewego dopełnienia.

Aby ikonka była widoczna także gdy wpis nie ma wpisanego tytułu określ minimalną wysokość tego elementu.

  • Nawet jeżeli tytuł wpisu nie istnieje to istnieje kontener, w którym normalnie on by się wyświetlał. Ze względu na brak treści nie zajmuje on żadnej przestrzeni więc aby to zmienić trzeba określić jaką przestrzeń ma zajmować.
  • Oczywiście jeżeli tytułu nie będzie to obok ikonki będzie pusta przestrzeń.

Jeżeli chcesz aby ikonka także była linkiem (tak jak tytuł notki) to Zamiast opisywać selektor .BlogWpisItemTytul opisz kombinator .BlogWpisItemTytul a który odpowiada za wygląd tytułu notki gdy ten jest linkiem.

I gotowe.

Oczywiście są inne sposoby na osiągnięcie tego samego efektu. Sposoby czasem prostsze, czasem trudniejsze, lepsze, szybsze, mniej bądź bardziej kłopotliwe. Niektóre z nich opisuję na tym blogu więc sprawdź pozostałe wpisy na temat wyglądu tytułu notki.


Przydatne bądź powiązane tematycznie notki:

W powyższym wpisie zaprezentowałam kilka przykładowych ikonek. Powinny być one linkami do strony na której je znalazłam. Jeżeli chcesz  którejś z nich skorzystać sprawdź sobie licencję. Autorami poszczególnych ikonek są: G12 Football - Teekatas Suwannakrua, Canary girl - Iconka.com, Lamp - Hand Drawn Goods, Car orange - bevel and emboss, Cat laptop - Iconka.com, Blue computer - Shek, Bird red - Sirea, Christmas tree - Samborek, 04 earth - Thomas Veyrat, Cake - VisualPharm, Cat - Aha-Soft, Status weather snow - Oxygen Team, Marvel - dominicanjoker, Osd sun - Mag1cWind0w.

niedziela, 19 października 2008

Dzisiaj odsłona czwarta szablonu typu A Clean. Prezentuję cztery nowe kolory szablonu Clean: żółty, zielony, niebieski i fioletowy. Są ciekawe, są stonowane ale równocześnie intensywne. Wszystkie są prawostronne ale to nie problem, łatwo zmienić ich stronność czy przenieść zakładki do trzeciej kolumny.


szablon 34
Szablon 34 Clean (typ A) - żółty,
na starym kodzie, dla blogów na blox.pl. -550px-


szablon 35
Szablon 35 Clean (typ A) - zielony,
na starym kodzie, dla blogów na blox.pl. -550px-


szablon 36
Szablon 36 Clean (typ A) - niebieski,
na starym kodzie, dla blogów na blox.pl. -550px-


szablon 37
Szablon 37 Clean (typ A) - fioletowy,
na starym kodzie, dla blogów na blox.pl. -550px-


Zdecydowanie mniej robię szablonów ciemnych więc te są do pewnego stopnia nietypowe. Łatwo w nich zmienić stronność czy przenieść do trzeciej kolumny zakładki są więc też wygodne. Na koniec zaś gratka dodatkowe wzorki do wymiany topu.

sobota, 18 października 2008

Jakiś czas temu (ze 2 tyg. już chyba będzie) miał premierę nowy wygląd bloga Michała Pola i dzisiaj nie omieszkam się tym pochwalić. Zarówno ze współpracy z Michałem jak i efektów jestem bardzo zadowolona.

szablon dla POLSPORT

Kolorystyka bloga obraca się wokół trzech kolorów: czerwonego dla wyróżnień, białego i bardzo ciemno szarego dla tekstu i tła. W dziedzinie kolorów zazwyczaj jestem oszczędna. Bardzo podziwiam SenTineLową paletę kolorów dla szablonu Wood.n ale sama tak nie potrafię. Z drugiej strony uwielbiam proste projekty, im mniej tym lepiej. Ozdobą tego szablonu ma być jego wąska szpalta.

212121333333999999DDDDDDffffeee0e2d7CC3333dd0000
#212121
#333333
#999999
#DDDDDD
#ffffee
#e0e2d7
#CC3333
#dd0000

Układ blogu jest tradycyjny. Szeroka szpalta po lewej i jedna wąska po prawej. Michałowi zależało na szerokim nagłówku i sporej ilości miejsca na wpisy. W szablonie wykorzystałam dwa różne kroje. Na plan pierwszy wysuwa się Times New Roman który na blogu był obecny na stałe – Michał pisząc notkę zmienia krój z automatycznego na Timesa więc nie było sensu proponować czegoś innego skoro i tak zostanie to zmienione na Timesa. Nawiązując do kroju we wpisach Times New Roman pojawił się też w wąskiej szpalcie. Osobiście jestem bardzo zadowolona z wyglądu wąskiej szpalty. Podoba mi się to połączenie kolorów, proste ozdobniki przy linkach w zakładkach i wygląd Timesa w tytułach folderów. Drugim krojem jest Tahoma która ma stanowić tło dla szeryfowego Timesa.

Na blogu wykorzystywane są skrypty zmieniające nieco jego wygląd. Archiwum zwinięte w wersji zaproponowanej przez Szymona. Zakładki choć nie są zwinięte to jednak wykorzystują skrypt Eskey’a – pojawiają się dzięki niemu na stronie z pojedynczą notką. Wyróżnienie komentarzy autora dokonane zostało skryptem popełnionym przez Szymona. W przypadku POLSPORTu to mógł być tylko skrypt Szymona ponieważ autor posługuje się różnymi loginami. Do wyróżnienia wykorzystałam prostą grafikę, która nawiązuje do nazwy bloga. Ten sam kształt posłużył jako favikonka.

1 2 3 4

5 6 7 8

Zapraszam więc do spojrzenia na POLSPORT. Proszę się tylko nie przestraszyć, Michał na blogu ma muzykę co ogólnie rzecz ujmując jest postępkiem wprost okrutnym ale dla mnie osobiście nie tak irytującym ponieważ sportem się nie interesuję za to muzyka którą Michał wybiera bardzo mi się podoba.

środa, 15 października 2008

"Dobry projekt" dla typografa oznacza krój pisma opracowany na podstawie klasycznych zasad.

Adrian Frutiger

09:39, kate_mac , cytaty
Link Dodaj komentarz »
niedziela, 12 października 2008

Nie wiem czy robiłam to publicznie ale prywatnie dość gorąco zarzekałam się, że będzie się musiało zdarzyć wielkie halo abym ponownie zrobiła ogólnodostępny szablon 3X. Poprzednie trzyszpaltowe zrobiłam dla samej idei co nie zawsze przynosi dobre rezultaty ale w związku z tym, że bardzo lubię szablon podstawowy także 3X na jego podstawie oceniam pozytywnie. Jednak, tak jak podejrzewałam, 3Xy nie są radykalnie popularne możliwe, że odpowiedzialny za to jest wygląd ale mówiąc szczerze uważam, że trzecia kolumna to bardziej kłopot niż wygoda i tak naprawdę dobrze sprawdza się w prostszych wizualnie projektach więc i każdego nie zadowolę nawet jeżeli połowę robiłabym 3X. Dziś potwierdzenie tej reguły, stosunkowo popularny szablon tym razem w postaci 3X z zakładkami. Żadnego halo nie było czyli muszę bardziej uważać na słowa.


3X - 05 Clean czerwony, przeniesione zakładki

3X - 05 Clean czerwony, przeniesione zakładki,
na starym kodzie, dla blogów na blox.pl. -550px- 


Szablon przeszedł drobną przebudowę gdy w listopadzie 2011 dodawałam mu górne menu. Zasadniczo wszystko zostało po staremu poza szukaczem, który przestał opierać swój wygląd na ilustracji a stał się prawdziwym CSSowym dziełem. W rozwinięciu wpisu wyjaśnię też jak to się stało, że zakładki wylądowały obok archiwum (czyli o kolejnym CSSowym dziele).

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

fragmenty szablon 3X 05

Uwagi o szablonie 3X 05 Clean (typ A) czerwonym z przeniesionymi zakładkami
szerokość szablonu 990px
szerokość części na notkę 560px
szerokość pobocznej szpalty 170px
trzecia kolumna szerokość: 200px
zawiera: bloksowe zakładki
sposób: position:absolute;
kolor tła ciemne (#303030)
kolor tekstu jasny (#FFF8DB)
kolor linków czerwony (#CC6666)
pozostałe kolory ciemnoczerwony (#AE3941), brązowy (#c8bc84)
krój użyty w notce Trebuchet MS
wielkość tekstu notki wartość względna: 1.3em z 62.5% (około 13px)
interlinia w notce wartość względna: 1.5em
maksymalna wielość elementów graficznych w notce 550px
css-owe ramki przy grafikach tak
background:#292929;
border:1px solid #2b2b2b;
padding:4px;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i lewa przerywana ramka
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme spokojnystary kod: 0Etheme spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (szerokość 990px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablon jest bardzo neutralny, pasuje więc do wielu tematów. Proponuję go blogującym o dzieciach, o językach obcych, o komputerach i internecie, o filmie, muzyce, mediach, o motoryzacji... to chyba tyle jeśli chodzi o katalog bloksa.

Przenoszenie zakładek do trzeciej kolumny

Nie będzie wielkich wyjaśnień tylko kilka informacji w wielkim skrócie, czyli jak ja to zrobiłam bez dlaczego tak zrobiłam.

Po pierwsze SZEROKOŚĆ.

Szablon, który poszerzałam miał 770px, był więc wąski. Nie należy przekraczać szerokości 995px (aby zmieścić się z rozdzielczości 1024px) więc dla równego rachunku mój docelowy szablon miał mieć 990px czyli poszerzam go o 220px.

padding:right:220px;990px - 770px = 220px

Zamiast bawić się z szerokościami w szablonie o tak jednolitym tle mogłam od razu poszerzyć ciało bloga poprzez dodanie prawego dopełnienia (padding-right:220px;). Nie tylko poszerza ono bloga ale i od razu nie pozwala, żadnemu z elementów blogowych zająć tego miejsca.

Cały blog jest poszerzony ale są w nim dwie rzeczy, które już absolutnie pozycjonowałam wcześniej czyli kategorie i dodatkowe górne menu. Aby dobrze je umieścić we właściwym miejscu musiałam też określić jakiej są wielkości. Mogę to teraz zostawić po staremu ale skoro blog jest już poszerzony to mogę wykorzystać tą przestrzeń i poszerzyć także te elementy. Dodaję więc moje 220px do istniejących tam wartości tak aby nie przekroczyć 990px.

Po drugie WZGLĘDEM CZEGO ustawiamy.

position:relative;Jeżeli zakładki zamierzasz przenieść w innym szablonie niż Clean upewnij się, że w szablonie jest określony element nadrzędny dla zakładek z właściwością position:relative; czyli z polskiego na nasze zobacz czy przy #BlogGlownyBox bądź #BlogBodyBox jest wpisana ta cecha, jeżeli nie to ją tam dopisz. W przeciwnym razie zakładki będziesz ustawiać nie względem bloga a względem okna przeglądarki (moje miało już różne wymiary począwszy od wspomnianego 1024px, a twoje?).

Po trzecie USTAWIAMY

position:absolute;Wiemy już gdzie będziemy element ustawiać więc do dzieła. Możemy nasz kod dodać na koniec każdego arkusza ale dla porządku odszukajmy w CSS selektor #BlogZakladkiBox. Mój był razem z innymi selektorami opisującymi pudełka w wąskiej szpalcie więc dodałam o poniżej na nowo. Ustawianie należy zacząć od ogłoszenia, ze się będzie ustawiać czyli wpisujemy position:absolute;

top:270px;Od góry moje zakładki muszą być odsunięte na wysokość całego topu, to trzeba sobie zmierzyć albo dojść do tego metodą prób i błędów, zazwyczaj topy zajmują około 200-300px. Ja miałam sprawę ułatwioną bo element RSS ustawiałam absolutnie na takiej wysokości więc tylko skopiowałam wartość top:270px;

left:790px;Od lewej moje zakładki muszę przesunąć o całą szerokość istniejącego uprzednio bloga co ułatwia nam sytuację bo jak pamiętasz blog miał 770px szerokości. Banalnie proste ale... Trochę za blisko siebie są te kolumny z treścią poboczną więc przydałoby się odsunąć zakładki jeszcze troszkę; wpisuję więc left:790px;

width:200px;Zostawia mi to 200px na zakładki i choć najczęściej nie będzie problemu jeżeli tego nie wpiszę to jednak... skąd przeglądarka ma wiedzieć jakiej szerokości są moje zakładki jak jej tego nie powiem? Jak będzie łamać wiersze? Ona sobie jakoś poradzi choć nie zawsze to musi być po mojej myśli więc aby było tak jak chcę wpisuję jeszcze width:200px;


I na koniec alternatywne wzory do body, które decydują o wyglądzie topu. Można sobie wymienić na dowolny plik ale nie powinien być on ani zbyt jasny, ani zbyt wzorzysty - na jego tle wyświetlać się będzie tło tytułu. Szerokość jest dowolna, wzór będzie się powtarzać w poziomie, wysokość natomiast nie powinna przekraczać 200px

tło oryginalne paski odwrotne paski 2x jednolite ze wzorkiem

czwartek, 02 października 2008

Nieobecność jest równie ważna jak obecność.

Adrian Frutiger

10:10, kate_mac , cytaty
Link Komentarze (6) »
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...