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

Wpisy z tagiem: typ A

wtorek, 12 marca 2013

Jeden z pierwszych moich szablonów a na pewno pierwszy w moim stylu, taki którego wygląd odpowiadał mi. W tamtym czasie rzadko używałam krojów szeryfowych ale tu pasował on idealnie. Szablon występował wtedy zarówno w wersji lewostronnej jak i prawostronnej. Po zeszłorocznych przeróbkach zostawiłam ten szablon tylko w wersji prawostronnej ale za to całość przeinterpretowałam na dwa różne projekty. Ten prezentowany dzisiaj zachowuje stary graficzny układ tła ale zmienia zupełnie kompozycję treści.


10 szablon elastyczny, zielony z liściem

Szablon 02 elastyczny, zielony z liściem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Po latach okazało się, że szablony o takim horyzontalnym układzie nieco gorzej znoszą coraz to szersze ekrany. Nic im się złego nie dzieje ale jakoś tak za dużo pustego miejsca dookoła nich. Zmiana tego projektu uwzględnia właśnie tylko wypełnienie tej pustki. Całość podzieliłam na 3-4 kolumny i w miarę poszerzania się dostępnego miejsca kolejne kolumny zaczynają się wyświetlać obok zamiast pod spodem.

sobota, 10 listopada 2012

Co chwilę dodaję jakąś duperelę do moich szablonów i już nawet mnie samej trudno ogarnąć co w którym szablonie już jest a co trzeba dodać. Dzisiejsza duperela to całkiem przydatne górne menu z obrazkami. Ostatnio często dodaję je do szablonów i choć zawsze staram się umieszczać stronę z dokładną instrukcją to myślę, że przyda się i taka notka jak ta dzisiejsza, która wyjaśni jak to zrobić w najprostszej formie.

#menuIkon

Moje ikonkowe menu często są specjalnie stylowane: wtapiają się w tło, powoli zaokrąglają albo zmieniają kolory. Każda z tych rzeczy wymaga innego opisu CSS. Dzisiaj daruję sobie taką szczegółowość i opiszę tylko jak sprawić aby ikonki pojawiły się w wybranym miejscu.

UWAGA! Jeżeli na blogu z którego pobrałaś szablon ikonkowe menu jest widoczne to wystarczy, że w polu na dodatki wpiszesz odpowiedni kod HTML. Skoro ikonki są na blogu z szablonem oznacza to, że ich położenie jest już opisane.

Do stworzenia ikonkowego menu potrzebne będą:

  1. Niewielkie obrazki
    wybrane ikonki dodaj do zasobów bloga
  2. Fragment kodu HTML
    wystarczy prosty kod ilustracji z linkiem otoczony divem o identyfikatorze menuIkon
  3. Odpowiednie stylowanie (CSS)
    trzeba zmienić położeni elementu poprzez cechę position:absolute; i określić nowe położenie względem wybranych krawędzi (top:10px; right:10px;)

Przede wszystkim musisz podjąć decyzję do czego będą linkować elementy z nowego menu i poszukać albo samemu przygotować odpowiednie obrazki. Proponuję zapoznać się z zawartością strony IconArchive, można znaleźć tam prawdziwe skarby, trzeba tylko się upewnić czy licencja pozwala nam je użyć.

Ustal sobie jakiego rozmiaru będą obrazki w tym menu. Niech będzie stały, jednakowy dla wszystkich elementów. Rytm to jedna z cech piękna. Wydaje mi się, że w większości przypadków całkiem odpowiednim rozmiarem będzie 32×32px. Rozmiar dopasuj do stylu szablonu i liczby elementów w menu. Nie przesadzaj z wielkością: to ma być drobne pomocnicze menu a nie logo strony.

Na początek dla przykładu wybrałam bardzo obszerną (436) kolekcję ikon autorstwa dAKirby309 udostępnionych na licencji CC BY 3.0. Są to bardzo proste dwukolorowe wzory prezentujące loga wielu aplikacji, przeglądarek, systemów. W zależności od pomysłu na menu poszukaj sobie odpowiednich dla Twojego bloga ikon. Ja zamierzam stworzyć menu kontaktowo-subskrypcyjne więc potrzebuję podstawowych symboli kontaktu i subskrypcji (via różne serwisy).

