O szablonach, ich projektowaniu i moich z tym zmaganiach...
poniedziałek, 26 listopada 2012

Różnych szerokości w szablonie blogowym jest bardzo dużo. Do najważniejszych moim zdaniem należą: szerokość tła części tytułowej, szerokość całego bloga i szerokość dostępnego miejsca w treści notki (np na ilustracje). Każda z nich jest oczywiście inna ale także każda z nich uwzględniać musi nieco inne cechy. Na koniec notki postaram się przybliżyć bardziej szczegółowo te trzy konkretne przypadki ale zacząć muszę od bardziej ogólnych informacji.

Na szerokość składają się wszystkie wartości cech związanych z szerokością i ustawieniami bocznych fragmentów szablonu. Generalnie cała szerokość to CAŁA szerokość a nie tylko wartość width.

CAŁA SZEROKOŚĆ = margin + border + padding + width

zależności między margin border padding i width

Mam nadzieję, że ta ilustracja pomoże zrozumieć zależności. Jak widać na obrazku width to tylko i aż szerokość przeznaczona na zawartość. Zawartością może być nie tylko zwykły tekst ale także ilustracje czy inne elementy i te elementy też mogą mieć opisane marginesy, dopełnienia i ramki.

Po co to wszystko? Ano po to aby ładnie wyglądało. Aby tekst nie dotykał ramki, aby elementy miały łady odstęp, etc. Pamiętaj jednak, że elementów na blogu jest dużo i nie ma potrzeby utrudniać sobie życia aż nadto. Dlatego też opisuj te cechy tylko wtedy gdy to konieczne.

#BlogGlownyBox

Wpisz width przy szerokości całego bloga, pozwoli ci to wygodniej układać elementy jeżeli zechcesz je pozycjonować absolutnie.

Margin jest niekonieczny, szczególnie jeżeli chodzi o wartości w poziomie. Zostawiając go jako auto pozwalasz aby cały blog wyświetlał się na środku okna przeglądarki. Określając jakąś wartość sprawiasz, że staje się odpowiednio przyklejony do bocznej krawędzi okna przeglądarki.

Wpisując padding musisz natomiast pamiętać, że dopełnienie przy tym elemencie dotyczyć będzie nie tylko treści bloga ale i jego części tytułowej. Jeżeli chcesz aby ilustracja umieszczona jako tło tytułu wyświetlała się dokładnie od krawędzi do krawędzi po powinnaś unikać w tym miejscu dopełnienia.

Border jest już elementem bardziej dekoracyjnym więc czy jest czy go nie ma to kwesta estetyki.

całkowita szerokość bloga

Wszystkie powyższe cechy wpisane przy selektorze #BlogGlownyBox stanowią o całkowitej szerokości bloga. Generalnie ma to średnie znaczenie jeżeli blog jest mniejszy niż okno przeglądarki. Gorzej jest w drugą stronę.

To, że okno twojej przeglądarki wyświetla się na ekranie rozdzielczości 1366px nie znaczy, że wszyscy tak mają. A nawet jeżeli mają zazwyczaj to nie znaczy, że zawsze. Ja przykładowo bardzo lubię małe mobilne komputery: netbooki i tablety. Uważam, że to tanie i całkiem praktyczne rozwiązanie dla kogoś kto nie jest permanentnie przyklejony do komputera ale chce mieć go tylko dla siebie. Takie maleństwa często korzystają z rozdzielczości 1024px.

Szerokość ekranu (tzw. rozdzielczość) musi zostać pomniejszona o ewentualny suwak z boku. Jego szerokość zależna jest od przeglądarki czy systemu trudno więc określić z absolutną pewnością ile miejsca zajmie. Bezpiecznie będzie zarezerwować na suwak 20-30 pikseli.

Dlatego chociaż szerokość szablonu zależna jest od projektu to staram się nie robić szablonów szerszych niż 995px - chyba że korzystam z media queries (m.in. szablon zależny od szerokości okna przeglądarki). Nie jest to jednak imperatyw czy jakaś wiedza tajemna, którą przekazano mi w wąskim kręgu zainteresowanych. Ot moja logika.

#BlogTytulBox

