O szablonach, ich projektowaniu i moich z tym zmaganiach...

Wpisy z tagiem: trzecia z dodatkami

wtorek, 12 marca 2013

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.

wtorek, 05 marca 2013

Swego czasu trzecia kolumna na bloksowym blogu była jakimś często irracjonalnym pragnieniem co drugiej osoby, która zadawała mi pytanie związane z wyglądem bloga. Najśmieszniej było gdy o trzeciej kolumnie wspominał ktoś kto w wąskiej szpalcie poza archiwum miał może ze cztery linki i jeden baner w dodatkach. Po co ta Trzecia? Za cholerę nie miałam pojęcia, zapewne przyszłościowo...


przeniesienie wąskiej szpalty do trzeciej kolumny

Szablon 09 - AMPLA zielony, z przeniesioną do trzeciej kolumny bloksową wąską szpaltą
na starym kodzie, dla blogów na blox.pl. -500px-


Z czasem zaczęłam inaczej patrzeć na takie pytania. Jest jednak kilka sposobów na zrobienie trzeciej szpalty i mówiąc szczerze dalej nie przepadam za pytaniami w stylu jak zrobić trzecią kolumnę? Wolę bardziej konkretne: jak przenieść zakładki do osobnej kolumny, jak sprawić aby dodatki wyświetlały się w trzeciej szpalcie, etc. Bo o to właśnie najczęściej chodzi więc dzisiaj wpis o najprostszej, samoistnej wręcz, symetrycznej trzeciej kolumnie. A o tym jak inaczej, ciekawiej czy po prostu praktyczniej zaaranżować układ trzykolumnowy na blogu napiszę przy innej okazji.

Do stworzenia samoistnej, symetrycznej trzeciej szpalty potrzebne będą:

  • Tylko odpowiednie stylowanie w CSS
    • poszerzenie całości przestrzeni bloga
      #BlogGlownyBox {
       padding-left:170px;
       position:relative;
      }
    • przeniesienie bloksowej treści wąskiej szpalty w inne miejsce
      #BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
       position:absolute;
       top:10px;
       left:0;
       width:160px;
      }

Na początek małe wyjaśnienie. Dzisiejsza dodatkowa kolumna powstawać będzie samoistnie czyli nie wymaga żadnej nadzwyczajnej ingerencji w polu na dodatkowy kod HTML. Kolumny stworzą symetryczny układ, gdzie w jednej z wąskich kolumn będą elementy dodatkowe (z pola na dodatki HTML) a w drugiej bloksowa treść poboczna (archiwum, zakładki, chmurka tagów, etc.). Taki podział treści i sposób ułożenia kolumn najlepiej uzyskać poprzez pozycjonowanie bezwzględne.

Jak to wszystko w rezultacie będzie wyglądać pokażę na przykładzie szablonu 09 AMPLA.

Dla kogo taka Trzecia?

Taki układ najlepiej sprawdzi się na blogach na których jest dużo dodatków ale którego autor gubi się w HTML. Wszystkie elementy z pola na kod HTML stworzą samodzielną kolumnę co zapewni dużą swobodę w dysponowaniu tą szpaltą.

Trzecia Szpalta: symetrzyczna, samoistna, z dodatkami, bezwzględna

Wadą tego rozwiązania może być długość bloksowej wąskiej szpalty (tej z zakładkami, tagami i cała resztą). Jeżeli jest w niej więcej rzeczy niż w którejkolwiek z dwóch pozostałych szpalt a tło dookoła bloga jest inne niż to bezpośrednio na blogu to ta przeniesiona wąska szpalta zacznie wystawać.

W przypadku gdy bloksowa wąska szpalta będzie krótsza niż szpalta z dodatkami polecam więc zastosować kilka sztuczek zmniejszających jej długość:

Nowa szerokość bloga

Aby dodać kolejną kolumnę trzeba przede wszystkim poszerzyć całego bloga, no bo gdzieś ta dodatkowa kolumna musi zostać umieszczona. Ostatnio lubię robić szablony o zmiennej szerokości, w takiej sytuacji nie muszę przejmować się tak bardzo ekranem na jakim szablon będzie wyświetlany. Tym razem jednak wszystko zrobimy bardziej tradycyjną metodą, łopatologicznie i po prostu.

Ze względu na wymiary ekranów uważam, że blog nie powinien być szerszy niż 995px. Mieści się wtedy w rozdzielczości 1024px. Siedząc przy dużym ekranie może ci się to wydawać niepotrzebnym ograniczeniem ale spora część urządzeń przenośnych większych niż telefon ale mniejszych niż tradycyjny laptop korzysta z takiej szerokości (tablety, netbooki). Statystyki mojego bloga pokazują, że aż 19,4% odwiedzających korzysta z ekranów mniejszych niż 1280px. Wszystko więc zależeć będzie od twoich czytelników.

