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

Wpisy z tagiem: typ A

środa, 11 kwietnia 2012

Stronność szablonu to mocno niejednoznaczna sprawa. W przypadku starego kodu zawsze polecam prawostronne. To nie tyle kwestia wizualnego układu co praktycznych rozwiązań. Na blogu najważniejsza jest treść i to ona powinna ładować się w pierwszej kolejności (w przypadku nowego kodu stronność nie ma znaczenia bo treść zawsze ładuje się tam pierwsza).


41 szablon Times w kolorze indygo zmieniony na prawostronny

Szablon 41 - Times indygo, ze zmienioną stronnością
na starym kodzie, dla blogów na blox.pl. -550px-


Generalnie stronność to kwesta wyboru ale w przypadku starego kodu bardzo ważnym czynnikiem będzie jednak kolejność ładowania się strony i dlatego dzisiaj jeden z moich szablonów lewostronnych zamienię w prawostronny.

Szybka instrukcja dla każdego szablonu.

1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.

2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.

3. Wracamy do edycji CSS i zastępujemy kod znajdujący się w arkuszu tym który chwile temu skopiowaliśmy. Klikamy zapisz i sprawdzamy na oko jakie problemy się pojawiły. Jeżeli szablon jest prosty i nadaje się do łatwej zmiany stronności i wybraliśmy właściwy szablon podstawowy to do zmiany zostały bardzo nieliczne elementy.

4. Poprawiamy odstępy między szpaltami zmieniając odpowiednio wielkość bocznych marginesów (margin) i dopełnień (padding) przy elementach #BlogSzerokaSzpalta, #BlogWazkaSzpalta, #SkomentujWazkaSzpalta.

Gotowe

Ta sama instrukcja zmieni szablon lewostronny na prawostronny jak i prawostronny na lewostronny. Wystarczy tylko odpowiednio podmieniać marginesy i bazowe kody.

Na koniec notki zwyczajowo udostępniam gotowiec. Polecam

 

Stronność każdego szablonu można zmienić i to w obie strony. Teoretycznie może to być banalnie proste, wystarczy że większość elementów zostanie odpowiednio zaprojektowana. To sprawia jednakże, że niektóre szaleństwa i oryginalne wyglądowo rozwiązania nie zostaną zastosowane. Łatwość zmiany albo mocno pokombinowany wygląd. Zazwyczaj decyduję się na to pierwsze nie chcąc ograniczać użytkowników moich szablonów.

Stronność to relacja prawej strony do lewej. Blogi nie są symetryczne i zresztą nie powinny być, w naszej kulturze czytamy od lewej do prawej czyli w pewnym sensie lewa strona zawsze będzie ważniejsza. Z drugiej strony menu nawigacyjne umieszczone po lewej będzie bardzo dużą zaletą.

Jeżeli mamy wiele rzeczy w wąskiej kolumnie, dużo różnych dodatków, widgetów, wklejek, skryptów a wąska kolumna w szablonie na starym kodzie będzie po lewej to najpierw będą musiały się załadować wszystkie te dodatki a dopiero potem właściwa treść czyli notki. Jeżeli popełnisz jakiś błąd dodając kod html dodatków to przy układzie lewostronnym będzie on wpływał na wszystkie następujące po nim elementy czyli także notki. W najgorszym razie brakujący znacznik w kodzie dodatku spowoduje nie wyświetlenie się wpisów. To są chyba najistotniejsze wad lewostronności.

Za lewostronnymi natomiast przemawia przyzwyczajenie. Mam wrażenie, że różnego rodzaju portale i strony przyzwyczaiły nas do podstawowej nawigacji umieszczonej na lewo od wpisu więc jej tam oczekujemy.

Szablon: typ A Times New Roman

Do dzisiejszej zmiany stronności wybrałam szablon Times New Roman w kolorze indygo. Nie był popularny więc przy ostatnich poprawkach nieco go zmieniłam. Teraz, aby zareklamować jego odnowioną wersję, zdecydowałam się na jego przykładzie pokazać co i jak trzeba zrobić aby zmienić stronność. Górne i dolne tło, zarówno jednolite jak i wzorzyste zrobione jest grafikami. Jego ułożenie w poziomie nie przeszkadza w zmianie.

