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

Poszerzanie głównej szpalty w szablonie 19 Light

Przedstawiam drobny beżowy szablon, który nazwałam Light. Początkowo nazwa odnosiła się do wyglądu ale przy okazji zmian zwiększyłam jego lekkość opisując niemal cały wygląd kodem CSS. Biorąc pod uwagę pewne zasady i ograniczenia można zrobić z szablonem niemal wszystko, jest bardzo elastyczny. Oznacza to, że jeżeli komuś nie odpowiada jego drobność bez większego problemu może sobie przerobić nieco ten szablon.


szablon 19 z szerszą główną szpaltą

Szablon 19 - Light beżowy, z poszerzoną główną szpaltą
na starym kodzie, dla blogów na blox.pl. -670px-


Tym razem poszerzymy główną szpaltę ale tą instrukcję można zastosować do poszerzania dowolnego elementu a już na pewno, i to często z łatwością, do poszerzenia głównej szpalty w w sporej części innych moich szablonów.

W rozwinięciu wpisu znaleźć można:

Na początek bardzo dokładna a jednocześnie prosta instrukcja.

1. Wchodzimy w edycję bloga, przechodzimy do karty WYGLĄD i wybieramy zakładkę EDYCJA CSS

2. W arkuszu odszukujemy część opisującą szerokość bloga. Znalezioną wartość odejmujemy od liczby 990 - to jest nasza liczba maksymalnego poszerzenia.

3. Ustalamy o ile chcielibyśmy poszerzyć nasz element. Ta liczba nie może być większa od ustalonej liczby maksymalnego poszerzenia. Będziemy ją dodawać do każdego poszerzanego elementu.

4. Aby poszerzyć główna szpaltę koniecznie musimy zmienić wartość szerokości (width) w dwóch miejscach:

  • #BlogGlownyBox i/lub #BlogBodyBox
  • #BlogSzerokaSzpalta

Do wartości wpisanej tam w width dodajemy naszą liczbę poszerzenia.

5. Poszerzając główna szpaltę powinniśmy też zmienić wartości szerokości we wszystkich miejscach, które związane są z szerokością głównej szpalty. Najczęściej będą to:

  • #BlogTytulBox
  • #BlogTytulText
  • #BlogTytulOpis
  • #BlogKategorieBox
  • #BlogKategorie

Powyższa lista jest jedynie listą możliwych elementów. Wszystko zależeć będzie od tego jak i gdzie będą one wyświetlane oraz czy mają już określoną szerokości. Jeżeli nie mają width to zostawiamy je w spokoju.