Skoro szablon ma mieć układ symetryczny sprawdzamy dwie rzeczy. Po pierwsze jaką szerokość ma blog aktualnie. W przypadku szablonów na starym kodzie będzie to cecha width przy selektorze #BlogGlownyBox a jeżeli nie tam to przy #BlogBodyBox. Do całej szerokości elementu wliczamy też padding, margin i border. Teraz już wiemy ile miejsca zajmuje nasz blog i możemy odjąć tą wartość od maksymalnej szerokości. Wynik to liczba jaką możemy bez obaw dodać do naszego szablonu.

Ta liczba się nam przyda ale zaczynamy po prostu od wpisania nowej całkowitej szerokości bloga. W moim przykładowym szablonie (09 ampla zielony) jest to 940px bo 50 pikseli muszę przeznaczyć na zaplanowane wcześniej ramki i dopełnienie.

#BlogGlownyBox width:940px;

Nowy podział kolumn

#BlogBodyBoxKolejnym etapem jest sprawdzenie jakiej szerokości są istniejące na blogu dwie kolumny i sprawdzenie czy przy elemencie nadrzędnym dla kolumn a podrzędnym w stosunku do głównego kontenera nie są opisane margin, border, padding i width. Tym elementem w przypadku starego kodu zawsze będzie #BlogBodyBox.

Szeroką szpaltę zostawiamy w spokoju. Nie zmniejszamy marginesów czy dopełnień - odstępy są bardzo ważne. Jeżeli brakuje ci trochę pikseli albo uważasz, że szeroka szpalta jest za szeroka to oczywiście możesz odjąć nieco od wartości width. Nie polecam natomiast poszerzania szerokiej gdy chce się dodać trzecią kolumnę. Może się zrobić okropnie ciasno.

W moim przykładowym szablonie (09 ampla zielony) na razie mogę zostawić w spokoju zarówno #BlogBodyBox i #BlogSzerokaSzpalta. W związku z tym, że poszerzyłam blog o 190px a obecna na blogu wąska szpalta ma 200px to pojawiła się mała dysproporcja. Jeżeli jeszcze weźmiemy pod uwagę że nowa kolumna też musi mieć odpowiedni odstęp od szerokiej szpalty to dysproporcja się zwiększa. Zazwyczaj polecam asymetrię, nie jest tak krzykliwa jak symetria i pozwala lepiej skupić się na treści bloga. Dzisiaj jednak pokazuję jak zrobić symetryczny układ więc musimy policzyć boczne kolumny na nowo. Tak aby wyszły nam równej wielkości boczne szpalty.

Zaczynamy od zsumowania dostępnego dla bocznych szpalt miejsca. Dodajemy do siebie liczbę pikseli o którą zwiększyliśmy bloga i szerokość wąskiej szpalty. Odejmujemy od tego 40px na symetryczny odstęp (40px to aktualny odstęp pomiędzy wąską a szeroką, musimy zrobić z drugiej strony taki sam). Dzielimy teraz tą liczbę na pół, no bo w końcu potrzebujemy zrobić dwie kolumny.

#BlogWazkaSzpalta

Mamy już poszerzony blog i mamy nowe wielkości dla bocznych kolumn. Mamy też zaplanowany odstęp pomiędzy nową kolumną a szeroką szpaltą. Czyli wszystko jest - możemy zacząć wpisywać to do szablonu. Poza wpisaniem nowych szerokości dodamy jeszcze odstęp odsuwający szeroką od lewej krawędzi tak aby powstało miejsce na lewą kolumnę i poprzez pozycjonowanie absolutne umieścimy tam wąską szpaltę.

Ilustracja obok pokazuje poszczególne etapy zmian i może w takiej bardziej wizualne formie będzie ci łatwiej zrealizować plan dodania trzeciej kolumny.

wersja graficzna1. poszerzenie bloga

#BlogGlownyBox {
 width:940px; /* wcześniej było 750px */
}

2. zwężenie bloksowej treści wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 width:175px; /* wcześniej było 200px */
}

3. odsunięcie szerokiej szpalty od lewej krawędzi

#BlogBodyBox {
 padding:0 0 0 175px; /* wpisałam tylko tyle ile ma przenoszona kolumna bo odstępy wpiszę gdzie indziej */
}

4. określenie względem czego będziemy pozycjonować

#BlogGlownyBox {
 position:relative; /* w moich szablonach niemal zawsze jest ale lepiej się upewnij */
}


