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

szablony z dedykacją

poniedziałek, 25 lutego 2013

Dawno nie było tu wpisu o szablonie dedykowanym. Nie dlatego, że już takich nie robię, wprost przeciwnie z chęcią przyjmuję propozycje współpracy, szczególnie takie, które wymagają ode mnie więcej niż jestem przekonana że potrafię. To jednak wymaga zaufania - nie każdy zdecyduje się kupić kota w worku a i ja nie każdemu mojego kota będę gotowa powierzyć...

Blogerzy Dla Korczaka - blog prezentujący rezultaty konkursu

Nie o kotach w worku jednak dzisiaj. Dzisiejszy wpis jest o szablonie, który uporządkowałam dla Danusi z bloga Książki Zbójeckie. Danusia zorganizowała w zeszłym roku wspaniały konkurs: Blogerzy dla Korczaka. Udało jej się coś niesamowitego, coś co moim zdaniem trochę wykracza poza granice naszych przyzwyczajeń i oczekiwań. Zorganizowała konkurs, pozyskała sponsorów, wsparcie patronów honorowych, poświęciła temu projektowi sporo czasu i uwagi.

 

Chociaż nie brałam udziału w konkursie i nie reklamowałam go w trakcie trwania to chciałam wesprzeć jakoś pomysł. Gdy Danusia poprosiła mnie abym zerknęła na blog konkursowy i sprawdziła szablon bo po zmianach coś tam nie jest tak równo jak autorka by chciała to oczywiście zgodziłam się. Zerknęłam i przypomniał mi się plakat konkursu. Pomyślałam, że bardzo łatwo będzie powtórzyć wygląd z plakatu na blogu. A że miałam od Danusi zupełnie wolną rękę jeżeli chodzi o zmiany to dwa dni później szablon niewiele miał wspólnego z Kubrickiem.

szczegóły szablonu Blogerzy Dla Korczaka

Motyw przewodni

Zarówno zdjęcie Korczaka jak i tło dookoła bloga było już w szablonie. Etykiety laureatów również były już stworzone i dodane w notkach. Istniał też plakat w informujący o konkursie. Postanowiłam podążyć tym tropem i pozmieniać elementy szablonu tak aby wyglądały jak te na plakacie. Nie było to wcale trudne bo plakat wykorzystuje tylko kilka charakterystycznych rzeczy: afiszowy krój, pomarańczowo szara kolorystyka, ziarniste papierowe tło, duże zdjęcie...

Krój (czcionka/font)

Jeden z najpowszechniejszych afiszowych krojów: Impact. Jest to krój posiadający bardzo grube kreski, wąskie światła między literami i oczka samych liter, dużą wysokość-x, czyli wysokość małych liter (nie posiadających wydłużeń), sięga ona nawet 3/4 wysokości pisma. Wydłużenia górne i dolne są niewielkie a krój przeznaczony jest w zasadzie wyłącznie do nagłówków. I w takim właśnie celu pojawił się w szablonie bloga Blogerzy dla Korczaka.

#BlogTytulText,
#BlogKategorie, #SkomentujBoxEtykieta, #BlogWpisPoprzedniNastepnyBox,
#BlogKategorieWybranaTytul,
.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul,
.BlogWpisTresc h3, .TrescKomentowanegoWpisu h3, .WstepKomentowanegoWpisu h3, #StatycznaZawartosc h3,
.BlogWpisTresc h4, .TrescKomentowanegoWpisu h4, .WstepKomentowanegoWpisu h4, #StatycznaZawartosc h4,
.IPTkategoria, .IPTkomentuj, #PolecWpisStrKom, .SkomentujDodajKomentarzLink, .SkomentujDodajKomentarzLinkPodLista,
#ArchiwumTytul, #BlogAutorzyTytul, #BlogTytulBoxaOstatnichWpisow, .TytulFolderaZakladek, #BlogChmuraTagowTytul,
#SkomentujTytListyKomentarzy, #SkomentujTytListyTrackBack,
#BlogStronicowanieBox {
 font-family:Impact, Corbel, Arial, sans-serif;
}

To są wszystkie miejsca w których krój Impact pojawia się w tym szablonie. To co kto uzna za etykietę tytułową jest trochę rzeczą względną i zależną od otoczenia w jakim się pojawi. W moim pomyśle to były właśnie etykiety wymagające solidnego wyróżnienia.

Kolorystyka

Pomarańczowy i pełna skala szarości pochodzą z plakatu. Bordowy pojawił się na etykietkach laureatów i w tle bloga. Z tła pochodzą też odcienie brązu.