Określanie szerokości nie jest tu niezbędne jeżeli jest ona określona w #BlogGlownyBox albo innym elemencie nadrzędnym dla tytułu. W zależności od szablonu bazowego może to być właśnie #BlogGlownyBox albo #BlogSzerokaSzpalta. Aby to określić musisz zerknąć do źródła strony (Ctrl+U) albo sprawdzić z jakiego szablonu podstawowego korzysta twój projekt.

Brzmi to może trochę skomplikowanie ale wcale takie nie jest. Część tytułowa bloga umieszczona jest albo nad całością treści bloga albo tylko nad jedną ze szpalt. W moich szablonach najczęściej korzystam z szablonów podstawowych bloksa które mają tytuł bloga nad całością.

szerokość elementu tytułowego

Jeżeli nie chce Ci się liczyć to spróbuj na oko. Albo zrób sobie zrzut ekranowy (PrtSc) i przytnij go do wielkości jaka się spodziewasz, że tytuł ma. Jeżeli wcześniej zmienisz kolor tła tytułu na czerwony to już w ogóle będziesz mieć pewność, że to są faktyczne wymiary.

Szerokość łatwo jest policzyć. To prosta arytmetyka tylko trzeba sprawdzić odpowiednie selektory. Wysokość tytułu natomiast jest trudniejsza do określenia. Jeżeli jest wpisana (height) to fajnie, dodasz do tego tylko dopełnienie górne i dolne jeżeli są wpisane i po sprawie. Jeżeli element nie ma wpisane height to masz problem, który w zasadzie można rozwiązać tylko na oko bo zależny jest od wielkości kroju tytułu a ten może być różny w zależności od wyświetlanego fontu.