5. ustalenie wysokości części tytułowej (nagłówka)

#BlogTytulBox {
 height:200px; /* tutaj to tylko wysokość w innym szablonie mogą też być ramki, marginesy i dopełnienia */
}

6. nowe określenie pozycji bloksowej wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 position:absolute;
 top:200px; /* wysokość całości nagłówka */
 left:20px; /* dopełnienie głównego kontenera */
}


7. dodanie odstępu pomiędzy przeniesioną szpaltą a szeroką

#BlogSzerokaSzpalta {
 margin:0 40px 0 40px;
}

I gotowe.


Powyższe cechy dostosowałam do szablonu typu AMLPLA. Z pewnymi modyfikacjami można je wykorzystać jako bazę dla przeniesienia wąskiej szpalty w dowolnym szablonie. Najlepiej jeżeli cechy te będziesz opisywać tam gdzie już są wpisane te selektory, pozwoli ci to na bieżąco kontrolować wygląd szablonu. Jeżeli jest jo jednak jedyna zmiana jaką planujesz w szablonie i masz problem z odnalezieniem w kodzie tych wszystkich selektorów to wystarczy jak powyższe style wpiszesz na koniec arkusza.

UWAGA!!! Najlepiej będzie jeżeli wpiszesz te cechy własnoklawiszkowo, unikniesz wtedy przypadkowego skopiowania niewłaściwych znaków, które mogą zakłócić działanie kodu. Wszak nie wszystkie znaki są widoczne. Ewentualnie możesz skopiować ten fragment kodu z czystego dokumentu tekstowego.

-- kod przenoszący wąską szpaltę do trzeciej kolumny --


Notki na powiązane tematy:

niedziela, 10 czerwca 2012

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. Efemeryczny nie wygląda tak efemerycznie jak by nazwa sugerowała ani tak drobno jak go sobie zaplanowałam. Jak zawsze wszystko zależy od zawartości a zawartość, którą wstawiam dla przykładu to zawsze bardzo dużo liter. Jeżeli chcesz jednak prosty niewielki szablon ale zależy ci na dodatkowej kolumnie to Ephemeral będzie idealnym rozwiązaniem.


top 05 - Ephemeral

Szablon top 05 - Ephemeral, trzyszpaltowy,
na starym kodzie, dla blogów na blox.pl. -450px-


Jest jasny, całkiem prosty. Używa czterech wyblakłych kolorów. Jako czcionkę wybrałam mu Corbel w dużym stopniu ale Corbel ma bardzo drobne literki. Szpalty są wąskie i dość ciasno ułożone ale odstępy w pionie mają dodawać szablonowi nieco oddechu w sytuacji gdy, jak na blogu testowym, jest w nim dużo monotonnej treści. Jedynym elementem na który w wąskiej szpalcie użytkownik ma niewielki wpływ jest archiwum. Możesz nie mieć zakładek, nie wyświetlać chmurki tagów czy listy ostatnich wpisów ale archiwum musi być. Otóż nie. W tym szablonie jeżeli jako archiwum wybierzesz listę miesięcy to nie będzie się ona wyświetlać. Ot taki blox myk.

środa, 16 maja 2012

Chyba muszę się poważnie zabrać za notki o szablonach trzyszpaltowych. Z tego co wiem wszystkie działają tak jak trzeba. Nie jest też raczej problemem to, że używałam bardzo różnych metod na tworzenie trzeciej kolumny - zawsze starałam się choćby wspomnieć jak to jest zrobione. To co w pierwszej kolejności chcę zrobić z trzyszpaltowcami o ujednolicić identyfikatory i klasy jakimi je opisuję. I tyle tytułem wstępu zupełnie nie na temat. Pora na szablon.


08 szablon Glossy, czerwony

Szablon 08 Glossy, czerwony,
na starym kodzie, dla blogów na blox.pl. -500px- -540px-


Szablon jest z jednej strony oszczędny wyglądowo a z drugiej stylizowany odrobinę na web 2.0 ze szczególnym uwzględnieniem glossy. Miałam wiele wątpliwości tworząc ten szablon, chciałam aby wyglądem przypominał to co było modne pięć lat temu a jednocześnie nadawał się do użycia aktualnie. Myślałam, że to odrobinę aktualności zapewni poszerzenie szablonu ale akurat jego drobność była chyba najbardziej uniwersalnym atutem więc pozbywając się jej musiałam wymyślić coś nowego na zastępstwo.

wtorek, 20 lipca 2010

Szablon rękodzielniczy niebieski zdecydowanie nie jest moim ulubionym projektem. Jest popularny ale mi się niespecjalnie podoba - jest jakiś taki smutny. Jako trzeci jasny szablon z ornamentem wybrałam go ze względu na jego popularność ale muszę przyznać, że w tej nowej wersji podoba mi sie dużo bardziej (chyba najbardziej ze wszystkich trzech).