paleta kolorów z bloga Blogerzy dla Korczaka

  • #ae1609 - bordowa czerwień została wykorzystana do wyróżnienia linków: tytuły notek, kategorie, linki w tekście, 'dodaj komentarze'...
  • #e57200 - pomarańczowy pojawia się jako tło etykiet w wąskiej szpalcie a także jako :hover linków (zmiana koloru po najechaniu na link kursorem); jest to także kolor separatora
  • #a65504 - jasny brąz pojawia się tylko raz, jako kolor tła w sytuacji gdy grafika nie zostanie wczytana
  • #8b4000 - brązowe są cytaty zarówno te blokowe jak i zagnieżdżone w tekście; także część śródtytułów (h4) ma kolor brązowy
  • #000000 - czarny pojawia się sporadycznie, jest pod zdjęciem Korczaka, wyróżnia wybraną kategorię wpisów a także metryczkę autora notki konkursowej (nazwę autora i bloga)
  • #333333 - ciemny szary to podstawowy kolor tekstu (czarny bywa czasem zbyt jaskrawy dla tekstu treści, w przeszłości było to szczególnie męczące)
  • #cccccc - jasny szary pojawia się w postaci kreseczki pod metryczką we wpisie a także nad i pod tagami na stronie z pojedynczym wpisem i w komentarzach
  • #ffffff - biały jest kolorem tła tekstu a także tekstów na pomarańczowym czy szarym tle (etykiety w wąskiej szpalcie, tytuł bloga)

Ilustracje użyte w tle

Jak już wspomniałam ilustracje na blogu już były. Zdjęcie Korczaka powiększyłam tylko o ziarniste tło aby tytuł bloga nie wylądował na brodzie Doktora. Tło w body natomiast jest jednym dużym, nieruchomym plikiem graficznym.

Szczegóły i drobiazgi

Chociaż o wyrazistości szablonu decydują właśnie wyżej wspomniane elementy: afiszowa czcionka, wyraziste kolory, konkretne grafiki to jest też w nim dużo szczegółów i drobiazgów, które sprawiają że całość się klei i gra.

Szczegóły związane są już bezpośrednio z blogiem i treściami na nim publikowanymi. Mogą pasować na wielu innych blogach ale trudno mi decydować się na takie rozwiązania w ogólnodostępnych szablonach.

Informacje pod notką (IPT)

W szablonach na starym kodzie informacje pod notką składają się z: czasu publikacji notki, loginu autora, który dodał notkę na blogu, nazwy kategorii będącej linkiem, słowa link przenoszącego do strony z pojedyncza notką i frazy dodaj komentarz przenoszącej odpowiednio na stronę komentowania albo stronę z komentarzami. Dodatkowo są jeszcze opcjonalne trzy elementy: lista tagów, link więcej gdy notka podzielona jest na wstęp i treść i link do części TrackBack jeżeli jest włączona i został dodany TrackBack.

Tego jak ukrywać niemile widziane elementy IPT nauczyła mnie lata temu Irytek i niewiele więcej w tej sprawie trzeba wiedzieć. Trzeba tylko mieć prosty pomysł.

IPT bloga Blogerzy dla korczaka

Wykonanie też jest całkiem proste tylko wymaga trochę więcej literek niż w słowie 'proste'.

.BlogWpisInfo {
 clear:both;
 margin:2em 0;
 text-align:center;
 color:#fff;
}
.BlogWpisInfo br, .IPTczas, .IPTautor, .IPTlinkuj , .infoTagi {
 display:none;
}
.IPTkategoria, .IPTkomentuj {
 padding:0 1em 0 0;
 font:1.4em Impact, sans-serif;
}
.facebook-like {
 margin:1em 0;
}

Najważniejsze jest display:none; które ukrywa niechciane elementy: godzinę, login, słowo link, tagi. Zostają teraz już tylko nazwa kategorii (jeżeli kategoria jest dodana),  link dodaj-komentarza i przecinki które rozdzielały schowane już elementy. Przecinki łatwo schować dodając całemu elementowi kolor tła. Nieschowane linki i tak będą widoczne bo linki mają kolor osobno opisany. Zostaje teraz już tylko zadbać o odpowiednie odstępy i wielkość linków.

To IPT (informacje pod tekstem, info) na stronie głównej. Na stronie z pojedynczą notką pojawiają się inne elementy i inaczej należy je opisywać. Porównaj część informacyjną na stronie głównej i stronie z pojedynczą notką: Jednolity wygląd wpisów (strony statycznie nie mają żadnego info).

Metryczka we wpisie

