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

Wpisy z tagiem: typ BASIC

sobota, 26 lipca 2008

W poprzednim wpisie zamieściłam kilka wskazówek jak uporządkować elementy w polu na kod html tak aby było łatwiej wyświetlić je jako trzecią szpaltę. Teraz przejdziemy do edycji CSS i przekształcimy jeden z szablonów w wersję xxx. Do tego celu posłuży nam szablon specjalnie w tym celu stworzony:

3X - podstawowy wersja bez x
podstawowy szablon na bloga blox

Rozmiar bloga

Rozpoczynamy od określenia wielkości. Dotychczas blog miał szerokość 775px ale w związku z tym, ze chcemy dodać element wpływający na jego szerokość musimy bloga nieco powiększyć. Docelowa szerokość to 995px. Jest to szerokość, która zdecydowanej większości użytkowników pozwoli prawidłowo wyświetlać wygląd bloga. Według statystyk podanych na stronie ranking.pl niespełna 50% użytkowników korzysta z rozdzielczości ekranu 1024x768. Będzie to nasza docelowa najmniejsza rozdzielczość (drugie 50% używa większych rozdzielczości; użytkownicy 800x600 to nieco ponad 3%).

Szablon 3X - podstawowy wersja bez x (fajna nazwa ;) nieprawdaż?) powstał na bazie Spokojnego i kolejność elementów, którą tu dzisiaj będę opisywać dotyczy właśnie tego układu (wąska szpalta po prawej, tytuł bloga umieszczony ponad wąską i szeroką szpaltą)

Nową szerokość bloga podajemy przy selektorach

  • #BlogGlownyBox
  • A także warunkowo jeżeli selektory te miały wcześniej określoną szerokość, jeżeli nie to nie ma potrzeby niczego zmieniać, dopasują się automatycznie:
    #BlogTytulBox – jeżeli korzystasz z szablonu który tytuł bloga umieszcza na całej jego szerokości
    #NadTytul
    #Stopka
    #BlogBodyBox  - to w elemencie o tym identyfikatorze pojawiają się wszelkie dodatki

Pamiętaj, jeżeli box ma określone jakieś inne elementy wpływające na szerokość (margin, padding, border) to sumę ich wartości left i right musisz odjąć od docelowej wielkości

Miejsce na element TrzeciaSzpalta

Docelowa szerokość bloga – aktualna szerokość bloga = miejsce na trzecią szpaltę
995px-775px=220px

W zależności od szablonu który przekształcasz miejsce to może się nieco różnić wielkością. W przypadku 3X - podstawowy wersja bez x zależało mi właśnie na takiej wielkości. Pozwoli ona na nadanie trzeciej szpalcie tej samej wielkości co wąskiej i pozostawi taki sam odstęp pomiędzy trzecią a szeroką jak szeroką a wąską.

Wiedząc ile możemy mieć miejsca przesuniemy o tyle szeroką szpaltę. W tym celu wykorzystam właściwość margin-left. Dotychczas ta cecha byłą określona jako 0px więc po prostu zmienię jej wartość na 220px. Jeżeli jednak w waszym szablonie szeroka szpalta ma lewy odstęp to zsumujcie liczby.

#BlogSzerokaSzpalta {
MARGIN: 0px 0px 0px 220px;
}

W tym momencie po zapisaniu zmian w waszym szablonie powinno pojawić się puste miejsce. Tam właśnie wypozycjonujemy nowy element.

Pozycjonowanie elementu TrzeciaSzpalta

Do wypozycjonowania elementu wykorzystamy właściwość position. Świetnie opisał ją e-maupa i stamtąd właśnie moja wiedza pochodzi. Wcześniej używałam nieco innej metody.Polecam cały wpis o pozycjonowaniu Podstawy layoutu CSS czesc I choć w zasadzie wykorzystamy to co opisał w ostatnim fragmencie Absolutnie/relatywnie

Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego.

Tym otaczającym elementem będzie oczywiście wspomniany już #BlogBodyBox. Wśród jego właściwości należy dopisać

position: relative;

Teraz każdy element zagnieżdżony w BlogBodyBox a pozycjonowany absolutnie nie wyjdzie poza ramy BlogBodyBox.

W zasadzie mój opis do tego momentu dotyczy także powstania przykładowo szablonu 3X - 03 podstawowy ostatnie komentarze. Teraz jednak przejdziemy do części w której potrzebuje kodu html który zbudowałam poprzednio.

Całości elementów które przenosimy daliśmy jeden znacznik o identyfikatorze TrzeciaSzpalta teraz właśnie wykorzystamy selektor #TrzeciaSzpalta. Będzie to element, który wypozycjonujemy absolutnie. Poza cechą position musimy jeszcze określić jej położenie, dysponujemy właściwościami: top, right, bottm, left. Z oczywistych względów wykorzystamy top i left.