szablon ręczny 05 - niebieski» szablon ręczny 13 ornament - niebieski

Bardzo lubię esy floresy nad i pod wąską szpaltą, bąbelki nad tagami czy kropeczki przy ostatnich notkach a nawet wyraźne podkreślenia w TzreciejSzpalcie. Tło zupełnie pozbawione jest faktury ale nie była ona z byt ładna więc nie ma czego żałować za to faktura w wąskiej szpalcie jest teraz bardzo atrakcyjna choć zapewne mogłaby być nieco jaśniejsza aby bardziej pasować do niebieskich plamek.

szablon ręczny 13 ornament - niebieski
szablon ręczny 13 ornament - niebieski

Szablon jak widać jest trzyszpaltowy i są to najbardziej autentyczne trzy szpalty jakie potrafię zrobić. Żadna z kolumn nie jest wyjęta z bloga, wszystkie zachowują wpływ na wielkość przestrzeni bloga.

Aby wszystko wyglądało tak jak na blogu z szablonem trzeba objąć treść Trzeciej szpalty znacznikiem div o identyfikatorze Trzecia. To konieczne. Prawdopodobnie w niektórych przypadkach coś na kształt trzeciej szpalty samo będzie mogło się pojawić ale to raczej kwestia przypadku.

Czyli na początku, przed kodem dodatków należy wpisać a na końcu po kodach wszystkich elementów trzeciej szpalty należny zamknąć znacznik wpisując div.

Proste prawda? Druga rzecz o której warto pamiętać to to, ze elementy w TrzeciejSzpalcie nie powinny być szersze niż 150px.

O tworzeniu TrzeciejSzpalty możesz sobie poczytać tutaj: Tworzenie elementu TrzeciaSzpalta.

Maksymalna szerokość ilustracji w notkach to 500px. Jeżeli ktoś chciałby troszke więcej to niech pozbędzie się ramek przy zdjęciach. Należy znaleźć w CSS ten fragment

.BlogWpisTresc img, .WstepKomentowanegoWpisu img, .TrescKomentowanegoWpisu img, #StatycznaZawartosc img

i skasować niechciane opisy. Dużo miejsca dzięki temu się nie zyska ale te 10px jest do wygospodarowania.

Spokojny - 0EthemeSzablon bazowy to Spokojny (0Etheme). Szablon jest aktualny: ma opisane tagi, stronę statyczna i zmiany SEO. Niektóre sprytne skrypty tez są opisane, kilka wklejek... czyli jak zwykle.

poniedziałek, 19 lipca 2010

Ten szablon w odróżnieniu od pierwszego który określiłam mianem wrzosowy był szablonem handmade ale nigdy nie znalazł się  w serii rękodzielniczej (czyli pod adresem handmade). Serdeczny 02 - Purpurowy z ramkami należy do serii serdecznej zainicjowanej przy okazji Walentynek. Lubię go i to nawet bardzo choć sama zapewne bym z niego nie skorzystała, nie jest w moim stylu. Myślę, że fajnie wyglądałby przerobiony nieco w stylu nowej wersji handmade02 ale jak na razie nie zamierzam go zmieniać - jest dobrze jak jest. Najfajniejsze w tym szablonie są dla mnie kolory - niemal idealne dlatego postanowiłam je wykorzystać w kolejnym projekcie z ornamentem.

» szablon ręczny 12 ornament - purpurowy

W porównaniu do projektu serdecznego ten szablon jest prostszy, oszczędniejszy. Ma mniej oranmentów niż poprzedni, zielony projekt. Te ornamenty które są w szablonie są skromniejsze, nie takie drobiazgowe, narysowane w nieco bardziej zdecydowany sposób: proste esy floresy, zacieki i spirale.

szablon ręczny 12 ornament - purpurowy
szablon ręczny 12 ornament - purpurowy

Szablon jak widać jest trzyszpaltowy i są to najbardziej autentyczne trzy szpalty jakie potrafię zrobić. Żadna z kolumn nie jest wyjęta z bloga, wszystkie zachowują wpływ na wielkość przestrzeni bloga.

Aby wszystko wyglądało tak jak na blogu z szablonem trzeba objąć treść Trzeciej szpalty znacznikiem div o identyfikatorze Trzecia. To konieczne. Prawdopodobnie w niektórych przypadkach coś na kształt trzeciej szpalty samo będzie mogło się pojawić ale to raczej kwestia przypadku.