6. Zwiększamy stopień pisma aby poprawić wygodę czytania dłuższej kolumny. Nową szerokość notki dzielimy przez około 30 i otrzymany wynik powinien być naszą nową wielkością czcionki w notce. Przy bardzo szerokich notkach będzie to jednak nieestetycznie duży rozmiar a więc doprowadzamy do kompromisu i powiększamy stopień pisma na tyle na ile jesteśmy w stanie go zaakceptować. Nową wartość wpisujemy albo dla całego bloga (body) albo tylko dla treści notki (.BlogWpisTresc, .WstepKomentowanegoWpisu, .TrescKomentowanegoWpisu, #StatycznaZawartosc)

Klikamy zapisz i gotowe.

Główne zasady poszerzania.

Poniższe zasady nie są przykazaniami nie do złamania ale poszerzając bloga należy wziąć je pod uwagę.

tło w postaci grafikiA. Nie poszerzamy szablonów, które w tle mają skomplikowany zestaw ilustracji w tle. Aby cokolwiek zrobić z szerokością takiego szablonu musimy wymienić ilustracje albo w ogóle z nich zrezygnować. Przykładem takiego szablonu będzie seria drobna z ramkami, można te szablony poszerzyć ale będzie to bardziej skomplikowane.

rozdzielczośćB. Maksymalna szerokość bloga to 995px. Nie jest to jakaś z góry ustalona boska wielkość, to raczej rodzaj kompromisu. Wielkość wyświetlanego zależy od fizycznej wielkości ekranu użytkownika, od jego preferencji i ustawień. Aktualnie najmniejsza najpopularniejsza szerokość to 1024px, odejmując szerokość paska suwaka otrzymujemy około 990px.

szerokość składu - 66 znakówC. Optymalna szerokość wiersza to 66 znaków, 6-7 słów lub trzydziestokrotność wielkości czcionki. Trudno jest mi znaleźć badania uwzględniające specyfikę języka polskiego i czytania z ekranu. Powyższe liczby dotyczą druku i zazwyczaj w internecie są nieznacznie przekroczone. Zwiększając szerokość wpisu musimy też zwiększyć wielkość kroju pisma.

wymiary

Zmiana szerokości głównej szpalty

A teraz instrukcja dla zielonych. W zasadzie powyższa jest więcej niż wystarczająca ale dla zielonych jak szczypiorek na wiosnę dodam jeszcze wizualne wyjaśnienia i postaram się rozwiać ewentualne wątpliwości.

1. Wchodzimy w edycję wyglądu bloga:

WYGLĄD -> EDYCJA CSS -> Edytor CSS (czyli to okienko z kodem szablonu)

2. Odszukujemy główny kontener bloga i sprawdzamy jego szerokość.

W starym kodzie głównym kontenerem bloga zawsze będzie #BlogGlownyBox. Jeżeli nie będzie tam opisanej wartości width to odnaleźć musimy następny kontener czyli #BlogBodyBox. Kolejny kontener to będzie już wąska i szeroka szpalta a więc szerokości naszego bloga poszukać musimy #BlogGlownyBox lub/i #BlogBodyBox.

#BlogGlownyBox 770px

3. Ustalamy o ile chcielibyśmy poszerzyć nasz element.

Najpierw ustalamy wartość maksymalnego poszerzenia. Nasz blog nie może być szerszy niż około 990px więc znalezioną aktualną szerokość odejmujemy od tej maksymalnej. W ten sposób otrzymamy liczbę maksymalnego poszerzenia czyli o ile najwięcej możemy powiększyć nasz szablon.

990-770=220px

Teraz możemy się zastanowić o ile chcielibyśmy aby szablon był szerszy. Zapewne jest jakiś powód dla którego poszerzasz szablon, teraz jest miejsce na wzięcie go pod uwagę. Może uważasz, że główna szpalta estetycznie jest zbyt wąska albo chcesz wstawiać w notkach większe zdjęcia. Powód jest w całości twoją sprawą. Musisz teraz tylko policzyć o ile więcej tego miejsca w notkach chcesz mieć.

Light img width:450pxW każdym moim szablonie, w opisie na blogu gdzie go udostępniam podaję liczbę px ujętą w myślniki. To jest maksymalna szerokość ilustracji w notce. Najprościej określić jakiej wielkości ilustracje chcesz publikować i zobaczyć o ile są one za duże.

Załóżmy, że chciałabym dodawać zdjęcia o szerokości 600px, na razie szablon 19 Light, beżowy pozwala na 450px. Prosta matematyka mówi, że brakuje mi 150px.

Liczba, o którą będę poszerzać bloga, nie może być większa niż wyliczona na początku liczba maksymalnego poszerzenia. Mniejsza - bez problemu, większa i przy mniejszych rozdzielczościach ekranu pojawi się nielubiany i niewygodny poziomy suwak.

W zasadzie najlepiej będzie jeżeli poszerzać będziemy nasz szablon o najmniejszą możliwą liczbę, ułatwi to nam dalsze działania ale poza tym można robić jak się chce. Ja dzisiaj poszerzę szablon 19 Light, beżowy maksymalnie jak się da czyli o 220px.

4. Poszerzamy blog i główną szpaltę

Celem dzisiejszej notki jest poszerzenie głównej szpalty z treścią. Konieczne więc jest też poszerzenie wszystkich kontenerów, które są wcześniej. Nie da się powiększyć salonu bez powiększania domu (no ewentualnie kosztem innego pomieszczenia co jest porównaniem pasującym również do szpalt, skoro nic nie odejmowaliśmy to powiększać musimy wszystko).

Poszerzając główna szpaltę musimy zmienić wartości szerokości we wszystkich miejscach, które związane są z szerokością głównej szpalty. Kontenery wcześniej są niezbędne ale z powodów estetycznych także kilka niezależnych od notek kontenerów może wymagać poszerzenia.

W szablonie 19 Light, beżowym szerokość podobną do całej głównej szpalty ma tytuł bloga, dodatkowe górne menu czy udawana stopka. Dodatkowo opis jest przesunięty w nieco nietypowe miejsce. W przypadku innych szablonów możliwe, że kategorie także mogą mieć z góry określoną wielkość. Czyli trzeba zwrócić szczególną uwagę i sprawdzić czy w tych elementach jest określona szerokość (width) Jeżeli tak o trzeba ją zwiększyć. Jeżeli nie to zostawiamy je w spokoju: #BlogGlownyBox, #BlogBodyBox, #BlogSzerokaSzpalta, #BlogTytulBox, #BlogTytulText, #BlogTytulOpis, #BlogKategorieBox, #BlogKategorie. Powyższa lista jest jedynie listą możliwych elementów. Wszystko zależeć będzie od tego jak i gdzie będą one wyświetlane oraz czy mają już określone szerokości.

BlogBodyBoxZaczynamy od #BlogGlownyBox, który jest głównym kontenerem zawierającym wszystkie elementy bloga. Jeżeli zmieniasz inny szablon niż 19 Light, beżowy to musisz jeszcze sprawdzić jak sytuacja wygląda w przypadku selektora #BlogBodyBox, którego zawartość jest zależna od wybranego szablonu podstawowego ale mniej więcej podobnie jak poprzedni zawiera całość bloga. Nie zawsze ale jednak czasami także przy nim opisany jest width. Poszerzając którąkolwiek ze szpalt i w nim musimy wprowadzić zmiany.

Mój #BlogBodyBox nie ma określonej szerokości a do szerokości #BlogGlownyBox dodaję moją maksymalną wartość poszerzenia i otrzymuję taką wartość szerokości.

#BlogGlownyBox {
 width:990px;
}