#TrzeciaSzpalta {
width: 190px;
position: absolute;
top:0px;
left:0px;
}

Umieściło to naszą trzecią szpaltę w oczekiwanym miejscu. Teraz pozostaje nam jedynie opisać wygląd nowego elementu. Zaplanowałąm wyglad trzeciej szpalty jako analogiczny do wyglądu wąskiej a więc musiałam określić wyrównanie tekstu, kolory linków, wygląd listy wypunktowanej i wyglad tytułów który nadałam klasę tyt. Fragment CSS dotyczący tych elementów możesz zobaczyć tutaj»

W zależności od tego co umieści się w elemencie TrzeciaSzpalta trzeba będzie to opisać w CSS. W poprzednim wpisie podałam kilka przykładów. Efekt finalny wygląda tak:

3X - 04 podstawowy trzecia szpalta
trzyszpaltowiec

zapraszam do skorzystania

Urodziny_szablony_kate_mac

czwartek, 24 lipca 2008

Poprzednio pokazałam szablon stworzony wyłącznie dla idei trzech kolumn a także szablon w którym zakładki są dzięki trzeciej szpalcie wyświetlane wyżej. W tym wpisie dochodzimy do momentu kiedy standardowa zawartość bloxa nam nie wystarcza.

Aby dodać jakiś element do strony bloga należy wpisać go w pole na kod html. W ten sposób do standardowej zawartości naszego bloxa dodamy dodatkowy element który nie jest opisany w standardowym CSS. W związku z tym że element ten i tak będzie wymagał opisanie a więc równie dobrze można go opisać jako element wizualnej trzeciej szpalty. Do eksperymentu wybrałam skrypt Szymona prezentujący ostatnie komentarze.

Urodziny_szablony_kate_mac

Trzecia szpalta z OSTATNIMI KOMENTARZAMI

Umieszczenie ostatnich komentarzy w trzeciej szpalcie jest najprostszą z prezentowanych dzisiaj propozycji na trzecią szpaltę.