Czyli na początku, przed kodem dodatków należy wpisać <div id= a na końcu po kodach wszystkich elementów trzeciej szpalty należny zamknąć znacznik wpisując </div>

Proste prawda? Druga rzecz o której warto pamiętać to to, ze elementy w TrzeciejSzpalcie nie powinny być szersze niż 150px.

O tworzeniu TrzeciejSzpalty możesz sobie poczytać tutaj: Tworzenie elementu TrzeciaSzpalta.

Maksymalna szerokość ilustracji w notkach to 500px. Jeżeli ktoś chciałby troszkę więcej to niech pozbędzie się ramek przy zdjęciach. Należy znaleźć w CSS ten fragment

.BlogWpisTresc img, .WstepKomentowanegoWpisu img, .TrescKomentowanegoWpisu img, #StatycznaZawartosc img

i skasować niechciane opisy.

Dużo miejsca dzięki temu się nie zyska ale te 10px jest do wygospodarowania.

0Etheme - SpokojnySzablon bazowy to Spokojny (0Etheme). Szablon jest aktualny: ma opisane tagi, stronę statyczna i zmiany SEO. Niektóre sprytne skrypty tez są opisane, kilka wklejek... czyli jak zwykle.

niedziela, 18 lipca 2010

Zielony szablon rękodzielniczy typu handmade to mój najpopularniejszy szablon. Od początku się podobał i choć zazwyczaj nieco mnie irytuje większa popularność jednego z projektów to w przypadku tego szablonu nic takiego się nie dzieje. Podoba mi się on choć czasami nachodzi mnie ochota aby go nieco odpicować ale obawiam się, że skończyłoby się jak z drugim szablonem rękodzielniczym - zmieniłby się za bardzo. Dlatego aby nie psuć czegoś co się całkiem dobrze sprawdza postanowiłam na bazie zielonego stworzyć coś od nowa co wykorzystywało będzie cechy charakterystyczne zielonego ale będzie zupełnie inne.

szablon  ręczny 01 - zielony» szablon  ręczny 11 ornament - zielony

Patrząc na efekt wydaje mi się, ze moja decyzja o nie zmienianiu oryginału była słuszna. Szablon z ornamentem wyszedł interesująco: ornamenty w wąskiej szpalcie idealnie się wpasowują, większa ilość białego pasuje do tego szablonu choć zmienia nieco jego charakter. To co wyszło mi w nowym projekcie zupełnie średnio to wygląd topu. Niby ornamenty są w tym samym stylu co przy wąskiej szpalcie ale jednak całości czegoś brakuje...

szablon  ręczny 11 ornament - zielony
szablon ręczny 11 ornament - zielony

Szablon jak widać jest trzyszpaltowy i są to najbardziej autentyczne trzy szpalty jakie potrafię zrobić. Żadna z kolumn nie jest "wyjęta" z bloga, wszystkie zachowują wpływ na wielkość przestrzeni bloga.
Aby wszystko wyglądało tak jak na blogu z szablonem trzeba objąć treść Trzeciej szpalty znacznikiem div o identyfikatorze Trzecia. To konieczne. Prawdopodobnie w niektórych przypadkach coś na kształt trzeciej szpalty samo będzie mogło się pojawić ale to raczej kwestia przypadku.

Czyli na początku, przed kodem dodatków należy wpisać div id= a na końcu po kodach wszystkich elementów trzeciej szpalty należny zamknąć znacznik wpisując div.

Proste prawda? Druga rzecz o której warto pamiętać to to, ze elementy w TrzeciejSzpalcie nie powinny być szersze niż 150px.

O tworzeniu TrzeciejSzpalty możesz sobie poczytać tutaj: Tworzenie elementu TrzeciaSzpalta.

Maksymalna szerokość ilustracji w notkach to 490px. Jeżeli ktoś chciałby troszke więcej to niech pozbędzie się ramek przy zdjęciach. Należy znaleźć w CSS ten fragment

.BlogWpisTresc img, .WstepKomentowanegoWpisu img, .TrescKomentowanegoWpisu img, #StatycznaZawartosc img

i skasować niechciane opisy. Dużo miejsca dzięki temu się nie zyska ale te 10-20px jest do wygospodarowania.

Spokojny -  0EthemeSzablon bazowy to Spokojny (0Etheme). Szablon jest aktualny: ma opisane tagi, stronę statyczna i zmiany SEO. Niektóre sprytne skrypty tez są opisane, kilka wklejek... czyli jak zwykle.

sobota, 26 lipca 2008