Aby policzyć szerokość zobacz co wpisane jest przy width elementu nadrzędnego dla boksu tytułowego (jak wspomniałam wcześniej najczęściej będzie to #BlogGlownyBox ale zdarzyć się też mogą projekty z innym szablonem podstawowym i wtedy elementem nadrzędnym może być jedna ze szpalt). Zacznij teraz odejmować od tej wielkości wszystkie wielkości, które napotykasz po drodze do elementu tytułowego.

  • Jeżeli tytuł bloga umieszczony jest nad całością treści to sprawa ułatwiona bo w grę wchodzi tylko margines części tytułowej. 
  • Jeżeli tytuł bloga umieszczony jest w którejś ze szpalt liczenia może być nieco więcej ale jeżeli opisana jest szerokość szpalty w której umieszczony jest tytuł to tutaj zaczynasz (szeroka to oczywiście #BlogSzerokaSzpalta a wąska to #BlogWazkaSzpalta) i jak wyżej odejmujesz tylko margines części tytułowej.

Jeżeli w #BlogTytulBox wpisany jest width to wystarczy, że dodasz to tego padding tego elementu i już wiesz ile miejsca zajmować mógł będzie obrazek w tle.

wizualizacja wizualizacja

#BlogBodyBox

Ten element nieco trudniej określić bo zależny jest od szablonu. Ja najczęściej używam jako bazy szablonu Spokojnego albo Białego. One oba mają część tytułową bloga umieszczoną nad wszystkimi elementami treści zarówno głównej jak i pobocznej. Nie wszystkie jednak szablony tak mają. Część tych na starym kodzie tytuł bloga ma umieszczony w szerokiej szpalcie a więc i w elemencie #BlogBodyBox. O ile nie zaznaczę inaczej moje opisy dotyczą szablonów bazowych, które część tytułową mają umieszczoną poza elementem #BlogBodyBox (czyli nad całością treści).

Proponuję nie wpisywać width przy tym elemencie. Jeżeli jest już przy #BlogGlownyBox to o ile nie ma konkretnego powodu to lepiej nie utrudniać sobie życia i zostawić element #BlogBodyBox w spokoju.

W zależności od projektu graficznego użycie padding albo margin będzie bardzo przydatne.

#BlogSzerokaSzpalta

Jeżeli szablon jest bardzo prosty graficznie to wystarczy opisać tutaj width. O ile następne, zawierające się w szerokiej, elementy nie będą miały opisanych żadnych cech związanych z szerokością to width wpisane tutaj będzie jednocześnie szerokością dostępną dla treści wpisów (czyli także maksymalną szerokością ilustracji w notce).

Bardzo często opisuję przy tym selektorze margin. Szpalty nie powinny się stykać zarówno z sobą jak i z krawędziami bloga (jeżeli krawędzie są widoczne). Odstęp dodaje oddechu, uspokaja całość i sprawia, że ze strony przyjemniej się korzysta.

To czy do zapewnienia odpowiedniego odstępu pomiędzy elementami użyję marginesu (margin) czy dopełnienia (padding) zależne będzie od projektu, od tego w jaki sposób zamierzam operować tłem.

Określenie szerokości i odstępów jest istotne w przypadku tego elementu. Teoretycznie określenie szerokości całego bloga zapewnia, że bez względu na szerokość ekranu blog będzie zachowywał określoną stałą szerokość. Wpisanie width przy szerokiej szpalcie zapewnia natomiast właściwe proporcje pomiędzy wąską a szeroką szpaltą. Bez tego ich szerokość ustala przeglądarka w zależności od zawartości.

szerokość miejsca na treść w notce

To chyba najtrudniejszy element do wyjaśnienia. Nie dlatego, że jest w tm coś skomplikowanego ale dlatego, że wyjaśnienia nie da się zamknąć w jednym zdaniu.

Trzeba znaleźć najbliższy element nadrzędny który ma jasno zdefiniowaną szerokość i od tego momentu odejmować wszystkie piksele, które trafiają się po drodze. Tyle jeżeli chodzi o jednozdaniowe wyjaśnienie.

Bardzo często będzie tak, że szerokość szerokiej szpalty (width) będzie jednocześnie szerokością dostępnego miejsca na treść w notce a więc i na ilustracje czy filmiki. Jeżeli jakieś wartości trzeba będzie odjąć to najczęściej będą to dopełnienia i ramki przypisane bezpośrednio ilustracji. W arkuszu szablonu wszystkie te rzeczy mogą być opisane w różnych miejscach więc trzeba się nieco porozglądać.

szerokość miejsca na treść w notceAby wiedzieć czego szukać przedstawiam ilustrację prezentującą zagłębienie treści notki (w sumie to nie mam pojęcia jak to nazwać, mam nadzieję, że słowo zagłębienie wam tutaj pasuje i jest zrozumiałe). Bez względu na szablon bazowy (na starym kodzie) treść notki wgląda z grubsza tak samo.

Wygląda jakby tego było bardzo dużo ale tak nie jest. Zazwyczaj szeroka szpalta ma określona cechę width. Czasami cały boks wpisu może mieć jakiś margines czy dopełnienie ale wcale nie musi. Jeżeli ilustracje we wpisie mają widoczną ramkę to zapewne jest ona w jakiś sposób opisana w szablonie więc jeżeli jest to dopełnienie czy ramka to liczymy te piksele. Jeżeli jest to natomiast cień to nie musimy się nim przejmować - ona nam miejsca nie zabiera.


I to by było na tyle ogólnych informacji o określaniu szerokości bloga i jego poszczególnych części. O wspomnianych cechach CSS napiszę jeszcze przy innej okazji, o selektorach przy których warto opisywać szerokość piszę stronę statyczną, jak będzie gotowa to się nią podzielę. Tymczasem polecam inne powiązane z tematem szerokości wpisy i strony z tego bloga:

sobota, 10 listopada 2012

Co chwilę dodaję jakąś duperelę do moich szablonów i już nawet mnie samej trudno ogarnąć co w którym szablonie już jest a co trzeba dodać. Dzisiejsza duperela to całkiem przydatne górne menu z obrazkami. Ostatnio często dodaję je do szablonów i choć zawsze staram się umieszczać stronę z dokładną instrukcją to myślę, że przyda się i taka notka jak ta dzisiejsza, która wyjaśni jak to zrobić w najprostszej formie.

#menuIkon

Moje ikonkowe menu często są specjalnie stylowane: wtapiają się w tło, powoli zaokrąglają albo zmieniają kolory. Każda z tych rzeczy wymaga innego opisu CSS. Dzisiaj daruję sobie taką szczegółowość i opiszę tylko jak sprawić aby ikonki pojawiły się w wybranym miejscu.

UWAGA! Jeżeli na blogu z którego pobrałaś szablon ikonkowe menu jest widoczne to wystarczy, że w polu na dodatki wpiszesz odpowiedni kod HTML. Skoro ikonki są na blogu z szablonem oznacza to, że ich położenie jest już opisane.

Do stworzenia ikonkowego menu potrzebne będą:

  1. Niewielkie obrazki
    wybrane ikonki dodaj do zasobów bloga
  2. Fragment kodu HTML
    wystarczy prosty kod ilustracji z linkiem otoczony divem o identyfikatorze menuIkon
  3. Odpowiednie stylowanie (CSS)
    trzeba zmienić położeni elementu poprzez cechę position:absolute; i określić nowe położenie względem wybranych krawędzi (top:10px; right:10px;)

Przede wszystkim musisz podjąć decyzję do czego będą linkować elementy z nowego menu i poszukać albo samemu przygotować odpowiednie obrazki. Proponuję zapoznać się z zawartością strony IconArchive, można znaleźć tam prawdziwe skarby, trzeba tylko się upewnić czy licencja pozwala nam je użyć.

Ustal sobie jakiego rozmiaru będą obrazki w tym menu. Niech będzie stały, jednakowy dla wszystkich elementów. Rytm to jedna z cech piękna. Wydaje mi się, że w większości przypadków całkiem odpowiednim rozmiarem będzie 32×32px. Rozmiar dopasuj do stylu szablonu i liczby elementów w menu. Nie przesadzaj z wielkością: to ma być drobne pomocnicze menu a nie logo strony.

Na początek dla przykładu wybrałam bardzo obszerną (436) kolekcję ikon autorstwa dAKirby309 udostępnionych na licencji CC BY 3.0. Są to bardzo proste dwukolorowe wzory prezentujące loga wielu aplikacji, przeglądarek, systemów. W zależności od pomysłu na menu poszukaj sobie odpowiednich dla Twojego bloga ikon. Ja zamierzam stworzyć menu kontaktowo-subskrypcyjne więc potrzebuję podstawowych symboli kontaktu i subskrypcji (via różne serwisy).

Wybrane ilustracje dodajemy do zasobów bloga:

Edycja blogu -> WPISY -> PLIKI -> Nowy plik

Tym razem kod będzie bardzo porosty. Każdy obrazek należy przedstawić w postaci kodu linku. Przy ilustracji konieczny jest atrybut alt a do linku można dodać atrybut title, który dodatkowo wyjaśniał będzie przeznaczenie ikonki. Przykładowo link kontaktowy może mieć w title wpisane zachęcające napisz do mnie.

kod ilustracji z linkiem

Czerwone fragmenty na powyższym przykładnie są niezmienne, każda kreseczka się liczy. Beżowe należy uzupełnić własnymi danymi: adresem strony do której chcesz zalinkować i adresem ilustracji (ikonki) w zasobach twojego bloga.

Gdy przygotujesz taki kod, dla każdej ikonki osobno, całość ubierz w div o identyfikatorze menuIkon. Pozwoli nam to dowolnie dysonować tym elementem. Bez identyfikatora nie mamy jak powiedzieć przeglądarce o co nam chodzi. Teraz gdy nazwaliśmy element (daliśmy mu unikalny identyfikator) możemy go w szablonie wołać po imieniu i ustalić jak ma wyglądać i gdzie ma być położony.

przykładowy kod dla menuIkon

Na powyższym przykładzie czerwone elementy to te kluczowe, które zadecydują o tym, czy będziemy mogli coś zrobić z elementem czy nie. Dowolna zawartość to miejsce na kody poszczególnych ikonek. Całość powinna wyglądać mniej więcej tak: zobacz tekstową wersję przykładowego kodu.

Nowo stworzony kompletny kod wklejamy w polu na dodatki:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

Jeżeli w polu na dodatki masz jakiś kod to nie ma większego znaczenia gdzie wkleisz ten nowy (na początku czy na końcu) o ile nie zrobisz tego w środku jakiegoś innego kodu. Pilnuj aby w polu na dodatki nie było zamieszania. Aby lepiej wszystko widzieć możesz sobie powiększyć pole - kliknij na jego prawy dolny róg i przeciągnij nieco w dół.

Dysponując elementem, który ma konkretną nazwę (identyfikator) możemy z nim zrobić w szablonie wiele różnych magicznych rzeczy. Dla tak prostego elementu jak górne menu wystarczy nam określić położenie.

a. Ustal element względem którego będziesz określać położenie.

Sprawdź jakie są zapisy przy elementach #BlogGlownyBox i #BlogBodyBox, to są dwa nadrzędne dla pola na dodatki elementy. Jeżeli menu dodajesz w szablonie który ja zrobiłam ale w którym nie ma jeszcze opisu takiego menu to jest bardzo duże prawdopodobieństwo, że przy którymś ze wspomnianych elementów będzie wpisane position:relative; Taki zapis określa właśnie nasz element względem którego będziemy opisywać położenie. Sprawdź też czy któryś z tych elementów ma też określoną szerokość. Jeżeli jest to jeden z moich szablonów to zapewne ma.

Jeżeli żaden z wspomnianych dwóch elementów nie ma width to potrzebujesz nieco trudniejszego pozycjonowania względem środka strony. O tym napiszę przy innej okazji. Jeżeli widthwystępuje choćby przy jednym  z wspomnianych selektorów to ok, masz ułatwione zadanie.

Jeżeli, żaden ze wspomnianych dwóch elementów nie ma wpisane position:relative; to dodaj taki zapis do #BlogGlownyBox, zapisz zmiany w arkuszu i sprawdź czy nie spowodowało to jakiś niemile widzianych zmian na twoim blogu. Jeżeli wszystko ok to świetnie. Jeżeli coś nieoczekiwanie zmieniło położenie to skasuj dodany zapis i skorzystaj z nieco trudniejszego opisu określenia położenia względem środka strony.

b. Określ nowe położenie elementu

Jeżeli wszystko jest ok to wystarczy, że na koniec arkusza szablonu wpiszesz kod odpowiedzialny za zmianę położenia elementu:

#menuIkon {
position:absolute;
top:10px;
right:10px;
width:180px;
}

I gotowe. Twój szablon od teraz ma ikonkowe menu.

Położenie ustal biorąc pod uwagę wygląd własnego szablonu. Dla przykładu proponuję przyjrzeć się szablonowi 07 czerwony i czarny. Jest to stary szablon, któremu nie zamierzam dodawać ikonkowego menu. Nad archiwum, w wąskiej kolumnie wyświetla się tam duża ikonka RSS. Jest to świetne miejsce ta takie subskrybcyjne menu więc zamiast jednej dużej ikonki umieszczę tam kilka mniejszych.

Sprawdziłam, zarówno width jak i position:relative; są już wpisane w tym szablonie przy elemencie #BlogBodyBox. Może tak zostać, to bardzo dobre rozwiązanie dla tego szablonu.

Na koniec arkusza dodaję uprzednio przygotowany przykładowy kod i sprawdzam co się stało z moim menu.

Nie jest źle ale kilka rzeczy przydałoby się poprawić nieco. Z szerokością całkiem nieźle się wpasowałam. położenie też jest ok, tylko trochę przesunę całość aby była lepiej ustawiona względem obu krawędzi. Linki w tym szablonie są podkreślone więc to muszę usunąć i na koniec dodam bardzo prosty efekt wtapiania w tło po najechaniu kursorem.

#menuIkon {
 position:absolute;
 top:10px;
 right:0;
 width:177px;
}
#menuIkon a {
 text-decoration:none;
}
#menuIkon a:hover {
 opacity:0.5;
}


Na koniec pozostaje mi tylko ukryć oryginalny przycisk RSS.

#BlogRss { display:none; }

Wybrałam ten szablon jako przykład bo ma wygospodarowane miejsce nad wąską szpaltą. Wystarczy więc ukryć element tam wyświetlający się i już mam miejsce na moje ikonkowe menu. Jeżeli w twoim szablonie brak takiego miejsca to do elementów #BlogWazkaSzpalta, #SkomentujWazkaSzpalta dodaj większy górny margines albo odstęp.


Polecane notki:



Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...