O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Cudzesy: efemeryczny szablon trzyszpaltowy

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Efemeryczny nie wygląda tak efemerycznie jak by nazwa sugerowała ani tak drobno jak go sobie zaplanowałam. Jak zawsze wszystko zależy od zawartości a zawartość, którą wstawiam dla przykładu to zawsze bardzo dużo liter. Jeżeli chcesz jednak prosty niewielki szablon ale zależy ci na dodatkowej kolumnie to Ephemeral będzie idealnym rozwiązaniem.


top 05 - Ephemeral

Szablon top 05 - Ephemeral, trzyszpaltowy,
na starym kodzie, dla blogów na blox.pl. -450px-


Jest jasny, całkiem prosty. Używa czterech wyblakłych kolorów. Jako czcionkę wybrałam mu Corbel w dużym stopniu ale Corbel ma bardzo drobne literki. Szpalty są wąskie i dość ciasno ułożone ale odstępy w pionie mają dodawać szablonowi nieco oddechu w sytuacji gdy, jak na blogu testowym, jest w nim dużo monotonnej treści. Jedynym elementem na który w wąskiej szpalcie użytkownik ma niewielki wpływ jest archiwum. Możesz nie mieć zakładek, nie wyświetlać chmurki tagów czy listy ostatnich wpisów ale archiwum musi być. Otóż nie. W tym szablonie jeżeli jako archiwum wybierzesz listę miesięcy to nie będzie się ona wyświetlać. Ot taki blox myk.

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

fragmenty szablon top 05 - Ephemeral