Liczba elementów bloksowych jest z góry określona. Mamy tytuł bloga, notki i boczną szpaltę, każdą z tych rzeczy edytujesz i zmieniasz jej zawartość w nieco innym miejscu. Każdą z tych rzeczy możesz wykorzystać na swój własny sposób i do wybranego przez siebie celu. Potrzeba tylko choć odrobinę pomyśleć nieszablonowo. Najwięcej możliwości oczywiście dają notki ale drugim takim fajnym miejsce są pola na dodatki: jedno wyświetla się tylko na stronach z pojedynczą notką ale to drugie, to podstawowe pole na dodatkowy kod HTML wyświetla się na blogu zawsze co daje bardzo wiele różnych możliwości. Na przykład stworzenia własnego zestawu elementów w wąskiej kolumnie.

W zasadzie mniej istotne jest to co potem z tym zestawem elementów zostanie zrobione ale głównym powodem do napisania tego wpisu była tzw. trzecia szpalta. Można ją zrobić na kilka sposobów i może zawierać różne elementy więc nie ma jednej uniwersalnej rady ale jeżeli chcesz aby ta trzecia kolumna zawierała rzeczy, które nie są w bloksowym standardzie (dodatki wklejone przez pole na kod HTML) to w zasadzie musisz zacząć od odpowiedniego przygotowania kodu tych dodatków.

element dodatkowy #Trzecia

Szablony z trzecią szpaltą podzieliłam wg. kilku cech (zobacz w chmurce tagów pod hasłem trzecia). Jedyne szablony dla których ta notka nie jest potrzebna do wizualnego powstania trzeciej kolumny to szablony z samoistną trzecią szpaltą (bo przesunięta do trzeciej kolumny jest cała bloksowa wąska szpalta albo wybrana jej część). Nie znaczy to jednak, że ta notka i przy tych szablonach się nie przyda.

 

Tworzenie dodatkowego elementu Trzecia

Samo stworzenie tego elementu jest banalnie wprost proste. Wybieramy te elementy które mają się znaleźć w takim specjalnym kontenerze i obejmujemy je divem o unikalnym identyfikatorze. Ja wybrałam Trzecia (choć nie zawsze zawartość tego elementu wyświetla się w trzeciej kolumnie, to już kwestia CSS). Jeżeli korzystasz z jednego z moich szablonów na starym kodzie to proponuję wybrać tą sama nazwę dla identyfikatora. Jeżeli jednak chcesz dodać trzecią kolumnę do własnego szablonu (którego ja nie robiłam) to nie ma to większego znaczenia, równie dobrze może to być zosia, C-3PO czy TrzeciaKolumnaZeSpisemTresci. Pamiętaj tylko, że każda literka ma znaczenie, jeżeli piszesz dużą to potem w CSS pamiętaj o tym, nie używaj spacji i nie używaj polskich znaków.

O co chodzi z tym obejmowaniem divem o identyfikatorze? Bardzo prosta sprawa. Na początku kodu wpisujesz , następnie przechodzisz na koniec kodu i wklejasz tam znacznik zamykający . I po sprawie. Oba są niezbędne, wszystko co zostało otwarte powinno zostać zamknięte.

identyfikator trzeciej szpalty

zobacz przykładowy kod w wersji tekstowej »

Podpowiedź dla zielonych jak szczypiorek na wiosnę: Jeżeli niepewnie czujesz się z wprowadzaniem zmian w kodzie i boisz się, że popełnisz błąd to umieść w elemencie Trzecia wszystkie dodatki, całą zawartość pola na kod HTML. Czyli w polu na dodatki wklej znacznik otwierający na początku kodu a zamykający na końcu nie przejmując się zawartością.

na początek pola

na koniec pola

Koniec. Trzecia szpalta zrobiona.


Podstawowe uwagi o HTML

  1. Tagi HTML umieszczamy zawsze w ostrych nawiasach
  2. Każdy element musi mieć opisany osobno zarówno początek jak i koniec. Zamykający element różni się od otwierającego tym, że poprzedzony jest ukośnikiem.
    Otwarcie: <div id="Trzecia">
    Zamknięcie: </div>
    (jest kilka wyjątków od tej reguły ale są one nieliczne i łatwo je zapamiętać - <img />, <hr />, <br />)
  3. Nie mieszaj znaczników. Elementy mogą się w sobie zawierać ale pamiętaj o kolejności (zamykasz w odwrotnej kolejności do otwierania: abc – cba).

Te trzy uwagi na początek wystarczą. Można zacząć grzebać w kodzie. Jeżeli po zapisaniu zmian okaże się, że strona się sypie to na 90% jedna z powyższych trzech zasad została złamana.

Co można dodać w HTML