To jedna z tych bardzo specyficznych rzeczy. Po pierwsze trzeba znaleźć jakiś sposób na wyróżnienie kodu metryczki. Ze względu na treść metryczki i konieczną prostotę rozwiązania wybrałam nagłówek piątego stopnia (h5). Zazwyczaj w notce na blogu wystarczą dwa stopnie śródtytułów więc spokojnie mogę wykorzystać h5 do własnych celów. Śródtytuły łatwo dodawać bo w edytorze jest do tego celu specjalne menu. U siebie na blogu do takiego wyróżnienia zazwyczaj używam odpowiednich klas (nie zawsze informacje wyróżnione są ważniejsze niż treść a do tego przydatne są różne sposoby wyróżnienia).

h5 z bloga Blogerzy dla Korczaka

Dysponując możliwością wskazania konkretnego tekstu (tutaj metryczki) mogę w szablonie zdecydować o jego wyglądzie. Ze względu na centrowanie tytułów stworzyłam wyśrodkowany element używający większego rozmiaru tekstu, ciemniejszego koloru, sporej pustej przestrzeni dookoła i jasnej kreseczki nawiązującej do innych rozdzielaczy na blogu.

.BlogWpisTresc h5, .TrescKomentowanegoWpisu h5, .WstepKomentowanegoWpisu h5, #StatycznaZawartosc h5 {
 margin:1em 2em;
 padding:1em 0;
 text-align:center;
 font-weight:normal;
 font-size:1.2em;
 color:#000;
 border-bottom:2px solid #ccc;
}

Ilustracje w notce

W miarę upływu czasu coraz mniej chętnie opisuję wygląd ilustracji w notce. O ile lubię jak mają jakąś ramkę, czy to faktycznie konkretny obrys czy też zalewie nieznaczny cień, o tyle wydaje mi się, że to powinno zależeć od charakteru bloga, jego tematyki i dopiero na końcu reszty elementów szablonu. Dodatkowo nie wszystkie ilustracje na blogu dobrze wpasują się w ramki.

Na blogu Blogerzy dla Korczaka w notkach są dwa rodzaje ilustracji:

  • typowe, ilustrujące treść notek; są różnego typu i wielkości, pochodząc z różnych blogów mają też często wymiary przekraczające przestrzeń przewidzianą na ilustracje w tym szablonie
  • unikalne etykiety wyróżniające nagrodzone wpisy, są bardziej częścią wyglądu, ozdobą niż rzeczywistą treścią notki; jednocześnie de facto są niczym innym jak ilustracją w notce.

Obie te grupy ilustracji w notkach wymagają specjalnego podejścia korygującego niemile widziane zmiany.

Maksymalna wielkość ilustracji w notce

Najprościej jest sprawić aby wszystkie ilustracje na blogu wpasowywały się w dostępne im miejsce. Małe ilustracje zachowają swoją wielkość. Te natomiast, które w normalnych okolicznościach wystawałyby poza przydzieloną im przestrzeń zostają przeskalowane. Najistotniejsze jest w tym przypadku aby nawet pomniejszone zachowały swoje proporcje.

img {
 max-width:100%;
 height:auto;
}

W żaden sposób taki opis w szablonie nie ingeruje w rzeczywistą wielkość ilustracji. Ona w dalszym ciągu ma swoje wymiary i rozmiar, została tylko przeskalowana przy wyświetlaniu.

Tyle jeżeli chodzi o wielkość. Do ozdoby i wyróżnienia ilustracji w tym szablonie użyłam nieznacznej wielkości cień. Pojawia się on tylko przy ilustracjach w notce.

.BlogWpisTresc img, .TrescKomentowanegoWpisu img, .WstepKomentowanegoWpisu img, #StatycznaZawartosc img {
 box-shadow:0 0 5px #666;
}

cień pod ilustracją

Brak cienia przy wybranych ilustracjach

Cień to całkiem delikatna ozdoba ilustracji ale są sytuacje gdy ilustracja lepiej wyglądać będzie gdy bez wyraźnych granic wtopi się w tło. Tak było w przypadku etykiet na blogu konkursowym.

etukieta wyróżnienia

W takiej sytuacji są dwie możliwości. Po pierwsze można usunąć formatowanie bezpośrednio przy ilustracji. Dodając grafikę do notki w oknie edycji wyświetla się także możliwość dodania specyficznych stylów. To dobre rozwiązanie w przypadku pojedynczego elementu i niezmiennej strony. Tutaj zapewne by się sprawdziło ale drugie rozwiązanie jest po prostu lepsze.

Dodając taką specjalną ilustrację, przechodzę do edycji kodu html i dodaję jej specjalnie wymyśloną klasę smll. W szablonie opisuję ją kasując typowy opis wyglądu ilustracji dla danego szablonu (tutaj jest tylko cień).

img.smll {
 box-shadow:none;
}

Dzięki temu że wpisałam to w szablonie a nie przy każdej ilustracji to nawet przy zmianie szablonu czy tylko zmianie wyglądu ilustracji zawsze mogę ten wygląd skasować dla tych właśnie grafik oznaczonych klasą smll.