Początkowo także tło treści było stworzone m.in. dzięki grafice. Bloksowa wąska szpalta to tylko ta część od archiwum do tagów. Pozostałe elementy mają inne nazwy albo nie mają ich wcale. Chcąc dodać tam inne tło trzeba to zrobić element wcześniej a następnie wrócić do oryginalnego koloru w szerokiej szpalcie. Można też po prostu dla całego bloga dodać w tle grafikę powtarzalną w pionie o odpowiednio zmienionych kolorach po lewej i prawej stronie. Grafika jest o tyle niewygodna, że utrudnia wszelkie zmiany w szerokości (poszerzenie, dodawanie trzeciej kolumny, zmianę stronności).

Dlatego poprawiając szablony postanowiłam na nowo opisać ich tło. Wizualnie pod tym względem nic się nie zmieniło ale jeżeli ktoś kiedykolwiek wcześniej próbował coś pozmieniać w tym szablonie to zauważy, że w nowej wersji zmiany są łatwiejsze do edycji.

Jeżeli szablon Times New Roman kopiowałeś już bardzo dawno, jeszcze zanim dodałam obok jednolitego tła wzorki to zanim zaczniesz zmieniać stronność (czy poszerzać albo też dodawać trzecią kolumnę) lepiej ponownie skopiuj szablon. W nowej wersji jest wygodniejszy.

1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.

Przede wszystkim istotne jest aby szablon zachował swój charakterystyczny wygląd a zmienił jedynie stronność. Dlatego zmiany zacząć należy od skopiowania oryginalnego kodu css zmienianego szablonu. W tym celu należy przejść do edycji arkusza CSS:

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

Zaznaczyć cały kod (Ctrl+A) i skopiować go (Ctrl+C). Dla bezpieczeństwa proponuję wkleić go (Ctr+V) sobie do notatnika aby nieopatrznie nie stracić go.

skopiuj kod szablonu

Oczywiście zawsze oryginalny kod szablonu można skopiować bezpośrednio z bloga z szablonem. Wystarczy otworzyć źródło strony (Ctrl+U) i odnaleźć adres zewnętrznego arkusza stylów.

UWAGA
Jeżeli zmieniasz stronność świeżo skopiowanego szablonu to właściwy kod CSS może nie być od razu dostępny. Dlatego po skopiowaniu szablonu należy się wylogować i zalogować na nowo a dopiero następnie przejść do edycji arkusza i skopiować kod. Niemal wszystkie moje szablony zaczynają się od metryczki gdzie podaję nazwę szablonu a także często nazwę szablonu podstawowego.

2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.

Ja zazwyczaj lewostronne robię na bloksowym Białym a prawostronne na Spokojnym. Są one swoimi lustrzanymi odbiciami i je wykorzystałam w serii Times New Roman. Jeżeli jednak zmieniasz inny szablon to zacznij od sprawdzenia jaki szablon podstawowy jest wybrany.

Wybrałeś ten szablon

Niestety w edycji bloga szablony nie są podpisane. Pozostaje Ci po wyglądzie ocenić jak nazywa się wybrany szablon. Dla ułatwienia przygotowałam dwie notki o układach. W jednej z nich umieściłam ilustrację będącą sumą szablonów na starym kodzie tam szablony są podpisane bo zrzut pochodzi ze strony zakładania nowego blogu.

Możesz też zajrzeć do źródła strony i na podstawie adresu dowiedzieć się co to za szablon. W drugiej wspomnianej notce umieściłam wszystkie możliwe nazwy szablonów na starym kodzie więc można łatwo sprawdzić czy domyśliłeś się właściwej nazwy.

Następnie należy dobrać odpowiedni szablon podstawowy o przeciwnej stronności. W drugiej wspomnianej notce jest także odpowiednia tabela ułatwiająca dokonanie wyboru.

tabela szablonó podstawowych

Przeciwieństwem Białego, na bazie którego zrobiłam zmieniany szablon Times będą więc: Spokojny, Almost Spring, Kubrick i Connections. Każdy z nich sprawdzi się równie dobrze. W edycji szablonów podstawowych zmieniamy wybrany szablon na ten o właściwej dla nas stronności.

Edycja bloga -> WYGLĄD -> SZABLONY PODSTAWOWE

3. Wracamy do edycji CSS i wklejamy z powrotem skopiowany kod.

Przechodzimy ponownie do edycji arkusza stylów. Usuwamy znajdujący się tam kod css (Ctrl+A, Delete), jest to kod szablonu podstawowego, zupełnie nam niepotrzebny. Na jego miejsce wklejamy (Ctrl+V) nasz skopiowany kod oryginalnego szablonu. Klikamy zapisz i sprawdzamy efekty. Niewątpliwie kilka rzeczy będzie niezupełnie doskonałych.