Wszystko co planujesz umieścić w trzeciej kolumnie musi się znaleźć w przestrzeni pomiędzy otwarciem a zamknięciem znacznika o identyfikatorze Trzecia. Polecam kategorię: pomocnik do tworzenia dodatkowego kodu na blox.pl, znajdują się tam notki wyjaśniające co dodawać i jak to działa. W skrócie najprzydatniejsze elementy to:

  • tekst umieszczaj w znacznikach akapitu <p>Przykładowy tekst</p>
    • akapity najczęściej oddzielone są zwiększonym pionowym odstępem co może być przydatne w wizualnym porządkowaniu treści
  • jeżeli nie chcesz kończyć akapitu a jedynie przejść do następnej linijki to używaj znacznika złamania wiersza <br /> – to jest przykład znacznika składającego się tylko z jednej części; 

Przykład wykorzystujący oba znaczniki:

<p>Przykładowy tekst<br />
Drugi wiersz tekstu<br />
Trzeci wiesz i koniec akapitu</p>

  • Innym przykładem wyjątku od reguły zamykania znaczników jest znacznik obrazu
    <img src="http://adres-obrazu.jpg" alt="nazwa alternatywna" />
  • Aby umieścić aktywny odnośnik musisz skorzystać ze znacznika linku
    <a href="http://adres-linku">linkujące słowo</a>

Linkiem nie musi być tylko słowo, linkować może obrazek wtedy zapiszesz to tak:

<a href="http://adres-linku.pl"><img src="adres-grafiki.jpg" alt="opis" /></a>

  • Istnieją specjalne tagi tworzące listy, bardzo przydatne gdy chcesz np. zrobić spis treści. Najbardziej przydatna wydaje się lista nieuporządkowana (czyli wypunktowana choć najczęściej samo wypunktowanie ukrywam w wąskich kolumnach). Listę linków tworzymy przy pomocy polecenia <ul> </ul>. W ramach listy znajdą się poszczególne punkty wykazu czyli nasze elementy z linkami, które wprowadzamy za pomocą polecenia <li> </li>. Należy pamiętać o zagnieżdżeniu w pojedynczym punkcie listy znacznika linku.

Przykładowo:

<ul>
<li><a href="http://adres.pl">linkujące słowo</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>

To są najprostsze, najczęściej używane znaczniki. Po bardziej szczegółowe informacje o znacznikach i dodawaniu im różnych atrybutów zapraszam do kategorii pomocnik HTML.

W zasadzie mogłabym już na tym zakończyć bo element istnieje, ma nazwę i można go pozycjonować w CSS. Sam wiesz najlepiej co znajdzie się w twojej trzeciej szpalcie. Ze względu jednak na estetykę podam jeszcze kilka przykładowych klas, które ja opisuję w swoich szablonach na wzór bloksowych elementów z wąskiej szpalty.

Specjalne klasy dla dodatkowych boksów

W moich szablonach często opisuję dodatkowe rzeczy. Często są to własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga. Takim czymś jest właśnie element o identyfikatorze Trzecia. Są też zupełnie niezależne od niego uStopka czy menuTop. To są jednak elementy, które mogą się pojawić na stronie tylko raz bo używam ich do przeniesienia części kodu w inne miejsce na blogu.

W szablonach jednak dodaje kilka stylów, które można wykorzystywać wielokrotnie, niczego nie przenoszą w jakieś dziwne inne miejsce tylko edytują wygląd danego elementu: a to dodają podkreślenie, a to zwiększają odstęp pomiędzy elementami, zmieniają kolor etykiety tytułowej, etc. Takie style wielokrotnego użytku dodaje się poprzez przypisanie elementowi określonej klasy.

  • Przede wszystkim pojedynczy zbiór elementów ujmuję w divy o klasach boks:
    <div class"boks">Zawartość pojedynczego kontenera</div>
    Taki kontener to coś analogicznego jak element z linkami do dziesięciu ostatnich notek czy pojedynczy folder z linkami, tylko tutaj samodzielnie decydujesz o treści.
  • Aby upodobnić nową szpaltę do istniejącej wąskiej tworzę klasę dla tytułów:
    <div class="tyt">Przykładowy tytuł</div>

Wykorzystując te specjalnie stworzone w moich szablonach klasy i zwyczajne znaczniki HTML można przykładowo stworzyć listę spisu treści:

<div class="boks">
<div class="tyt">
Spis treści</div>
<ul>
<li><a href="http://adres.pl">pierwszy element</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>
</div>


To są wszystko dodatki. Nie są one niezbędną częścią trzeciej szpalty, to co sobie do niej wstawisz to twoja sprawa. Powyższe informacje mają ci jedynie pomóc podjąć decyzję i ewentualnie uporządkować elementy. Jeżeli sobie zupełnie z tym nie radzisz to polecam szablony z samoistna trzecią szpaltą (należą do nich m.in. te z przeniesionymi zakładkami).