Wybrane ilustracje dodajemy do zasobów bloga:

Edycja blogu -> WPISY -> PLIKI -> Nowy plik

Tym razem kod będzie bardzo porosty. Każdy obrazek należy przedstawić w postaci kodu linku. Przy ilustracji konieczny jest atrybut alt a do linku można dodać atrybut title, który dodatkowo wyjaśniał będzie przeznaczenie ikonki. Przykładowo link kontaktowy może mieć w title wpisane zachęcające napisz do mnie.

kod ilustracji z linkiem

Czerwone fragmenty na powyższym przykładnie są niezmienne, każda kreseczka się liczy. Beżowe należy uzupełnić własnymi danymi: adresem strony do której chcesz zalinkować i adresem ilustracji (ikonki) w zasobach twojego bloga.

Gdy przygotujesz taki kod, dla każdej ikonki osobno, całość ubierz w div o identyfikatorze menuIkon. Pozwoli nam to dowolnie dysonować tym elementem. Bez identyfikatora nie mamy jak powiedzieć przeglądarce o co nam chodzi. Teraz gdy nazwaliśmy element (daliśmy mu unikalny identyfikator) możemy go w szablonie wołać po imieniu i ustalić jak ma wyglądać i gdzie ma być położony.

przykładowy kod dla menuIkon

Na powyższym przykładzie czerwone elementy to te kluczowe, które zadecydują o tym, czy będziemy mogli coś zrobić z elementem czy nie. Dowolna zawartość to miejsce na kody poszczególnych ikonek. Całość powinna wyglądać mniej więcej tak: zobacz tekstową wersję przykładowego kodu.

Nowo stworzony kompletny kod wklejamy w polu na dodatki:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

Jeżeli w polu na dodatki masz jakiś kod to nie ma większego znaczenia gdzie wkleisz ten nowy (na początku czy na końcu) o ile nie zrobisz tego w środku jakiegoś innego kodu. Pilnuj aby w polu na dodatki nie było zamieszania. Aby lepiej wszystko widzieć możesz sobie powiększyć pole - kliknij na jego prawy dolny róg i przeciągnij nieco w dół.

Dysponując elementem, który ma konkretną nazwę (identyfikator) możemy z nim zrobić w szablonie wiele różnych magicznych rzeczy. Dla tak prostego elementu jak górne menu wystarczy nam określić położenie.

a. Ustal element względem którego będziesz określać położenie.

Sprawdź jakie są zapisy przy elementach #BlogGlownyBox i #BlogBodyBox, to są dwa nadrzędne dla pola na dodatki elementy. Jeżeli menu dodajesz w szablonie który ja zrobiłam ale w którym nie ma jeszcze opisu takiego menu to jest bardzo duże prawdopodobieństwo, że przy którymś ze wspomnianych elementów będzie wpisane position:relative; Taki zapis określa właśnie nasz element względem którego będziemy opisywać położenie. Sprawdź też czy któryś z tych elementów ma też określoną szerokość. Jeżeli jest to jeden z moich szablonów to zapewne ma.

Jeżeli żaden z wspomnianych dwóch elementów nie ma width to potrzebujesz nieco trudniejszego pozycjonowania względem środka strony. O tym napiszę przy innej okazji. Jeżeli widthwystępuje choćby przy jednym  z wspomnianych selektorów to ok, masz ułatwione zadanie.

Jeżeli, żaden ze wspomnianych dwóch elementów nie ma wpisane position:relative; to dodaj taki zapis do #BlogGlownyBox, zapisz zmiany w arkuszu i sprawdź czy nie spowodowało to jakiś niemile widzianych zmian na twoim blogu. Jeżeli wszystko ok to świetnie. Jeżeli coś nieoczekiwanie zmieniło położenie to skasuj dodany zapis i skorzystaj z nieco trudniejszego opisu określenia położenia względem środka strony.

b. Określ nowe położenie elementu

Jeżeli wszystko jest ok to wystarczy, że na koniec arkusza szablonu wpiszesz kod odpowiedzialny za zmianę położenia elementu:

