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

Cudzesy: elastyczny trzyszpaltowiec z kubkami

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. Cups Of Tea w trakcie zmian trochę przejął inicjatywę. Chciałam zmienić sposób wstawienia topu tak aby można go było w dowolnej chwili zastąpić jakimś innym. Wymagało to znacznych zmian w doborze tła na blogu. Nie chciałam kolejnego szablonu z cieniem więc zdecydowałam się na transparentność. Od tego się zaczęło...


top 09 - cups of tea

Szablon top 09 - cups of tea, elastyczny,
na starym kodzie, dla blogów na blox.pl. -560px- 


Wąska szpalta ma bardzo prosty i uporządkowany wygląd. Top i tła też nie prezentują sobą nic skomplikowanego postanowiłam więc uatrakcyjnić szablon trzecią kolumną. Nie chciałam zwężać i zmniejszać szpalt a zostało za mało miejsca na pełnowymiarową kolumnę więc zdecydowałam się na opcję ze zmienną szerokością. Gdy na ekranie będzie wystarczająco dużo miejsca aby widoczna była cała trzecia kolumna to pojawi się ona symetrycznie po lewej. W przeciwnym razie pozostanie na swoim automatycznym miejscu.

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

fragmenty szablon top 09 - cups of tea

Uwagi o szablonie top 09 - cups of tea
szerokość szablonu 900px (1180px)
szerokość części na notkę 560px
szerokość pobocznej szpalty 240px
dodatkowa trzecia kolumna szerokość: 240px
zawiera: wybrane dodatki z pola na kod HTML
sposób: position:absolute;
kolor tła 50% #fffbiała półprzezroczysta grafika
kolor tekstu szary (#554444)
kolor linków czerwony (#cc0000)
pozostałe kolory szary w odcieniu blado pąsowym (#884444)
krój użyty w notce Segoe UI, Arial
wielkość tekstu notki 13px
interlinia w notce wartość względna 150%
maksymalna wielość elementów graficznych w notce 560px
css-owe ramki przy grafikach tylko cień
 box-shadow:0 0 3px #807373;
 margin:0.5em 0 0;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)

automatyczne
h3,h4 - większy rozmiar

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ść 900px/1180px)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

#Trzecia - opcjonalna trzecia kolumna, symetryczna; ustawiona bezwzględnie (absolutnie) w zależności od szerokości

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, przede wszystkim w dziedzinie kolorów i ozdób. Układ też wizualnie bardzo prosty. Nie przepadam za symetrycznie ułożonymi wąskimi szpaltami. I już nawet nie chodzi mi o twierdzenie, że symetria jest estetyką głupców. Większość blogów o symetrycznym układzie, które widziałam wygląda po prostu ciasno, przydusza treść. Dodatkowo symetryczny układ jest dla mnie zbyt narzucający się. To prosta kompozycja, którą chętnie wybierają osoby początkujące a więc jest bardzo powszechna. Atrakcyjne zastosowanie kompozycji symetrycznej jest dużą sztuką, wyższą szkołą jazdy, która jest mi niestety obca więc niechętnie się jej podejmuję.

Symetryczna trzecia kolumna, zawierająca jakąkolwiek część treści pobocznej, w zasadzie musi być przeniesiona przy pomocy pozycjonowania absolutnego a to oznacza wyjęcie z bloga. Nie zawsze musi to być problem, zazwyczaj nie będzie tego w ogóle widać, szczególnie, jeżeli część wyjęta nie zawiera wielu treści. W przypadku tego szablonu jeżeli w trzeciej po lewej umieścisz przykładowo tylko niewielki spis treści to wszystko będzie ok. Jeżeli natomiast wrzucisz tam wszystkie dodatki (a masz ich dużo) to czeka cię mały problem wyglądający mniej więcej tak:

problem z trzecią

Jeżeli jednak ci to nie przeszkadza albo zadbasz o to aby trzecia nie była najkrótszą kolumną na blogu i odpowiada ci kompozycja symetryczna to aby pojawiła się trzecia kolumna musisz ubrać jej treść w odpowiedni znacznik.

Trzecia kolumna

Dodać jest ją bardzo prosto i bez względu na sposób jej umieszczenia kod przygotowuje się zawsze tak samo. Potencjalną zawartość trzeciej kolumny musisz objąć znacznikiem div o identyfikatorze Trzecia.

div o identyfikatorze Trzecia

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.

Aby zapewnić trzeciej kolumnie odpowiedni wygląd, pasujący do wyglądu wąskiej bez problemu można wykorzystać boksy, które opisywałam jako te do umieszczenia pod wąską. Klasy dodatkowych boksów można wykorzystać zarówno w części z kodem trzeciej kolumny jak i poza nią.

Z górnym menu trzeba być nieco ostrożniejszym niż w przypadku trzeciej szpalty pływającej. Tym razem istotne jest aby przez przypadek nie wsadzić kodu górnego menu do kodu trzeciej szpalty. Poza tym wszystko jak zazwyczaj.

Zmienna szerokość

Ten szablon zapewnia blogowi zmienną szerokość. Powstaje ona dzięki wykorzystaniu możliwości CSS3, które pozwalają za zdefiniowanie szerokości okna przeglądarki. Jeżeli okno jest mniejsze niż rozdzielczość ekranu 1280px to zawartość trzeciej kolumny wyświetli się w naturalnym miejscu czyli pod wąską szpaltą. Większość użytkowników polskiego Internetu korzysta z szerszych rozdzielczości więc w większości przypadków aby wykorzystać tą szerokość dodałam dodatkowy opis mówiący, że przy szerszym ekranie trzecia szpalta ma się pojawić po lewej.

Ewentualne zmiany

  • Chcesz inny top - nie ma problemu (na przykładzie Betsyness)
    • top umieszczony jest jako tło tytułu, wyrównany jest do prawej krawędzi i ma aktualnie wymiary 900×200px - tyle wyświetla się nad dwiema szpaltami aby zajmował szerokość wszystkich trzech musi mieć wymiary 1180×200px
      #BlogTytulText {
       background:#f3f3f3 url(/resource/header2.jpg) no-repeat right top;
       height: 200px;
       text-align: center;
       font-size:2.2em;
      }
  • Obrazek w tytule ma być linkiem
    • przestrzeń linkująca już jest, wystarczy więc tylko gigantyczne wcięcie tekstu

      #BlogTytulText a {
      text-align:left;
      text-indent:-9999px;  /* gigantyczne ujemne wcięcie tekstu sprawia, że słowa skrywają się poza krawędzią ekranu */
      }
      

  • Chcesz inny wzorek w tle, łatwo go dodać - sam wzorek już jest (nazywa się t09_bg.gif) więc wystarczy go wymienić (poprzez nadpisanie albo zmianę adresu wywołania)
  • Chcesz zmienić kolor linków