I to już chyba wszystkie ciekawostki związane z szablonem na blogu Blogerzy dla Korczaka. Z omawianymi tu rzeczami związane są wpisy:

niedziela, 01 marca 2009

Wczoraj miał premierę nowy wygląd bloga mojewypieki.blox.pl. Jest to już druga moja ingerencja na blogu Doroty, w maju zeszłego roku instalowałam na blogu różowy, nieco landrynkowy wygląd. Dorota stwierdziła, że pora na wiosenne porządki, dała mi wolną rękę w kwestii wyglądu bloga i tak oto powstał nowy szablon. Tych którzy jeszcze nie widzieli zapraszam do zerknięcia.

Moje wypieki szablon

Tradycyjnie zacznę od kolorów. Początkowo blog miał nieć cytrusowy wygląd, podstawowymi kolorami miały być ciepła zieleń i pomarańcz (przyznam się, że kolory te wydają się być raczej trudne ale zdarzają się całkiem udane połączenia). Stanęło na czekoladowo-śmietankowej kolorystyce. Przyznam się, że kolor tła jest rodzajem kompromisu pomiędzy moją intensywnie zielona propozycją a tym co najbardziej spodobało się Dorocie czyli lodwo-niebieskim tłem. O tym dlaczego szukałyśmy kompromisu napiszę kiedy indziej a teraz pora na kolory.

F5EDD5EBDCA5997753322117F3333A700007565562A211A
#F5EDD5
#EBDCA5#99775
#332211
#7F3333
#A70000
#756556
#2A211A

Układ bloga jest trzyszpaltowy, w zasadzie bardzo podobny do poprzedniego. Na blogu pozostały działające tam już wcześniej skrypty czyli: zwinięte archiwum w wersji zaproponowanej przez Szymona, zakładki zwinięte są skryptem Eskey’a – tym razem rozwinięte pozostały dwa foldery i dodatkowo wykorzystana jest możliwość wyświetlania zakładek także na stronie z pojedynczą notką. Wyróżnienie komentarzy autora dokonane zostało skryptem popełnionym przez e-maupa. Do wyróżnienia wykorzystane zostało ciasteczko, które już od dawna było na blogu jako favikona, następnie pojawiło się także w winiecie a tym razem jego rola nieco się zmniejsza za to ciasteczko nabrało odrobinę bardziej stylowego wyglądu . I ostatni, chyba najpopularniejszy na bloksie skrypt czyli ostatnie komentarze. Oczywiście autorstwa Szymona.

Jak widać skrypty nie uległy zmianie za to na blogu przybyło kilka elementów zapisanych w najprostszy ze sposobów czyli poprzez html. Pojawiło się klasyczne poziome menu w którym skumulowane są linki dotyczące bloga ogólnie: powrót na stronę główną, link do informacji o blogu i jego autorce, kontakt i księga gości. Drugim elementem są Popularne przepisy. Przydałby się skrypt który generowałby taką listę automatycznie, np. na podstawie listy komentarzy ale dzięki temu że selekcji przepisów dokonałyśmy same można było wyeliminować nie całkiem adekwatne notki (najwięcej komentarzy ma oczywiści wpis będący wprowadzeniem do koncertu życzeń czytelników). Trzecią nową listą jest spis treści. Dla bloga z przepisami bardzo ważna jest możliwość sprawnego znalezienia tego czego się szuka. Dlatego też zamiast linkowa do kategorii odnośniki prowadzą do stron statycznych na których Dorota 'własnoklawiszkowo' sporządziła listy przepisów. Przedostatni nowy element to wyszukiwarka google. Wbrew odczuciu niektórych czytelników na blogu była także wcześniej wyszukiwarka – tradycyjna bloksowa w tradycyjnym bloksowym miejscu czyli tylko na stronie głównej pod wąską szpaltą. Tym razem przeprowadzając drobne testy Dorota zdecydowała się na google. I zdecydowanie ostatni nowy element to miejsc na reklamę.

1 25  4

3 76  8

niedziela, 01 lutego 2009

Szablon dla budowniczych to jedna z tych rzeczy którymi zajmowałam się ostatnio z doskoku. Z Anią umówiłyśmy się już dawno, że zrobię budowniczym nowy wygląd. Kiedy to było nie powiem bo aż wstyd się przyznać jak dawno. Wreszcie w trakcie świąt udało się zdobić ogólny zarys szablonu a ostatnio go skończyć tak więc od kilku dni u budowniczych można oglądać poza zdjęciami z budowy także nowy szablon.

Teren budowy, wsztęp wskazany