#BlogSzerokaSzpalta

Drugim miejscem niezbędnym i koniecznym będzie już punkt docelowy, czyli selektor opisujący szpaltę z główną treścią bloga: #BlogSzerokaSzpalta. Niemal na pewno szerokość będzie tam określona i musimy ją zwiększyć o tą sama wielkość co zwiększyliśmy już główny kontener bloga. Czyli prosta arytmetyka: 500+220=720px.

#BlogSzerokaSzpalta {
 width: 720px;
}

Nie oznacza to, że w notce będziemy mieli tyle miejsca, to możliwe ale niepewne. Po drodze od szpalty z główną treścią do kontenera treścią notki wielkość ta może się zmniejszyć o marginesy, dopełnienia, ramki... Miejsce w notce na pewno nie będzie większe a najprawdopodobniej będzie mniejsze. W przypadku szablonu 19 Light, beżowego opisuję też margines przy treści notki aby nie zachodziła ona na gradientowe tło. Dodaję tam 20px po obu stronach. Do tego dochodzi jeszcze niewielka beżowa ramka wokół ilustracji co daje łącznie wartość 50px którą odejmę od tej wpisanej w szerokiej szpalcie i mam maksymalny rozmiar ilustracji w notce: 670px.

W zasadzie proces poszerzania mamy zakończony bo w najprostszym ujęciu aby poszerzyć szeroką szpaltę musimy zmienić jej szerokość i szerokość głównego kontenera, i tyle.

5. Dostosowujemy rozmiar innych elementów

#BlogKategorieBox i #BlogKategorieTen punkt nie jest konieczny, szpalta jest poszerzona i jest to dobrze zrobione. Jeżeli inne elementy na blogu nie mają opisanej szerokości wszystko będzie estetycznie i bezproblemowo. Często jednak w niektórych miejscach dodana jest konkretna szerokość aby poprawić wygląd czy położenie jakiegoś elementu. Jednym z tych miejsc często są kategorie. Czasem główny boks z kategoriami ma opisaną szerokość ale chyba częściej width dodawany jest do samych kategorii aby odsunąć link do RSS. Trzeba więc sprawdzić oba te miejsca. W szablonie 19 Light, beżowym kategorie zostawione są w spokoju.

