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

Powrót do początków, zielony szablon z liściem

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.

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

fragmenty szablon 10 elastyczny

Uwagi o szablonie 10 elastycznym, zielonym z liściem
szerokość szablonu automatyczna (740px/1020px/1300px)
szerokość części na notkę 580px (740px/740px/740px)
szerokość pobocznej szpalty 280px
dodatkowa trzecia kolumna
(zależna od szerokości bloga)
280px
kolor tła grafitowe (#2a2a2a)
kolor tekstu jasny (#ffc)
kolor linków zielony (#9c0)
pozostałe kolory biały (#fff), szary (#666)
krój użyty w notce Georgia
wielkość tekstu notki 14px
interlinia w notce automatyczna
maksymalna wielość elementów graficznych w notce 550px
css-owe ramki przy grafikach tak
 background: #0A0A0A url(/resource/10_wzorek.gif) repeat center top;
 border: #666 1px dotted;
 padding:14px;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa, ramka
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3 - odstęp, powiększenie, 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, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 740px/1020px)
.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 z symbolem koperty

Po raz kolejny eksperymentuję w tym szablonie z szerokością. Te w typie A wydają się do tego celu idealne. Pozwala mi to zachować ich oryginalny wygląd a jednocześnie odświeżyć i uaktualnić nieco projekt. Tym razem zdecydowałam się na wersję elastyczną ale ograniczoną do trzech opcji. Blox udostępnia wersję mobilną więc wszystkie te mało-ekranowe wersje które robiłam i robię to tylko eksperyment.

Tym razem więc moja ingerencja w układ zaczyna się mnie więcej od 786px co powinno być portretową wersją iPada. Blog wtedy ma jedną kolumnę, szeroka szpalta podzielona jest wizualnie na treść i informacje o notce. Wąska szpalta wyświetla się poniżej szerokiej w dwuch kolumnach

 

Co zrobić aby pojawiła się trzecia kolumna

Konieczne jest spełnienie kilku warunków. Oczywiście w określonej sytuacji, w zależności od zawartości pola na kod HTML trzecia kolumna może się utworzyć sama. Zapewne będzie tak jeżeli w polu na kod wstawisz tylko sam zwykły tekst, bez żadnych znaczników. Rzadko się to jednak zdarza aby ktoś wstawiał sam goły tekst. Dlatego proponuję ubrać wszystkie elementy, które pojawić się mają w trzeciej kolumnie w div o identyfikatorze Trzecia. To powinno wystarczyć.

przykład kodu dla trzeciej kolumny

pływanieDrugi warunek to kolejność. Kod trzeciej szpalty powinien być wstawiony na początku pola na kod HTML przede wszystkim dlatego, że jest to pływająca trzecia szpalta. Działa to w ten sposób, że bloksowa wąska szpalta płynie na lewo i jeżeli następny element się zmieści to może wpłynąć po pomiędzy wąską a szeroką. Następnym elementem jest zaś wszystko co jest w polu na kod HTML, w takiej kolejności w jakiej jest to wpisane.

jak zrobić boksJeżeli chcesz uporządkować nieco treść w polu na dodatki proponuję użyć klas .boks i .tyt. Boks to będzie pojedynczy kontener, przykładowo cała lista ze spisem treści czy element zawierający zastrzeżenie typu copyright. Tyt natomiast to klasa, którą w szablonach na starym kodzie przypisuję etykietom tytułującym takie kontenery. W przypadku szablonu 08 pojedyncze pudełeczko boks zapewnia odstęp od sąsiednich elementów. Klasa dla tytułu powiększa nieco tekst, dodaje mu kursywę i jasne podkreślenie.

W skrócie dodawanie dodatkowych boksów opisane jest na stronie: Jak dodać dodatkowe boksy w bocznej szpalcie.

Chcesz skopiować przykładowy kod umożliwiający pojawienie się trzeciej kolumny? Zachęcam do skopiowania treści z pliku tekstowego i uzupełnienia go o własne informacje. Zmieniając pamiętaj tylko, że każdy otwarty znacznik musi posiadać zamknięcie. Polecam też mały pomocnik dla tworzenia dodatkowego kodu. W przykładowym kodzie umieściłam trzy kontenery aby można było porównać ich zawartość i sposób jej stworzenia.


 

wtorek, 12 marca 2013, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
ervisha
2013/04/17 21:56:51
Witam. Mam kłopot ze zmnianą zdjęcia w nagłówku. Chodzi mi o szablon szablon34byepeeya.blox.pl/html otóż nigdzie nie mogę znaleźć miejsca w ktorym powinnam wkleić zdjęcie zastępujące obecny naglówek. Prosze o pomoc
-
marcepun
2013/06/06 14:49:58
Witam zwracam się z prośbą o pomoc przy zmianie rozdzielczości mojego bloga.
Chciałbym móc ustawić taką rozdzielczość na 1024 by mój blog dobrze się układała w ekranie monitora.
-
kate_mac
2013/06/08 15:16:17
@ervisha
Próbowałeś postępować zgodnie z instrukcjami w tej notce Poszerzanie głównej szpalty w szablonie 19 Light. Poszerzając jeden element musisz też zmienić wielkość elementów nadrzędnych. Suma szerokości wszystkich szpalt (ich szerokości, dopełnień, ramek, marginesów) nie powinna być większa niż szerokość elementu w którym się zawierają.
-
Gość: koko, *.dolsat.pl
2013/08/29 23:40:36
Hejka, a potrafiłabyś zrobić szablon na bloggera? :( bo ja nie ogarniam i mam dość użerania się z tym dziadostwem :(
-
kate_mac
2013/09/04 12:51:22
@koko
Zapewne potrafiłabym. Nie cierpię tych suwaków bloggera ale one są tam po to aby laik mógł kompletnie zmienić sobie wygląd bloga. Nie potrzeba więc żadnych technicznych czy nawet magicznych umiejętności aby zrobić sobie tam indywidualny szablon. Wystarczy wiedzieć czego się chce i skorzystać z edytora. Trochę cierpliwości i wytrwałości i szablon samodzielnie wykonasz. Jeżeli brak Ci tych dwóch cech to zaplanuj mniejsze zmiany.
Powodzenia.
-
Gość: Ratomka, *.neoplus.adsl.tpnet.pl
2013/10/28 13:02:10
Witam!
Prowadzę bloga o tematyce kosmetycznej. Szukam osoby która zrobiłaby mi ładny szablon i nagłówek, pasujący do stylistyki bloga. Oczywiście odpłatnie.
Pozdrawiam serdecznie i czekam na odpowiedź.
Anna Olejniczak
Ratomka z bloga www.esencjapieknosci.blogspot.com
-
2014/03/21 22:22:09
Witam pobrałam wasz szablon dziekuje. mam tez pytanie czy robicie szablony na konkretne zamówienia?? Pozdrawiam i zapraszam www.szmatkaikordonek.blox.pl
-
2014/09/24 22:21:49
Świetny szablonik. Wydaje się mega prościutki do obsługi dzięki. wiesz jeszcze może gdzie można pograć szablony wizytówek? nie za drogo, najlepiej za free Pozdrowionka :D!
-
takismiesznypan
2017/10/06 15:02:34
Da się poprawić ze spokojem
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...