Kolorystyka bloga obraca się wokół dwóch barw: wyrazistej czerwieni i dość charakterystycznej szarości. Trudno powiedzieć jaka była ogólna koncepcja szablonu na początku gdyż całość bardzo rozciągnęła się w czasie i coś o czym mówiłyśmy na początku przez długi czas potem było nieaktualne by na koniec powrócić. W każdym bądź razie takie odnoszę wrażenie.

#332211 #444444 #61564D #6B5F56 #994433 #D20000 #ffffff

Ania początkowo prosiła o szablon pasujący do stylu z plakatów budowniczych petrelu. Raczej tego celu nie osiągnęłam z wielu różnych przyczyn na omawianie których szkoda tracić czas. Szablon oparłam na projekcie top 07 - New Tech Earth stąd też i ten bardzo wyrazisty czerwony. Dlaczego akurat na tym? Przede wszystkim dlatego, że to był szablon z którego budowniczowie korzystali gdy Ania do mnie napisała. Mimo iż szablon różni się od New Tech Earth to mimo wszystko zachował w sobie sporo klimatu pierwowzoru.

Drugim elementem „klimatotórczym” tył tytuł bloga który postanowiłam potraktować dosłownie stąd też  na blogu trzeba uważać by nie potknąć się o deski czy ubrudzić farbą.

Na blogu jest kilka dodatków o które prosili budowniczowie lub które poleciłam jako w miarę proste rozwiązanie. Przede wszystkim stworzyłam miejsce z linkami dla chętnych do zapisania się na subskrypcję. Przydałoby się na bloksowych blogach jedno miejsce gdzie można by znaleźć informacje o blogu czy jego autorze. Drugą rzeczą było zwinięcie archiwum. Nie było to konieczne gdyż budowniczowie piszą zaledwie cztery miesiące niemniej jednak przyzwyczaiłam się do takiego właśnie wyglądu archiwum. Dalej poszły dwa specyficzne dodatki, po pierwsze agregator newsów ze stron o tematyce budowlano-wnętrzarskiej, po drugie wklejka z fotoforum.

Agregator dodawałam już wcześniej – to jest ten sam skrypt co u Maćka Kuźmicza na blogu. Z fotoforum miałam styczność po raz pierwszy i choć generalnie wklejce zarzucić nic nie mogę (nie znam się) to jednak przeszkadzało mi oczywiście, że wygląd ma już zdefiniowany tak więc kilka klików w klawiaturę zmieniło nieco tytuł wklejki (przy okazji wydaje mi się, że od linku do strony głównej FotoForum ważniejszy powinien być link do albumu budowniczych ale nie w postaci +więcej).

No i to by było na tyle jeśli chodzi o budowniczych. Nie pozostaje mi nic innego jak zachęcić was do śledzenia poczynań Ani i Wojtka.

1 2 3 6
5 4 7 8
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.

poniedziałek, 29 września 2008

Skórka dedykowana na wyłączność dla swiatinaczej.blox.pl powstawała długo i z przerwami. Jeszcze w lipcu pojawiła się ogólna koncepcja niemniej sezon wakacyjny nie sprzyja zgraniu terminów szczególnie gdy twój świat nie ogranicza się jedynie do jednego miasta, kraju czy kontynentu… Ale udało się, po wielu tygodniach zostawiając w oddali liczne pomysły powstał nowy wygląd swiatatinaczej.blox.pl

świat inaczej

Dzisiaj polecam oczywiście przyjrzenie się nowemu wyglądowi bloga Maćka Kuźmicza ale nic nie szkodzi na przeszkodzie aby zostać jego stałym czytelnikiem. Blog jest ciekawy, autor pisze o zagranicy jaka rzadko pojawia się na pierwszych stronach gazet i robi to w sposób bezpośredni i niewymuszony. Czytam od kilku miesięcy więc serdecznie polecam.

Wracając jednak do szablonu…

160D10442222665555333333BA1125CEBCBAeeddccFFFFFF
#160D10
#442222
#665555
#333333
#BA1125
#CEBCBA
#eeddcc
#FFFFFF
Kroje wykorzystane w szablonie to przede wszystkim Arial. Można mieć o nim różne zdanie mnie przekonuje bardo jako krój czytelny i ładny. Ma ładniejsze wielkie litery w porównaniu do Tahomy czy Verdany.

Podstawą projektu był układ trzykolumnowy. Maćkowi zależało na dołożeniu do bloga kilku istotnych elementów i to w zasadzie był powód zmiany wyglądu. Pierwszym dodatkowym elementem jest Świat Inaczej TV czyli okienko z filmikami. Choć samo w sobie takie okienko to prosta rzecz to jednak właśnie ono zadecydowało o wyglądzie reszty bloga. Podstawowa trudność polegała na znalezieniu optymalnego rozmiaru który zapewni filmikom dobrą widoczność (jakie słowo określa czytelność w odniesieniu do filmów? hmm…) a jednocześnie nie zdominuje całego bloga. Ostatecznie to właśnie proporcje pomiędzy wszystkim trzema szpaltami i konieczność zmieszczenia się w szerokości 995px okazały się być najtrudniejszym elementem nowego wyglądu Świat Inaczej.