#menuIkon {
position:absolute;
top:10px;
right:10px;
width:180px;
}

I gotowe. Twój szablon od teraz ma ikonkowe menu.

Położenie ustal biorąc pod uwagę wygląd własnego szablonu. Dla przykładu proponuję przyjrzeć się szablonowi 07 czerwony i czarny. Jest to stary szablon, któremu nie zamierzam dodawać ikonkowego menu. Nad archiwum, w wąskiej kolumnie wyświetla się tam duża ikonka RSS. Jest to świetne miejsce ta takie subskrybcyjne menu więc zamiast jednej dużej ikonki umieszczę tam kilka mniejszych.

Sprawdziłam, zarówno width jak i position:relative; są już wpisane w tym szablonie przy elemencie #BlogBodyBox. Może tak zostać, to bardzo dobre rozwiązanie dla tego szablonu.

Na koniec arkusza dodaję uprzednio przygotowany przykładowy kod i sprawdzam co się stało z moim menu.

Nie jest źle ale kilka rzeczy przydałoby się poprawić nieco. Z szerokością całkiem nieźle się wpasowałam. położenie też jest ok, tylko trochę przesunę całość aby była lepiej ustawiona względem obu krawędzi. Linki w tym szablonie są podkreślone więc to muszę usunąć i na koniec dodam bardzo prosty efekt wtapiania w tło po najechaniu kursorem.

#menuIkon {
 position:absolute;
 top:10px;
 right:0;
 width:177px;
}
#menuIkon a {
 text-decoration:none;
}
#menuIkon a:hover {
 opacity:0.5;
}


Na koniec pozostaje mi tylko ukryć oryginalny przycisk RSS.

#BlogRss { display:none; }

Wybrałam ten szablon jako przykład bo ma wygospodarowane miejsce nad wąską szpaltą. Wystarczy więc ukryć element tam wyświetlający się i już mam miejsce na moje ikonkowe menu. Jeżeli w twoim szablonie brak takiego miejsca to do elementów #BlogWazkaSzpalta, #SkomentujWazkaSzpalta dodaj większy górny margines albo odstęp.


Polecane notki:



ś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

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

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

fragmenty

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

fragmenty

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

fragmenty

Uwagi o szablonie dashed:
niebieskim (04), zielonym (05), czerwonym (06)
szerokość szablonu 770px
szerokość części na notkę 510px
szerokość pobocznej szpalty 190px (+2×15px)
kolor tła 04 niebieski jasne (#dddcd4)
05 zielony jasne (#deddc4)
06 czerwony jasne (#e9e5e0)
kolor tekstu szary (#444)
kolor linków 04 niebieski niebieski (#5769aa)
05 zielony niebieski (#669900)
06 czerwony szary (#ff0022)
pozostałe kolory szary (#96968a), beżowy (#c1c0b5)
krój użyty w notce Trebuchet MS i Georgia (w nagłówkach)
wielkość tekstu notki small
interlinia w notce wartość względna: 150%
maksymalna wielość elementów graficznych w notce 500px
css-owe ramki przy grafikach brak
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3 - powiększenie, szeryfowy krój, brak pogrubienia
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Ethemestary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki zwijane archiwum, avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious, wklejka fotoforum na bloga

dodatkowe klasy i identyfikatory

#menuTop - specjalne menu (nie jest górne tylko wyświetla się w bocznej szpalcie)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

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

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

Ikonkowe górne menu

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

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

Położenie

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

Wygląd ikon

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

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

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

mMail kod dla kontaktu

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

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

mFejs kod dla facebookowego fanpege'u

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

mTwit kod dla twittera

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

mRSS kod dla kanału RSS

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

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

#BlogRss {display:none;}

mNews kod dla newslettera

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

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

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


Mam nadzieję, że powyższy zapis jest zrozumiały. Jasne fragmenty należy zastąpić własną treścią: adresem konta na twitterze, adresem fanpeage'a na facebooku i własnym adresem mailowym do kontaktu. Wpisując kod należy pamiętać o wszystkich znacznikach, nawiasach i cudzysłowach. Każdy znak, za wyjątkiem tych zaznaczonych na jasno powinien znaleźć się w kodzie w dokładnie takiej samej formie.


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