#BlogTytulBox i #BlogTytulText

Miejscem, w którym znacznie ingeruję w wygląd w tym szablonie będzie element tytułowy. Sam tytuł ma się wyświetlać tylko na szerokość głównej szpalty ale opis ma zaś znaleźć się wyłącznie nad wąską. Ze względu na te roszady musiałam określić wielkość każdego z tych elementów osobno. Nie zawsze przy tytule będzie opisany width ale będzie to jednak często więc proponuję tam zajrzeć koniecznie.

#BlogTytulBox to element zawierający całość części tytułowej. Powinna być w tym szablonie na szerokość całego bloga ale bywają szablony w których tytuł bloga znajduje się w szerokiej szpalcie. Dlatego zalecam nie tyle powiększanie do określonej wielkości co powiększanie o określoną wielkość. Jeżeli nie trzeba to nic nie zmieniamy. W moim przypadku muszę dodać 220px.

#BlogTytulBox {
 width:990px;
}

#BlogTytulOpis#BlogTytulText to elementy tytułowy bloga, tylko tytuł. W ramach znacznika o tym selektorze znajduje się link i treść tytułu. Mój wyświetla się tylko nad szeroką szpaltą więc aby był dobrze wycentrowany zmieniam wartość szerokości. #BlogTytulOpis to część z opisem, tylko treścią opisu i niczym więcej. U mnie jest wpisany width ale naśladuje on wąską szpaltę więc nie powinnam go zmieniać.

#BlogTytulText {
 width:720px;
}

W szablonie mam opisane jeszcze górne dodatkowe menu. Również powinno wyświetlać się tylko nad szeroką szpaltą. I będzie nawet jak go nie poszerzę ale pozycjonując absolutnie element muszę określać jego wielkość a więc i górne manu ma width. Warto zwiększyć aby zyskać więcej miejsca na jego elementy i przywrócić mu prawidłowy wyśrodkowany wygląd.

#menuTop {
 width: 720px;
}

#menuTop +220px

6. zwiększamy stopień pisma

To jest konieczny fragment. Stopień pisma zależny jest od długości wiersza (i na odwrót). Im mniejsze litery tym krótsze linie tekstu można nimi pisać. Mówi się, że 45 to minimalna liczba znaków, 66 optymalna do czytania a powyżej 75 znaków będzie niewygodnie czytać linię. To jest jak najbardziej prawda. Wystarczy otworzyć dowolną książkę aby się o tym przekonać. Ekran i internet mają swoją własną specyfikę, nie zawsze te zasady są przestrzegane więc i przyzwyczajenia czytających nieco się zmieniają.

Sposób czytania w swej kwintesencji jest jednak niezmienny. Ogarniamy wzrokiem tekst, ponoć jest o około 10-12 znaków na raz, odczytujemy ich znaczenie i wzrok skacze do następnej grupy. Takich skoków wygodnie jest zrobić 5-6 a potem tekst powinien przechodzić do następnej linii. Łatwiej jest to policzyć dostosowując szerokość łamu do wybranego rozmiaru ale i w drugą stronę da się.

Typografowie mówią, że długość wiersza powinna być trzydziestokrotnością rozmiaru pisma. Wystarczy więc zastosować odwrotne działanie matematyczne i możemy powiedzieć, że rozmiar czcionki powinien być trzydzieści razy mniejszy od długości wiersza.

Moje notki w tym szablonie mierzą około 670 pikseli, podzielone przez 30 daje to 22,(3) co jest bardzo dużym stopniem pisma. Potrzebuję więc zastosować wyjątek i powinnam go jakoś wytłumaczyć.

  • jako font wybrałam Verdanę, która jest dużym pismem więc w stopniu 22 będzie wyglądała na dużo większą niż na przykład Times czy nawet Trebuchet w tym samym stopniu;
    alfabet - alfabet - alfabet
  • wybrałam chorągiewkowe wyrównanie tekstu tylko do lewej krawędzi; przede wszystkim jest to wygodniejsze do czytania w każdych warunkach, trudniej zgubić linijkę; słowa w języku polskim są zazwyczaj dość długie, mają średnio 7-8 znaków więc trudniej i rzadziej tekst będzie wypełniał w pełni długość wiersza
  • zakładam, że tak szeroka główna szpalta potrzebna jest do prezentowania zdjęć a więc wpisy zawierać będą mało tekstu i zgrupowany będzie on po mniej niż trzy wiersze