Na blogu wykorzystywane są skrypty zmieniające nieco jego wygląd i dodające nowe elementy. Przede wszystkim nowy dla mnie skrypt agregujący zajawki wpisów z innych stron. Coś jak blogfrogowe wklejki ale z możliwością poczytania o trochę odleglejszych światach. Skrypt podpowiedział mi Eskey, który kiedyś na niego trafił i teraz był tak miły, że podzielił się swoimi zakładkami. W chwili obecnej tego nie widać ale na blogu jest też zwinięte archiwum w postaci zaproponowanej przez Szymona. Do wyświetlania zakładek na stronie z pojedynczą notką wykorzystany został skrypt Eskey'a do zwijania zakładek z tym że tym razem podobnie jak w przypadku TybetWatch zakładki są prezentowane w postaci rozwiniętej. I ostatni, mój ulubiony i chyba najpopularniejszy skrypt czyli ostatnie komentarze. Oczywiście autorstwa Szymona.

swiat_01 swiat_02 swiat_02 swiat_04

swiat_03 swiat_06 swiat_08 swiat_05

Zapraszam więc do spojrzenia na Świat Inaczej

niedziela, 22 czerwca 2008

Camp zbliża się wielkimi krokami, w czwartkowy wieczór na Helu spotka się liczna grupa blogerów aby od sobotniego poranka blogowac przez 24 godziny.

camp_blog

Nie jestem autorką grafiki do tego bloga. Nagłówek otrzymałam w nieco innym kształcie i miałam dostosować do niego resztę szablonu. W związku z istnieniem konkretnej i dość charakterystycznej grafiki reszta elementów szablonu musiała zostać dopasowana do niej. Wybór kolorów był więc oczywisty. Aby całość była nieco bardziej dynamiczna tło body zrobiłam ciemne.

9CD5D8
5BB8BF1F9399444444333333eebb22FEE392
#9CD5D8#5BB8BF
#1F9399
#444444
#333333
#eebb22
#FEE392

Kroje wykorzystane na blogu to czcionki bezszeryfowe Trebuchet MS w nagłówkach i Verdana w treści aczkolwiek krój wyświetlany w notce może być inny ze względu na możliwość jego wyboru w edytorze. Podstawową trudnością w projektowaniu wyglądu bloga grupowego jest fakt iż pisać na nim będzie wiele osób o różnych zwyczajach. Wydawało mi się, że cel osiągnęłam. Praktyczne użycie szablonu udowodniło mi po raz kolejny, że nie mam racji i nie da się przewidzieć wszystkich zwyczajów piszących. Tym razem nie przewidziałam osoby, która w notce używa CSS :D i teraz to ja zupełnie nie wiem o co chodzi.

01 04 08 02

03 07 06 05

Jedziemy na Hel ;)

poniedziałek, 05 maja 2008

Wczoraj miał premierę nowy wygląd bloga mojewypieki.blox.pl i dzisiaj śpieszę donieść iż to moja skromna osoba miała przyjemność szablon ten stworzyć. Na chwilę obecną reakcje są w większości pozytywne więc chyba można uznać, że cel został osiągnięty. Zapraszam więc do obejrzenia szablonu bloga Doroty - Moje wypieki.

wypieki

Tradycyjnie zacznę od kolorów. Wymyśliłam sobie biszkoptowy wygląd stąd też kolory pojawiające się na blogu miały kojarzyć się właśnie z biszkoptem. W pierwszej wersji nawet litery tytułu miały biszkoptowy wygląd ostatecznie jednak napis ma wygląd… czekoladowy. Początkowa paleta obejmowała znacznie więcej barw niż te które tu prezentuję ale jak wielokrotnie już pisałam mam problem z używaniem różnorodnych barw i zazwyczaj ograniczam się do kilku odcieni jednego koloru.

90816E
FFCC99
D7A98FE8C5B1FCF0E2
#90816E
#FFCC99#D7A98F
#E8C5B1
#FCF0E2
999999
4F7D95966B58553D33
#999999#4F7D95#966B58#553D33