4. Poprawki

Przede wszystkim należy zwrócić uwagę na odstępy między szpaltami. Owszem zdarzają się idealnie symetryczne w swych odstępach szablony ale to raczej wyjątki od reguły bo taka symetryczność powoduje drobne problemy przy innych, częściej dokonywanych zmianach. Dodatkowo należy być ostrożnym z wszystkimi elementami pozycjonowanymi bezwzględnie. Jeżeli mają być położone w tej samej pionowej linii co wąska szpalta to mogą mieć częściowo automatyczne położenie ale nie muszą. I na koniec ogólny układ ze szczególnym uwzględnieniem tytułu bloga. Często jest on przesunięty marginesem bądź dopełnieniem aby znaleźć się we właściwym miejscu. Wszystko to należy poprawić choć nie wszystko jest niezbędne, większość tylko zalecana.

konieczne poprawki

A. Odstępy między szpaltami

Zapewne po zmianie wąska i szeroka szpalta będą zbyt blisko siebie. Aby temu zaradzić należy zmienić marginesy (margin) i dopełnienia (padding) obu elementów tak aby to co było po prawej znalazło się po lewej i na odwrót. Right oznacza oczywiście prawy a left lewy ale najczęściej zamiast rozbijać opis marginesów i dopełnień zapisuję je wspólnie dla wszystkich krawędzi. W takim przypadku kolejność jest zgodna z ruchem wskazówek zegara i zaczyna się na dwunastce czyli góra-prawy-dół-lewy.

W przypadku odstępu między szpaltami należy sprawdzić opisy przy trzech selektorach: #BlogWazkaSzpalta, #SkomentujWazkaSzpalta, #BlogSzerokaSzpalta. Najlepiej wykorzystać w tym celu wyszukiwarkę aby mieć pewność, że w dalszej części arkusza nie powtarza się opis danego selektora (szczególnie #SkomentujWazkaSzpalta chętnie umieszczana jest dość daleko w arkuszu).

dopełnienia do poprawki

W przypadku mojego szablonu Times wszystko jest odpowiednio symetrycznie za wyjątkiem dopełnienia w szerokiej szpalcie. Trzeba zamienić prawe dopełnienie z lewym. Poprawiony fragment powinien wyglądać tak:

#BlogSzerokaSzpalta {
 padding: 10px 60px 10px 10px;
}

Po wprowadzeniu zmiany klikamy zapisz i sprawdzamy efekt. Można oczywiście kontrolę przeprowadzić na koniec ale zawsze lepiej drobną pomyłkę wyłapać od razu a nie potem zachodzić w głowę gdzie to też popełniło się błąd.

B. Elementy pozycjonowane bezwzględnie

Staram się w notkach opisujących szablony określać, które elementy są przenoszone absolutnie. Taka informacja przydaje się w kilku sytuacjach związanych ze zmianami. Stety-niestety jest to mój nowy pomysł więc taką informację można znaleźć w zaledwie kilku notkach. Z całą pewność absolutnie pozycjonowane jest górne menu i udawana stopka. Jeżeli jest trzecia szpalta to często jej położenie zawdzięczane jest właśnie pozycjonowaniu absolutnemu (ale nie zawsze). Jeżeli szukacz nie jest bezpośrednio nad opcjami bloksa na dole wąskiej szpalty to również przeniesiony jest bezwzględnie. W określonych sytuacjach zdarzało mi się przenieść także w ten sposób kategorie i zakładki jeżeli miały stanowić trzecia kolumnę. I to chyba tyle, więcej absolutnych eksperymentów nie pamiętam.

W przypadku elementów pozycjonowanych absolutnie należy sprawdzić określenie położenia w poziomie czyli najczęściej left choć czasami zamiast tego right. Jeżeli jest auto to wraz z automatyczną zmianą położenia szpalt także i taki element się przeniesie.

W przypadku mojego szablonu Times wyszukiwarka przeniesiona jest bezwzględnie ale mimo to nie wymaga żadnego poprawiania bo jak widać na załączonym wyżej obrazku sama-się-przeniosła.

automatyczne pozycjonowanie bezwzględne

Jeżeli natomiast przy left (albo right) określone są konkretne wartości (najczęściej w pikselach) to takie określenie położenia trzeba poprawić. W szablonie Times bezwzględne położenie określone w poziomie w pikselach mają tylko elementy dodatkowe. Górne menu będzie więc dobrym przykładem co zrobić w sytuacji gdy przykładowo szukacz zamiast auto miał wpisane 10px.