Ponownie przypomnę, że wizualne umieszczenie elementu na lewo od szerokiej szpalty nie znaczy, że on się tam rzeczywiście znajduje. Kolejność elementów ustalona jest w htlm i jest dokładnie taka sama jak była przed zabawą CSSem. Skrypt prezentujący ostatnie komentarze wywoływany jest po wąskiej szpalcie (nie 'w'; elementy dodawane  polu na kod html wyświetlają się w elemencie który w CSS opisany jest identyfikatorem #BlogBodyBox).

Aby umieścić ostatnie komentarze na lewo do szerokiej szpalty należało najpierw wygospodarować tam wizualnie pustą przestrzeń. Następny krok był podobny do tego w szablonie z zakładkami – wypozycjonowałam Ostatnie komentarze absolutnie w ramach elementu BlogBodyBox wypozycjonowanego relatywnie. I gotowe. Teraz wystarczy opisać wygląd ostatnich komentarzy. Ja starałam się aby wyglądały podobnie do elementów wąskiej szpalty.

Szablon został dostosowany do skryptów:

Należy pamiętać, że ostatnie komentarze wyświetlanie w ten sposób nie powinny być 'dłuższe' niż pozostałe elementy bloga.

szablon na bloga w trzech kolumnach
3X - 03 podstawowy - ostatnie komentarze
(przed skorzystaniem przeczytaj zasady)

Szablon ten wyświetla się w trzech kolumnach tylko dzięki pewnym możliwościom jakie daje CSS (czyli opis wyglądu). Czy jest on trzyszpaltowcem?

Poprzedni trzyszpaltowiec w żadnym razie nie był żartem. W szablonie 3X – kategorie stworzyłam wizualnie trzy kolumny przez co osiągnęłam cel – szablon 3X

Rozumiem jednak, że takie rozwiązanie niewielu osobom się przyda i sensu nie ma za wiele. Dlatego też kolejny 3X zrobiłam przenosząc inny element z bloksowego standardu.

Urodziny_szablony_kate_mac

trzecia szpalta z ZAKŁADKAMI

Umieszczenie zakładek nie w wąskiej szpalcie po prawej ale przeniesienie ich na lewo nie sprawiło mi większych trudności (w przeciwieństwie do przeniesienia kategorii). Powodem jest przede wszystkim fakt iż takie rozwiązanie już stosowałam w szablonie Radioblox, choć tam wykorzystałam w tym celu inne właściwości CSS.

Przeniesienie zakładek wymaga przede wszystkim wygospodarowania przestrzeni na nie w odpowiednim miejscu. Po drugie należy je wypozycjonować absolutnie (niejako 'wyjąć' z konstrukcji bloga i przykleić jak żółtą karteczkę na wierzchu w innym miejscu). Trzeba jednak pamiętać iż w rzeczywistości zakładki są dokładnie tam gdzie były czyli jako ostatni element wąskiej szpalty, zmienił się jedynie sposób ich wyświetlania.

Szablon ten także jest trzyszpaltową wersją szablonu podstawowego (29 beżowy, 30beżowy, trzeci handmade, 3X - 01 – kategorie). W odniesieniu do pierwszego (29 beżowy) zrobionego już jakiś czas temu zmieniłam w tym szablon bazowy (html) i proporcje pomiędzy poszczególnymi elementami (co wymagało zmiany plików z grafikami tła).

Szablon został dostosowany do skryptów:

Należy pamiętać, że zakładki wyświetlanie w ten sposób nie powinny być 'dłuższe' niż pozostałe elementy bloga.

szablon na bloga w trzech kolumnach
3X - 02 podstawowy - zakładki
(przed skorzystaniem przeczytaj zasady)

W tym szablonie wąska szpalta rozbita została wizualnie na dwie kolumny. Czy jest on trzyszpaltowcem?

Domaganie się trzeciej szpalty tylko dla samego pomysłu jest dla mnie zupełnie niezrozumiałe. Układ bloga w trzech kolumnach nie jest celem lecz jedynie środkiem do celu. Zadając więc pytanie: jak uzyskać złudzenie bloga trzyszpaltowego? trzeba określić co się chce mieć w tej trzeciej szpalcie.

Urodziny_szablony_kate_mac

Trzecia szpalta z KATEGORIAMI

Umieszczenie kategorii nie w szerokiej szpalcie nad wpisami ale obok nich było jednym z pomysłów które dawno chciałam wypróbować. Pomysł dość specyficzny i teoretycznie dający sporo dalszych możliwości przetwarzania wyglądu bloga. Niestety umiejscowienie kategorii w ten właśnie sposobów jest inaczej wyświetlane w zależności od przeglądarki z której korzystamy. Różnice nie są znaczne i nie powodują, żadnych kłopotów jednak przez niejednolitość wyglądu trudniej zaplanować dalsze przetworzenia pomysłu.

Szablon jest nieco bardziej zaawansowana wariacja na temat wyglądu szablonu podstawowego (29 beżowy, 30 beżowy, trzeci ręczny). Kolory są niezmienione ('szpalta' z kategoriami otrzymała kolorystykę wąskiej szpalty). Zmieniły się natomiast proporcje bloga co spowodowało konieczność wymiany grafiki w tle.

Szablon jest dostosowany do następujących skryptów:

szablon na bloga w trzech kolumnach
3X 01 podstawowy - kategorie
(przed skorzystaniem przeczytaj zasady)

W tym szablonie elementy są wizualnie rozmieszczone w trzech kolumnach. Czy jest on trzyszpaltowcem?

niedziela, 18 maja 2008

Robiąc już jakiś czas temu trzeci szablon ręczny, mniej więcej w połowie pracy zdałam sobie sprawę, że wychodzi mi coś bardzo ciekawego. Miałam przed sobą dwie możliwości: pójść dalej zaplanowana drogą i zrobić szablon handmade albo zrezygnować z tego pomysłu i zobaczyć co wyjdzie z tego szablonu gdy pozbawi się go tematu. Cóż… podejmowanie decyzji nie jest moją mocną stroną.

prosty szablon na bloga beżowy prosty beżowy szablon na bloga dla blox
szablon beżowy - prawy | szablon beżowy - lewy

Uwagi

  • Szablony są niemal identyczne, różnią się jedynie położeniem wąskiej szpalty
  • Wbrew pierwszemu wrażeniu żaden z tych dwóch szablonów nie jest zrobiony na tym samym html co trzeci szablon ręczny ; handmade miał wąską szpaltę umiejscowioną pod tytułem, te maja tytuł w szerokiej szpalcie
  • Szablon posiada tylko jeden element graficzny co przy moim nadużywaniu grafik do stworzenia wyglądu wydaje się być sukcesem
  • Zamierzam potraktować ten projekt jako wersję podstawową i w przyszłości stworzyć coś jeszcze na jego podstawie
  • Tymczasowo jednak ogłaszam przerwę, nie wiem na jak długo niemniej jednak wyższa konieczność i deficyt przygotowanych wcześniej wpisów zadecydowały o zwolnieniu tempa (wolno… wolniej…stop). Obiecuję jednak, że wrócę z regularnymi wpisami i nowymi szablonami.
  • Tymczasem może ktoś chciałby się pobawić BASIC szablonem… zapraszam do skorzystania
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...