Układ bloga jest trzyszpaltowy. Dorocie zależało na szerokim nagłówku, ja zaproponowałam trzecią szpaltę i tą drogą doszłyśmy to wyglądu w którym wąskie szpalty występują po obu bokach szpalty z treścią. To wymagało nowego technicznego rozwiązania problemu trzeciej szpalty. Dotychczas przesuwałam ją marginesem w prawo w tym przypadku przesunięcie w lewo nie dało oczekiwanego rezultatu (a właściwie dało tylko w każdej przeglądarce nieco inny). Dlatego też do umieszczenia trzeciej szpalty wykorzystałam pozycjonowanie absolutne w ramach elementu wypozycjonowanego relatywnie (więcej na ten temat można przeczytać na cssmonkey.blox.pl). W takim przypadku oczywiście szpalta z treścią nie może być przesunięta poprzez padding w BlogBodyBox ale użycie margin przy szerokiej szpalcie zadziałało właściwym przesunięciem więc takie rozwiązanie jest dużo wygodniejsze niż to które poprzednio stosowałam.

Na blogu wykorzystywane są skrypty zmieniające nieco jego wygląd. Przede wszystkim skrypt Debergeraca umożliwiający wyświetlanie spisu treści – rzecz bardzo przydatna a nawet niezbędna na blogu z przepisami. Przyznam się, że nie mam pojęcia o działaniu tego skryptu i nie chodzi mi tu o sprawy techniczne tylko raczej o zwykłe funkcjonowanie. Na szczęście nie przeszkadza to zbytnio w opisaniu wyglądu. Zwinięte archiwum w wersji zaproponowanej przez Szymona już stosowałam. W zasadzie skopiowałam CSS zaproponowany przez Szymona zmieniając jedynie kolory. Zakładki zwinięte są skryptem Eskey’a – wykorzystałyśmy tu druga wersję skryptu, która jest bardziej mobilna w porównaniu do pierwszej. Wyróżnienie komentarzy autora dokonane zostało skryptem popełnionym przez e-maupa. Do wyróżnienia wykorzystane zostało ciasteczko, które już od dawna było na blogu jako favikona. I ostatni, chyba najpopularniejszy na bloxie skrypt czyli ostatnie komentarze. Oczywiście autorstwa Szymona.

1 8 7 3

6 5 2 4

A teraz smacznego i zapraszam do internetowej kawiarenki Doroty

piątek, 18 kwietnia 2008

Monia skontaktowała się ze mną pierwszy raz w styczniu. Chciała zrobić własny szablon dla bloga o chorym synku. Po kilku tygodniach prób doszła do wniosku, że sama nie jest w stanie osiągnąć efektu który by ją zadowalał dlatego też poprosiła mnie o pomoc. Zapraszam więc dzisiaj do obejrzenia szablonu zrozumiecswiatautyzmu.blox.pl

autyzm_szablon

Monia poprosiła o szary szablon ze zdjęciami jej syna. Czytając teraz pierwsze maile zdaję sobie sprawę, że prawdopodobnie rozminęłam się z jej oczekiwaniami ale szablon podoba się (w każdym bądź razie Monia zapewnia że tak jest ;) więc ok.).

Jako podstawową paletę barw wybrałam różne odcienie niebieskiego. Tym razem jest to nieco poszarzony odcień o różnym natężaniu i jasności.

599897
37686E244347484848
999999b7c9cbF2F5F5
#599897 #37686E #244347 #484848 #999999 #b7c9cb #F2F5F5

Dość nietypowo jak dla mnie nie zrobiłam szerokiego nagłówka. Część tytułowa bloga stanowi zaledwie połowę szerokości – połowę która jest przeznaczona na szeroką szpaltę. O charakterze szablonu decyduje przede wszystkim istnienie fragmentu nieruchomego – specyficznej trzeciej szpalty umieszczonej po prawej która bez względu na przewijanie bloga pozostanie na swoim miejscu. Kolorystycznie analogiczną do części zdjęciowej jest wąska szpalta zaczynająca się od samej góry, dużo wyżej niż kategorie i początek treści.

Drugim elementem charakterystycznym jest czcionka udająca pismo ręczne która począwszy od tytułu pojawia się w szablonie bardzo często. Jest to krój Kuba ręczny. Na koniec jeszcze jedno słówko o zdjęciach – chciałam je nieco odrealnić stąd też sztuczne tło i szary odcień; i o linkach w wąskiej szpalcie - ogólnie nie lubię jak mi literki skaczą po najechaniu na nie ale w tym wypadku całe frazy delikatnie przesuwają się w prawo (wszystko zostało zaplanowane, piksele policzone).

1 2 3 4

5 6 7 8

środa, 09 kwietnia 2008

W zeszłym tygodniu udało mi się skończyć dwa szablony z dedykacją. Poprzednio zaprezentowałam tu korner.blox.pl który powstawał stosunkowo długo. Tym razem zapraszam do obejrzenia tybetwatch.blox.pl

tybet_szablon