Przy takiej szerokość nawet biorąc pod uwagę powyższe wymówki nie powinno się stosować rozmiaru mniejszego niż średni (medium) czyli około 16px.

Miejsc na określenie wielkości tekstu jest kilka. W zależności o tego czy rozmiar określony jest względnie czy w postaci stałej możemy zmiany wprowadzać w różnych miejscach. W zasadzie wszystkie elementy bloga poza samą treścią notek mogą pozostać niezmienione bo ich szerokość raczej się nie zmienia. Jeżeli jednak chcemy zmienić wielkość fontu dla całego blogu najlepiej zrobić to w body ale będzie to skuteczne tylko wtedy gdy rozmiar w pozostałych miejscach będzie określony relatywnie.

Aby zmienić rozmiar tekstu tylko w notce należy odszukać grupę selektorów ją opisujących. Jeżeli ich nie ma to należy je w takiej sytuacji dodać: .BlogWpisTresc, .WstepKomentowanegoWpisu, .TrescKomentowanegoWpisu, #StatycznaZawartosc

.BlogWpisTresc, .WstepKomentowanegoWpisu, .TrescKomentowanegoWpisu, #StatycznaZawartosc {
font-size: font-size:1.4em;
}


Ja wybrałam relatywną jednostkę, która zwiększa rozmiar do 140% tego, który był do tej pory. Jest to niemal mniej więcej 15.4px co jest chyba największym rozmiarem Verdany jaki jestem w stanie zaakceptować. Duża Verdana do pięknych nie należy i zresztą nie została stworzona do dużych rozmiarów a nawet wręcz przeciwnie, najpiękniejsza jest niewielka.

Wreszcie dotarliśmy do końca klikamy więc zapisz i sprawdzamy rezultat.


Początkowo nazwa szablonu odnosiła się do wyglądu. Pierwszy szablon Light był jasny i cieniowany na niebiesko, kojarzył mi się z chmurką. Z niebieskiej chmurkowatości zrezygnowałam ale za to zwiększyłam jego lekkość. Pozbyłam się wszystkich zaokrągleń i cieniowań graficznych, zamiast tego cechy te opisałam kodem CSS a tło graficzne dodałam w body aby dodać nieco faktury i oryginalności szablonowi. Wzorek także można sobie wymienić.

Mam nadzieję, że instrukcja wyczerpuje wszelkie pytania i wątpliwości ale jeżeli tak nie jest to zapraszam do komentarzy. Na przykładzie poszerzania powyższego szablonu można zmienić rozmiar niemal każdego. Na koniec gotowy kod do wklejenia w edycji własnego blogu. Taka maksymalna szerokość to tylko przykład, szablonem Light beżowym pobawimy się nieco więcej bo ma w sobie kilka nietypowych rzeczy, które mogą posłużyć za rewelacyjny materiał do nauki albo dla przykładu do zastosowania w innym projekcie.


Jeżeli nie chce Ci się bawić w liczenie i własnoręczne zmiany to ten szablon jest już przerobiony. Aby skorzystać z gotowego kodu należy:

  1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. 0Etheme - Spokojnyupewnić się, że jako szablon podstawowy wybrany jest ten, którego ja używam w 19 czyli 0Etheme - Spokojny (jeżeli nie to zmienić szablon na ten właśnie)
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem: szeroki szablon 19 Light, beżowy (maksymalna szerokość ilustracji 670px)
wtorek, 13 grudnia 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
sympatyksportu
2015/05/22 12:57:01
Fajny poradnik... ale coś mi nie wychodzi. Chiałbym poszerzyć blog w taki sposób, żeby móc zamieszczać większe fotografie.
Niestety jak tylko zmieniam wartość szerokiej szpalty... destabilizuja cały szablon. Linki które znajdują się z prawej strony znikają. Jak mam sobie z tym poradzić?
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...