przykład górne menu

W sytuacji gdy chcemy coś umieścić na szerokości wąskiej szpalty najwygodniejszym rozwiązaniem będzie określenie położenia jako auto i ewentualne powielenie marginesów i dopełnień z selektorów opisujących wąską szpaltę.

Jeżeli natomiast naszym docelowym miejscem jest przestrzeń która umieszczona jest w pionowej linii szerokiej szpalty to tutaj najwygodniejszym rozwiązaniem będą już dokładne piksele. W przypadku tej zmiany szablonu Timesa szeroką szpaltę umieszczamy po lewej więc bardzo łatwo będzie określić ile pikseli od lewej krawędzi mają zaczynać się nasze dodatkowe elementy.

W związku z tym że obie szpalty maja wpisane boczne dopełnienie o wartości co najmniej 10px a chcę umieścić górne menu w tej samej linii to treść zawartą w głównej szpalcie to muszę wziąć to pod uwagę i jeżeli będzie to konieczne to policzyć ile pikseli jest pomiędzy elementem który ma pozycję relative a treścią szerokiej szpalty.

pozycjonowanie bezwzględne lewe w pikselach

W przypadku tego szablonu to bardzo proste.

#menuTop {
 left:10px;
}


Jeżeli korzystasz też z udawanej stopki, która dodaje wzorek także na dole to i ten fragment musisz analogicznie poprawić. Fragment kodu po zmianach ma wyglądać tak:

#uStopka {
 left:auto;
}

C. Tytuł bloga i ogólny układ

Ogólny układ zależy od HTML szablonu podstawowego, który wybierzemy i od tego jak bardzo różnił się on będzie od tego który dotychczas był wykorzystywany w szablonie który zmieniamy. W przypadku szablonu Times nie ma wielu różnic do poprawiania. Jedyną naprawdę istotną jest położenie tytułu i opisu bloga.

Kontener tytułowy bloga zarówno w szablonie Spokojnym jak i Białym zajmuje całą szerokość bloga i umieszczony jest nad obiema szpaltami. Chcąc nad lewą wąską szpaltą wyświetlać wyszukiwarkę musiałam zrobić dla niej nieco miejsca i przesunąć tytuł i opis. Teraz szukacz jest po prawej i tytuł może wrócić tam gdzie zaczyna się jego kontener. Natomiast po prawej muszę dodać dopełnienie aby jeżeli będzie dłuższy niż szeroka szpalta nie chował się pod szukaczem tylko przechodził do kolejnego wiersza.

tytuł bloga

Czyli najprościej rzecz ujmując znów symetrycznie zmieniam boczne marginesy i dopełnienia tylko tym razem w elemencie tytułowym.

#BlogTytulBox {
 padding:0 310px 0 0;
 text-align: left;
 height:150px
}

Ciekawostka. Gdyby nie 10px wpisane jako dopełnienie osobno tytułu i opisu bloga wartości dopełnienia w kontenerze z całą treścią tytułową byłyby analogiczne jak te w górnym menu czyli 320px po stronie gdzie ma być szukacz i 10px po drugiej. Ale że rzecz opisana jest inaczej to te 10px jest odjęte później.


Jeżeli nie chce Ci się bawić w sprawdzanie, szukanie i własnoręczne zmiany to ten szablon jest już przerobiony. Aby skorzystać z gotowego kodu należy:

  1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. 0Etheme - Spokojnyzmienić szablon podstawowy na prawostronny czyli 0Etheme - Spokojny
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem: prawostronny szablon 41 Light, indygo (maksymalna szerokość ilustracji 550px)

Notki na podobne i powiązane tematy:

poniedziałek, 12 września 2011

Małe wspomnienie po latach. Ten szablon przechodził wielokrotnie zmiany, to mój drugi projekt w typie który nazwałam A lecz zupełnie nie mogę sobie przypomnieć dlaczego. Coś kołacze mi się po głowie słowo areas, które tłumaczę jako przestrzeń, sfera, obszar. I taka nazwa nawet by mi pasowała. Ten szablon, podobnie jak pierwszy mój szablon tutaj używany, powstał na podstawie Connetions. Starałam się niewiele zmieniać w wielkościach czy przesunięciu elementów (jak tylko próbowałam wszystko się sypało... ot początki) ale jednak stworzyć zupełnie inną przestrzeń, inaczej podzieloną i sprawiającą bardzo odmienne wrażenie. Stąd też układ horyzontalny i zazwyczaj nieograniczona wizualnie przestrzeń poniżej tytułu. Ten szablon piłkarski to jednak z wielu wizualnych powodów wyjątek od reguły chociaż, de iure, to on zapoczątkował całą serię typu A.