Z jednej strony stworzenie wyglądu dla Tybet Watch było rzeczą prostą z drugiej bardzo skomplikowaną. W obu przypadkach decydował o tym fakt istnienia nagłówka do którego miałam dostosować pozostałe elementy wyglądu. Było prosto bo nie było wątpliwości co do szerokości poszczególnych elementów, zaokrągleń na rogach, wyboru czcionki w nagłówku – to wszystko już było i pozostało mi jedynie powtórzyć to w dalszej części szablonu. Było trudno bo w przestrzeni tych jednak określonych ram chciałam stworzyć coś swojego, pod czym mogłabym się bez oporów i wątpliwości podpisać – to moje dzieło. Myślę, że się udało.

3434734B4BA66262d9CC33332727279D9D9DDADADA
#343473#4B4BA6#6262d9#CC3333#272727#9D9D9D#DADADA

Kolory mogłam oczywiście wybrać inne niż w nagłówku – zaletą szarości jest to, że wiele barw i odcieni dobrze się z nią komponuje. W związku z tym, że blog ten jednak związany jest z bardzo konkretnym tematem, na prośbę jego administratora wykorzystałam kolory zbliżone do tych występujących na fladze Tybetu. Szczerze mówiąc jestem z nich bardzo zadowolona, zazwyczaj mam sporo wątpliwości co do tego czy kolor na pewno pasuje a w tym przypadku udało mi się dość szybko określić właściwą paletę barw.

Obok tradycyjnej wąskiej szpalty znajduje się trzecia. Coraz lepiej idzie mi tworzenie trzyszpaltowców. Tym przypadku w trzeciej szpalcie znalazły się nie tylko skrypty, umieściłam tam też banery, tekst, linki, określiłam wspólne nagłówki… i choć może się to wydawać dla wielu rzeczą banalną to proszę pamiętać, że ja o html wiem tyle co nic. Gdy określiłam co będzie w trzeciej szpalcie poszukałam informacji jak to zrobić i voilà wedle życzenia jest.

2 5 8 4

7 3 6 tybet_1

niedziela, 06 kwietnia 2008

Z prawdziwą przyjemnością muszę poinformować, że autor bloga Spojrzenie na murawę stracił możliwość pisania bloga profesjonalnego aka eksperckiego o sporcie. Zostanie mr properem blogów sportowych jest ambicją wielu blogerów – Bugi przykro mi ale straciłeś swoją szansę. Oczywiście możesz próbować spełniać pozostałe warunki ale ten podstawowy dla blogów sportowych niestety jest już poza Twoim zasięgiem.

jeśli blog jest o sporcie, postaraj się, żeby był wyjątkowo brzydki. niech wygląda jak "oprawa meczu". design powinien być standardowy, korzystaj z gotowych szablonów.
netto.blox.pl

spojrzenie_na_murawe

Ze współpracy z piobug jestem bardzo zadowolona. Wydaje mi się, że w miłej atmosferze udało nam się osiągnąć satysfakcjonujący nas oboje efekt. Dla Bugiego istotne było aby blog był funkcjonalny i przejrzysty. Szablon powinien ładować się szybko i kolorystyka powinna być trafna. W toku kolejnych dyskusji zdecydował się na umieszczenie kliku dodatków.

Ze względu na tematykę bloga oczywistym kolorem wydawał się zielony. Aby całość sprawiała bardziej profesjonalne wrażenie dodałam granatowy i kilka odcieni szarego (może jednak istnieje szansa na bycie mr properem ale nie w dziedzinie sportu).

85806A000066CCC9C24466009E9B8EA8A69EBDBBB3
#85806A#000066#CCC9C2#446600#9E9B8E#A8A69E#BDBBB3
Spojrzenie na murawę to kolejny szablon trzyszpaltowy jaki zrobiłam. O ile w Radiobloxie do stworzenia trzech szpalt wykorzystałam jedynie elementy bloxowe to w przypadku tego szablonu trzecia szpalta zawiera nowości (ewidentnie inspiracją były dla mnie trzyszpaltowce Eskey’a). Przede wszystkim umieściłam tu ostatnie komentarze Szymona i widżet pokazujący czytelników z MyBlogLog. Skoro MyBlogLog pojawił się w sferze moich zainteresowań to oczywistym było zastosowanie skryptu Debergeraca do wyświetlania avatarów MBL obok komentarzy. Trzecim skryptem użytkownika który został tu wykorzystany jest zwijane archiwum Eskey’a.

Na koniec pozostaje mi jedynie napisać, że czcionka w tytule to advent i życzyć Piotrowi zadowolenia zarówno z szablonu jak i z blogowania.
Bardzo miło się z Tobą współpracowało.

1 2 3 4

5 6 7 8

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