Uwagi o szablonie top 05 - Ephemeral
szerokość szablonu 870px
szerokość części na notkę 450px
szerokość pobocznej szpalty 180px
dodatkowa trzecia kolumna szerokość: 180px
zawiera: wybrane dodatki z pola na kod HTML
sposób: float:left;
kolor tła białe (#fff)
kolor tekstu ciemny (#332211)
kolor linków zielony (#9C9C4F)
pozostałe kolory różowy (#B46A6A), brązowy (#887744)
krój użyty w notce Corbel (Trebuchet MS)
wielkość tekstu notki 16px
interlinia w notce wartość względna 1.4em
maksymalna wielość elementów graficznych w notce 450px
css-owe ramki przy grafikach tylko jasny niewielki cień
 box-shadow:0 0 3px #9C9C4F;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i jaśniejszy kolor
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
h3 - większy rozmiar i kursywa
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, zwinięte archiwum, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

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

#Trzecia - opcjonalna trzecia kolumna, ustawiona dzięki pływaniu

ikonkowe menu:
#mTwit ikonka z logo Twittera
#mFejs ikonka z logo Facebooka
#mMail ikonka ze znakiem @ (małpy)

Szablon jest całkiem prosty i przejrzysty. Nie kombinowałam w nim żadnych nietypowych czy skomplikowanych rozwiązań: kolorowy top, jasne linki w dwóch kolorach, dodatkowa kolumna z zupełnie dowolną treścią i ikonki wtapiające się w tło.

Łatwo wymienić w tym szablonie top. Można go napisać albo pogrzebać w kodzie. Bez większego problemu można też zmienić kolor linków. Należy tylko pamiętać, że wybrałam dwa więc poza podstawowym a kolor linków opisany jest także przy kilku innych elementach. Wystarczy jednak skorzystać z wyszukiwarki (Ctrl+F), którą ma każda przeglądarka i przeszukać kod arkusza stylów i zastąpić każdy zielony i każdy różowy kolor własnymi.

Pływająca trzecia szpalta

pływanie elementuTrzecia szpalta powstaje w sposób całkiem naturalny. Nie wymaga żadnego kombinowania, nie jest z niczego wyciągnięta, przełożona, przeniesiona, etc. Trzecia szpalta powstaje dzięki pływaniu. Obok szerokiej szpalty z treścią główną zostawiłam wystarczająco dużo miejsca aby zmieściły się tam dwie kolumny. Określiłam, że ta bloksowa, wąska ma płynąć w lewo i robić miejsce na następne elementy. Następne w kodzie są dodatki z pola na kod HTML i o ile będzie to możliwe to wpłyną obok wąskiej i stworzą trzecią kolumnę.

Jeżeli w polu na dodatki będą umieszczone elementy liniowe albo i takie wyświetlane w bloku ale nie szersze niż 180px to wszystko samo się zrobi. Ale właściwie napisany kod już choćby dla tekstu daje znaczniki akapitu, które mają charakter blokowy. Żeby się nie przejmować takimi szczegółami a jednocześnie zyskać kontrolę nad tym co znajduje się w trzeciej szpalcie a co pod obiema wąskimi najlepiej ubrać kod w znacznik div o identyfikatorze Trzecia.

przykład kodu dla trzeciej kolumny

kod dla trzeciej szpalty

W szablonie opisane też jest bardziej uniwersalne górne menu a także dodatkowe klasy, które używam do uporządkowania elementów wpisywanych w polu na dodatki. W tym przypadku nie ma to większego znaczenia ale ze względu na inne szablony zalecam aby kod dla górnego menu znalazł się poza kodem trzeciej szpalty. Aby zapewnić trzeciej kolumnie odpowiedzialne edytowanie bez problemu można wykorzystać boksy które opisywałam jako te do umieszczenia pod wąską. Szablon sam nigdzie ich nie umieszcza, w szablonie opisany jest tylko ich podstawowy wygląd: że na główki będą większe a po każdym boksie będzie spory odstęp.

Klasy dodatkowych boksów można wykorzystać zarówno w części z kodem trzeciej kolumny jak i poza nią.

Aby na blogu pojawiła się trzecia kolumna trzeba spełnić tylko dwa warunki:

  1. Ubrać kod trzeciej kolumny w div o identyfikatorze Trzecia
  2. Umieścić kod trzeciej kolumny na początku pola na kod HTML. Dopiero po nim wszystkie inne dodatki.

W ikonkowym menu częściowo wykorzystałam ikonki stworzone przez IconTexto (Bruno Maia). I udostępnione na licencji CC Attribution-Noncommercial 3.0. Zazwyczaj tak proste jak te robię sama. Potrzebujesz tylko ciekawy kształt, trochę cienia i logo serwisu ale tym razem mi się nie chciało więc postanowiłam skorzystać z gotowców (i tak okazało się, że mailowe logo zrobić muszę sama, ot przewrotność).


niedziela, 10 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2012/06/10 16:46:34
Przeróbki szablonowe po prostu świetne !
A czy jest możliwe zamieszczenie wszystkich szablonów w wersji dwuszpaltowej ?
Pozdrawiam :)
-
kate_mac
2012/06/10 19:57:34
@eldka
Zupełnie nie rozumiem o co Ci chodzi. Co masz na myśli pisząc:
A czy jest możliwe zamieszczenie wszystkich szablonów w wersji dwuszpaltowej ?
Wszystkie moje dostępne szablony są zamieszczone na tym blogu. Jeżeli ich tu nie ma to znaczy, że nie są jeszcze w pełni gotowe. O Co Ty się pytasz? Jakie wszystkie szablony? Chodzi Ci o listę szablonów które są dwukolumnowe? Takiej listy nie ma. Na ilustracjach widać ile szablon ma kolumn a poza tym ostatnio robię szablony elastyczne, o zmiennej szerokości.
-
2012/06/12 14:47:14
Chciałam tylko zapytać o ten szablon w wersji dwuszpaltowej, źle się wyraziłam.
-
kate_mac
2012/06/12 15:07:34
@eldka
W takim razie nie ma najmniejszego problemu. Trzecia kolumna ma tu charakter pływający więc jeżeli nie będzie na nią miejsca to się nie pojawi. Wystarczy więc, że poszerzysz pozostałe dwie szpalty. Podpowiedzi poszukaj w notce o poszerzaniu szablonu.
Dokładnie rzecz ujmując nie musisz poszerzać całego szablonu bo jest on dostatecznie szeroki. Odszukaj tylko selektory odpowiadające za poszczególne szpalty i zwiększ nieco ich szerokość czy odstępy poziome. Dodatkowa trzecia kolumna przeznaczone ma 180px więc tyle masz maksymalnie do rozdzielenia pomiędzy szpalty i odstępy między nimi.
-
2012/06/12 16:38:08
Dziękuję, już testuję.

Możesz zerknąć eldka.blox.pl/html
:)
-
kate_mac
2012/06/12 17:14:10
@eldka
Wygląda przyzwoicie ale słabo u Ciebie chyba z arytmetyką :D
#BlogGlownyBox {width:850px;}

#BlogSzerokaSzpalta {width:700px; margin:0 30px 0 0;}
#BlogWazkaSzpalta, #SkomentujWazkaSzpalta { width:180px; margin:0 10px 0 0;}

suma nie powinna być większa niż 850px a jest 920px
700+30+180+10=920
Napisałam Ci w poprzednim komentarzu, że trzecia zajmuje 180px i że tą liczbę pikseli możesz przypisać którejś ze szpalt. Ale tylko te 180px bo grafika w nagłówku się nie naciągnie a ma on szerokość 850px

Dodatkowo szpalta, która ma aż 700px szerokości powinna mieć tekst pisany czcionką o rozmiarze 23px. Specjaliści piszą, że do wygodnego czytania szpalta powinna mieć maksymalną szerokość 24-30 razy większą niż wielkość tekstu. Jeżeli będzie trochę szersza to aż tak to nie wpłynie na czytelność ale pomiędzy 480 (30razy rozmiar czcionki) a 700 jest baaaaardzo duża różnica więc zastanów się nad szerokością bo tak długie linijki sprzyjają gubieniu wiersza.
-
2012/06/12 18:09:50
Kate- mac poprawiłam i uwierz mi robię wszystko metodą prób i błędów ;)

czy teraz jest ok ?
-
kate_mac
2012/06/18 12:31:10
@eldka
widzę, że już zmieniłaś na inny; poprzednio też było ok, w wielu sprawach przeglądarki są błędom-odporne - możesz być na barier z dodawaniem a przeglądarka też sobie jakoś poradzi i o ile szablon nie podkreśla jakoś krawędzi poszczególnych elementów to mało kto zauważy że coś jest nie tak

co do metody prób i błędów to ja też zaczynałam zielona więc doskonale wiem co jest największym błędem niedoświadczonych bo sama popełniałam go milion razy: brak dokładności, niedbałość o szczegóły - jest tak wiele rzeczy których zielony jak szczypiorek na wiosnę nie ogarnia że skupiając się na nich traci też nieco kontrolę nad tym co jest w jego zasięgu czyli np. umiejętność czytania za zrozumieniem czy arytmetyka :D Ale dokładność popłaca i oszczędza dużo czasu.

A propos dokładności: wiesz, że ten szablon z którego teraz korzystasz też ma trzecia kolumnę? Jest zupełnie pusta ale jest. To czy miejsce na trzecią szpaltę pojawi się zależne jest od przeglądarki - jeżeli przeglądarka jest nieaktualna albo rozdzielczość ekranu jest za mała to możesz tego pustego miejsca nie widzieć ale zapewne większość czytelników je zobaczy. O szczegółach tego szablonu napiszę w tym albo przyszłym tygodniu.
-
Gość: Speed Test, 77.243.191.*
2018/07/25 12:46:49
Sat24, Sat 24
Pogoda, Prognoza pogody
National Forecast
Weather Forecast
Wetter, Wettervorhersage, Wetterbericht
Meteo, Previsioni Meteo Italia
Météo France
United Kingdom Weather
Clima de Espana
Väder
Australia Weather
Canada Weather
Vr
Vejr
Clima


Clima
Wetter
Weer
New Zealand Weather
Ireland Weather

Test prędkości internetu
Speedtest, Speed Test
DSL Geschwindigkeit testen
Test di velocit Internet
Test de velocidad
Test de vitesse Internet
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...