Ta notka opisuje tylko podstawy tworzenia własnej zawartości trzeciej kolumny o ustawianiu jej we właściwym miejscu polecam przede wszystkim CSSowe notki z tagów: trzecia bezwzględnie położona i trzecia pływająca. To są dwa podstawowe sposoby umiejscawiania stworzonej dzisiaj treści jako trzeciej kolumny. Zasadniczo nie różnią się wyglądem: pierwszy jest bardziej na chama więc może tworzyć problemy ale pozwala przenieść element w zupełnie dowolne miejsce, drugi jest bardziej naturalny i idealnie współgra z resztą bloga.


piątek, 25 lipca 2008

Kilka dni temu zaprezentowałam nieco zmienione wersje trzech standardowych szablonów: Kubicka, Rin, i Connections. Podstawową zmiana dokonaną w tamtych szablonach była wymiana grafiki w nagłówku. W zdecydowanej większości wyszło mi to raczej przeciętnie. Chyba przywykłam już do większej ingerencji w CSS i wymiana koloru i topu jest jak zatrzymanie się w połowie drogi. Bardzo kusiło mnie aby choć trochę więcej pogrzebać sobie w CSS.

Uaktualnienie: w 2012 roku zmieniałam niemal wszystkie szablony, niektóre dostały nowe topy ale wszystkie otrzymały poprawiony kod CSS więc także wyżej wspomniane Connections i reszta zostały znacznie zmienione (choć niekoniecznie wizualnie).

Dużo bardziej niż szukanie ilustracji do nagłówków i dopasowywanie ich do szablonu odpowiada mi działanie odwrotne: dopasowywanie elementów szablonu do charakteru nagłówka, którego autorem niekoniecznie jestem ja. Oto 10 szablonów stworzonych przy wykorzystaniu nagłówków wykonanych dla Smashing Magazine i dostępnych free. Szablony są dostosowane do niektórych skryptów, dokładniejsze informacje znajdują się w nowszych notkach na temat poszczególnych szablonów.

Urodziny_szablony_kate_mac


autor nagłówka: Nathaniel Heller

top 01 - Lucifix

Szablon top 01 - Lucifix, kolorowy,
na starym kodzie, dla blogów na blox.pl. -500px- 

wygląd poprzedniej wersji szablonu (The Magic Box)


autor nagłówka: Betsy Chang

top 02 - Betsyness

Szablon top 02 - Betsyness, nastrojowy,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (Betsyness)


autor nagłówka: João Filipe Cunha

top 03 - Kultivating

Szablon top 03 - Kultivating, naturalny,
na starym kodzie, dla blogów na blox.pl. -530px- 

wygląd poprzedniej wersji szablonu (Kultivating)


autor nagłówka: Daniela Mincheva

top 04 - Inspiration

Szablon top 04 - Inspiration, pomarańczowy,
na starym kodzie, dla blogów na blox.pl. -565px- 

wygląd poprzedniej wersji szablonu (Inspiration)


autor nagłówka: Nate Legaspi

top 05 - Ephemeral

Szablon top 05 - Ephemeral, trzykolumnowy,
na starym kodzie, dla blogów na blox.pl. -450px- 

wygląd poprzedniej wersji szablonu (Flowers)


autor nagłówka: Wirdy Hamidy

top 06 - This Is How It Feels

Szablon top 06 - This Is How It Feels,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (This Is How It Feels)


autor nagłówka: Jimmy R.

top 07 - New Tech Earth

Szablon top 07 - New Tech Earth, ciemny,
na starym kodzie, dla blogów na blox.pl. -510px- 

wygląd poprzedniej wersji szablonu (New Tech Earth)


autor nagłówka: María

top 08 - Drawing Hands

Szablon top 08 - Drawing Hands, czerwony,
na starym kodzie, dla blogów na blox.pl. -540px- 

wygląd poprzedniej wersji szablonu (Drawing Hands)


autor nagłówka: María

top 09 - cups of tea

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

wygląd poprzedniej wersji szablonu (Cups Of Tea)


autor nagłówka: Robert Winkler

top 10 - Typography

Szablon top 10 - Typography, elastyczny,
na starym kodzie, dla blogów na blox.pl. -500px- 

wygląd poprzedniej wersji szablonu (City Under Heat)


Wszystkie szablony są dostępne i gotowe do użycia. W czerwcu 2012 publikuję szczegółowe notki na temat każdego z szablonów więc linki do nich pojawią się tutaj jak tylko notki zyskają status opublikowanych.

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...