4 szablon piłkarski

Szablon sportowy 04 - piłkarski brązowy,
na starym kodzie, dla blogów na blox.pl. -500px- 


Mimo licznych zmian szablon cieszy się raczej umiarkowaną popularnością. Stworzony jest z właściwych skrawków i czasem zastanawia mnie co z nim jest nie tak... Czy problemem jest towarzystwo w jakim był prezentowany? Zielony szablon piłkarski jest dużo bardziej jaskrawy i rzucający się w oczy. A może to zbyt stonowana kolorystyka? Szablon jest przytłumiony i spokojny, może dla niektórych ponury. Próbuję odkryć jego sekret bo bardzo go lubię, dużo bardziej niż pierwszy piłkarski, który tu zrobiłam.
A może jest trochę niespójny? Jest pełen różnych nietypowych dla mnie elementów...

piątek, 18 grudnia 2009

Christmas lights Icon by Aha-Soft Drugi szablon świąteczny jest już bardziej typowy. Szablon jest jasny i prosty, nie ma w nim większych udziwnień. Jedyne nad czym się zastanawiałam to tło tytułu: tu umieszczone jest w body bloga a więc przyglądając się dokładniej szablonowi należałoby to uznać za błąd bo po wyłączeniu obrazków jasny tytuł znajdzie się na jasnym tle. Poza tym jest całkiem przyzwoicie, wielkość czcionki zostawiłam relatywną więc powinna się skalować nawet w IE choć nie gwarantuje, że wszędzie opisałam ją względnie. Główny motyw graficzny szablonu określiłam jako vintage ale w zasadzie nie jest to bardzo wyczuwalne. Dopiero po przyjrzeniu się pani na zdjęciu można zwrócić uwagę na jej XIX-wieczny ubiór. Jeśli ktoś chciałby zrobić sobie coś bardziej vintage świątecznego to zapraszam do sięgnięcia po Vintage Holiday Crafts.

świąteczny 08 - vintage
świąteczny 08 - vintage

Uwagi:

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, tylko RSS jest na stałe. Jeżeli zaś chcesz je to zapraszam do dalszej części notki, wszystko wyjaśnię.

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

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

#mMail, #mFejs, #mTwit - identyfikatory górnych ikonek

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

Ikonkowe górne menu

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

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

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

mTwit mFejs mMail

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.


niedziela, 22 lutego 2009

Rzadko robię szablony w których krojem do pisania notek jest czcionka szeryfowa. Z tego powodu m.in. postanowiłam wykorzystać całkiem dobry wzór jakim jest szablon Times New Roman i powielić go w kilku wersjach kolorystycznych. Już w pierwszej notce są dwa ale w gruncie rzeczy dość podobne do siebie: intensywne, kolorowe.


42 szablon granatowy
Szablon 42 Times, granatowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



43 szablon granatowy
Szablon 43 Times, czarno-turkusowy,
na starym kodzie, dla blogów na blox.pl. -550px-



44 szablon granatowy
Szablon 44 Times, żółto-fioletowy,
na starym kodzie, dla blogów na blox.pl. -550px-



45 szablon granatowy
Szablon 45 Times, bordowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



Szablony pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.

niedziela, 30 listopada 2008

Nowy szablon na bloga utrzymany jest w jasnych kolorach. Ma bardzo prosty wygląd i jedynymi cechami, które go wyróżniają są krój Times New Roman (szablon z serii typograficznie) i dwa intensywne kolory dla ozdoby. Przygotowałam go na razie w dwóch wersjach kolorystycznych (obie intensywne) i różnych stronnościach (układach).


40 szablon oliwkowy

Szablon 40 Times, olowkowo-bordowy,
na starym kodzie, dla blogów na blox.pl. -550px- 



41 szablon indygo

Szablon 41 Times, indygo-magentowy,
na starym kodzie, dla blogów na blox.pl. -550px- 



Szablony te wygląd mają raczej uniwersalny i oszczędny. Pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.

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.

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

 
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 CSS zewnętrzne strony (głównie podręczniki)
CSS dla średnio zaawansowanych
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
Related Posts Plugin for WordPress, Blogger...