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

Pudełkowy szablon dla Verdany

W zasadzie ten szablon, choć robiony ze względu na krój Verdana, ma swoją własną osobliwość. Verdana mimo iż miała być tematem szablonu zeszła na plan drugi, w dalszym ciągu jest istotna i nadaje charakter szablonowi ale to nie krój jest jego wyróżnikiem. Specjalnością tego szablonu jest zmienna wielkość pola na treść notki: maksymalna wielkość grafik w notkach to 400px, chyba że... dzielisz notkę na wstęp i treść. W takim wypadku maksymalna wielkość we wstępie pozostaje ta sama natomiast w rozwinięciu treści można umieszczać większe grafiki - nawet 500px.



Zasada jest prosta: na stronie głównej bloga w notce jest mniej miejsca niż na stronie z pojedynczym wpisem i na stronach statycznych. Data wpisu wyróżnia wyraźnie początek notki.

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

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

Link do natychmiastowego pobrania szablonu: skopiuj szablon

fragmenty

Uwagi o szablonie pudełkowym Verdana:
żółtym (53), różowym (54), niebieskim (55), zielonym (56)
szerokość szablonu 800px
szerokość części na notkę 550px
szerokość pobocznej szpalty 230px
kolor tła jasne (#e5e5e5)
kolor tekstu szare (#555)
kolor linków 53 żółty żółty (#FFAA00)
54 różowy różowy (#FF55AA)
55 niebieski niebieski (#66AAEE)
56 zielony zielony (#99bb00)
pozostałe kolory 53 żółty żółty (#EEBB55), szary (#555)
54 różowy magenta (#EE0077), szary (#555)
55 niebieski niebieski (#1188FF), szary (#555)
56 zielony zielony (#889900), szary (#555)
krój użyty w notce Verdana
wielkość tekstu notki 85% z small (około 10px)
interlinia w notce wartość względna: 150%
maksymalna wielość elementów graficznych w notce 400px na stronie głównej
500px na stronach z pojedynczym wpisem
css-owe ramki przy grafikach tak
padding: 3px;
background: #e5e5e5 url(/resource/53_notka.jpg) left top repeat-x;
border: 2px #f1f1f1 solid;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) jaśniejszy kolor tekstu (#777)
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3 - duże litery, powiększenie o 20% i jaśniejszy kolor (#999)
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 - górne menu (w układzie poziomym)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Wybrane kolory to raczej kwestia przypadku. Intensywny żółty czy lekko oliwkowy zielony to najpopularniejsze kolory moich szablonów. Niebieski zapewnia spokój a różowy odrobinę oryginalności.

Żaden z tych szablonów nie ma ilustracji w topie. Ich głównym wyróżnikiem jest kolor ale i on nie jest pierwszoplanowym punktem. Na główny plan wychodzą kategorie umieszczone pod tytułem. Generalnie kategorie świetnie opisują treść bloga więc ich widoczne miejsce nie jest wadą. Jeżeli jednak przeszkadza Ci tak wyrazisty kontener z kategoriami masz dwie możliwości.

1. Kontener z kategoriami i linkiem do RSS można ukryć

Wystarczy do arkusza stylów (WYGLĄD -> EDYCJA CSS) dodać niewielki fragment kodu któy ukrywa cały ten boks.

#BlogKategorieBox {
 display:none;
}

Najlepiej dla porządku umieścić ten opis wraz z pozostałymi opisami elementu kategorie ale jeżeli z jakiegoś powodu to problem to równie dobrze można ten fragment kodu dodać na końcu arkusza.

2. Element kategorie zamienić na tytułową ilustrację

Wystarczy w arkuszu stylów (WYGLĄD -> EDYCJA CSS) wprowadzić drobne zmiany w opisie kategorii:

2.1 Przygotować ilustrację tytułową o dowolnej wysokości i maksymalnej szerokości: 546px (tylko tyle będzie widać, reszta będzie schowana); dodać ją do zasobów bloga
2.2 Zmienić adres wywołania tła (background) dla elementu #BlogKategorieBox
2.3 Określić wysokość elementu (height)
2.4 Ukryć treść elementu czyli linki do kategorii i kanału RSS umieszczone w elementach #BlogKategorie i #BlogRss

Gotowy kod powinien wyglądać mniej więcej tak:

#BlogKategorieBox {
 width: 521px;
 height: 100px;
 margin: 0px 0px 20px 0px;
 padding: 0px 20px 10px 5px;
 border: 2px #f1f1f1 solid;
 background: #e5e5e5 url(/resource/nazwa-pliku.jpg) left top no-repeat;
}
#BlogKategorie, #BlogRss {display:none;}

Najlepiej zastąpić nim istniejący opis kategorii ale jeżeli to z jakiegoś powodu problem (a lepiej nie ryzykować błędu w górnej części arkusza) to kod należy pisać na końcu. Jego definicje zastąpią wcześniejsze nawet jeżeli są z nimi sprzeczne.


niedziela, 19 lipca 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
itso
2009/07/23 15:50:36
Cześć, czy jest jakieś lepsze miejsce, gdzie można zadać pytanie odnośnie problemu z szablonem?

Usilnie starałem się wyguglać rozwiązanie sprawy, ale chyba nie potrafię sformułować poprawnego zapytania.

Użyłem szablonu kubrick 05 i z nieznanych mi powodów menu z zakładkami itd mam po lewej, a nie po prawej. Wyłączyłem elementy html, zmieniałem parę ustawień itd i dalej to samo. Załadowałem szablon jeszcze raz (przez przycisk skopiuj mój CSS) i wszystko wróciło do normy (to menu było po prawej), ale radość była krótka, bo gdy po godzinie wszedłem na bloga, to znowu było po lewej.

Jakiś pomocny link? :
pilka.blox.pl
-
kate_mac
2009/07/24 09:45:16
@itso
jeżeli masz problem z moim szablonem to tutaj będzie najprościej...

zerknęłam na Twój blog czterech różnych przeglądarkach i we wszystkich przypadkach wąska szpalta z zakładkami jest po prawej stronie - czyli poprawnie

problem o którym piszesz zazwyczaj związany jest ze złym skopiowaniem szablonu, kopiuje się css a html pozostaje z szablonu który był na blogu wcześniej
rozwiązanie dla takiego problemu jest zazwyczaj ponowne skopiowanie szablonu - co zrobiłeś

w związku z tym, ze nie widzę fizycznie problemu (zerknęłam do html Twojego bloga - jest ten który być powinien) napisz mi czy zmiana stronności szablonu nadal występuje a wtedy będziemy się zastanawiać jak go rozwiązać
-
irytek05
2009/07/24 12:31:30
Przyznam, że pierwszy raz słyszę o sytuacji, gdy css jest prawidłowy a kod HTML pozostaje z poprzedniego szablonu. Zdarza się natomiast, że mamy na blogu obraz nowego szablonu, a w arkuszu CSS jest kod poprzedniego. Za ten stan rzeczy odpowiedzialna jest przeglądarka. Wtedy należy wylogować się z konta i zamknąć przeglądarkę. Po ponownym wejściu na blog, wszystko będzie na swoim miejscu.
Tak zawsze powinno wyglądać prawidłowe kopiowanie szablonu. Nie znam się na przeglądarkach, ale podobno maja długą pamięć i stąd te problemy;)
-
itso
2009/07/24 19:30:33
Wczoraj jeszcze raz skopiowałem ten szablon i od tamtej pory wszystko jest w porządku.

Jeśli problem się powtórzy, to sprawdzę w innych przeglądarkach, wyczyszczę w nich cache i jeśli będzie na odwrót, to wtedy napiszę.
Dzięki za zainteresowanie, pozdrawiam.
-
kate_mac
2009/07/25 16:08:02
@itso
nie ma sprawy, jak coś będzie źle to napisz tutaj

@irytek
mówimy o troszkę innych sytuacjach choć w zasadzie są analogiczne tylko patrzymy na inne ich aspekty (...ale enigmatycznie wyszło mi to zdanie ;))
to o czym piszę jest czymś dodatkowym - wiesz, zdarza się, że kopiujesz szablon a na blogu okazuje się że szablon jest ale wąska szpalta jest nie po tej stronie co trzeba (zapewne zaglądając bezpośrednio do CSS nie zauważysz nowego css - tak jak pisałaś trzeba się wylogować i ponownie zalogować)
szczerze mówiąc to zdarzyło mi się to raptem kilka razy przez ponad dwa lata a sporo szablonów kopiuję... oj sporo kopiuję bo każdy sprawdzam po kilka razy; w każdym bądź razie często widzę u innych dobry szablon ale z wąską po niewłaściwej stronie
-
2009/12/22 02:13:19
wzięłam. Dziękuję i pozdrawiam. www.pomaranczowy3.blox.pl
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...