Ikonkowe menu

RSSMailFacebooktwitterMenu umieszczone w tym szablonie jest niemal identyczne jak to w szablonie Drawning Hands. Jeżeli kogoś interesuje jak to jest zrobione i co z tym można jeszcze zrobić to zapraszam do poprzedniej notki.

Aby pojawiło się na blogu należy dodać odpowiedni kod html. Znacznikowi należy przypisać opisany przeze mnie identyfikator. 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. 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ą.

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ść).

Jeżeli chcesz zastąpić mail newsletterem a Twittera StumbleUpon czy dowolnym innym adresem to nie widzę problemu. Jasne części przykładowego kodu wypełnij właściwymi adresami a w zasobach blogu odszukaj ikonki które chcesz wymienić i zastąp je (nadpisz) ikonkami wybranych przez siebie serwisów.


poniedziałek, 25 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
pinkcake
2013/08/09 05:35:31
Dzięki Twojej instrukcji przeniosłam sobie wyszukiwarkę. Chyba nie idealnie dobrze, ale chwilowo lepiej:)
Niestety poległam na zrobieniu trzeciej szpalty, sieczka kompletna :(
-
kate_mac
2013/09/03 21:26:43
@pinkcake
trochę pobłądziłaś i to że wyszukiwarka jest tam gdzie jest to raczej kwestia przypadku; przy #BlogGlownyBox dodałaś position:relative ale aby to zadziałało potrzebny jest jeszcze średnik oddzielający tą cechę od następnej (zdaje się padding) powinno być

position: relative;

i wtedy wyszukiwarka ustawia się przy krawędzi bloga a nie ekranu (tak jak teraz jest to wyznacznikiem pozycji jest krawędź okna; zobacz zresztą sama, zmniejsz sobie oko przeglądarki i zobacz co się dzieje z wyszukiwarką; oznacza to, że jak ktoś ma szerszy ekran niż Twój to zobaczy wyszukiwarkę tuż przy lewej krawędzi okna przeglądarki)

jeżeli dodasz średnik tam gdzie go brakuje to powinnaś jeszcze zrobić sobie odpowiedniej szerokości lewy padding - wtedy stworzy się miejsce na trzecią kolumnę - jeżeli określisz nieco dokładniej co za sieczka się robi w związku z trzecią szpaltą i w jakim miejscu to może będę mogła Ci pomóc i pokierować nieco
-
Gość: Speed Test, 77.243.191.*
2018/07/25 12:45:54
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...