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

3X - czerwony po raz trzeci, czyli przenosimy zakładki

Nie wiem czy robiłam to publicznie ale prywatnie dość gorąco zarzekałam się, że będzie się musiało zdarzyć wielkie halo abym ponownie zrobiła ogólnodostępny szablon 3X. Poprzednie trzyszpaltowe zrobiłam dla samej idei co nie zawsze przynosi dobre rezultaty ale w związku z tym, że bardzo lubię szablon podstawowy także 3X na jego podstawie oceniam pozytywnie. Jednak, tak jak podejrzewałam, 3Xy nie są radykalnie popularne możliwe, że odpowiedzialny za to jest wygląd ale mówiąc szczerze uważam, że trzecia kolumna to bardziej kłopot niż wygoda i tak naprawdę dobrze sprawdza się w prostszych wizualnie projektach więc i każdego nie zadowolę nawet jeżeli połowę robiłabym 3X. Dziś potwierdzenie tej reguły, stosunkowo popularny szablon tym razem w postaci 3X z zakładkami. Żadnego halo nie było czyli muszę bardziej uważać na słowa.


3X - 05 Clean czerwony, przeniesione zakładki

3X - 05 Clean czerwony, przeniesione zakładki,
na starym kodzie, dla blogów na blox.pl. -550px- 


Szablon przeszedł drobną przebudowę gdy w listopadzie 2011 dodawałam mu górne menu. Zasadniczo wszystko zostało po staremu poza szukaczem, który przestał opierać swój wygląd na ilustracji a stał się prawdziwym CSSowym dziełem. W rozwinięciu wpisu wyjaśnię też jak to się stało, że zakładki wylądowały obok archiwum (czyli o kolejnym CSSowym dziele).

Adres szablonu: http://xxx05szablonkatemac.blox.pl

fragmenty szablon 3X 05

Uwagi o szablonie 3X 05 Clean (typ A) czerwonym z przeniesionymi zakładkami
szerokość szablonu 990px
szerokość części na notkę 560px
szerokość pobocznej szpalty 170px
trzecia kolumna szerokość: 200px
zawiera: bloksowe zakładki
sposób: position:absolute;
kolor tła ciemne (#303030)
kolor tekstu jasny (#FFF8DB)
kolor linków czerwony (#CC6666)
pozostałe kolory ciemnoczerwony (#AE3941), brązowy (#c8bc84)
krój użyty w notce Trebuchet MS
wielkość tekstu notki wartość względna: 1.3em z 62.5% (około 13px)
interlinia w notce wartość względna: 1.5em
maksymalna wielość elementów graficznych w notce 550px
css-owe ramki przy grafikach tak
background:#292929;
border:1px solid #2b2b2b;
padding:4px;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i lewa przerywana ramka
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme spokojnystary kod: 0Etheme spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (szerokość 990px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablon jest bardzo neutralny, pasuje więc do wielu tematów. Proponuję go blogującym o dzieciach, o językach obcych, o komputerach i internecie, o filmie, muzyce, mediach, o motoryzacji... to chyba tyle jeśli chodzi o katalog bloksa.

Przenoszenie zakładek do trzeciej kolumny

Nie będzie wielkich wyjaśnień tylko kilka informacji w wielkim skrócie, czyli jak ja to zrobiłam bez dlaczego tak zrobiłam.

Po pierwsze SZEROKOŚĆ.

Szablon, który poszerzałam miał 770px, był więc wąski. Nie należy przekraczać szerokości 995px (aby zmieścić się z rozdzielczości 1024px) więc dla równego rachunku mój docelowy szablon miał mieć 990px czyli poszerzam go o 220px.

padding:right:220px;990px - 770px = 220px

Zamiast bawić się z szerokościami w szablonie o tak jednolitym tle mogłam od razu poszerzyć ciało bloga poprzez dodanie prawego dopełnienia (padding-right:220px;). Nie tylko poszerza ono bloga ale i od razu nie pozwala, żadnemu z elementów blogowych zająć tego miejsca.

Cały blog jest poszerzony ale są w nim dwie rzeczy, które już absolutnie pozycjonowałam wcześniej czyli kategorie i dodatkowe górne menu. Aby dobrze je umieścić we właściwym miejscu musiałam też określić jakiej są wielkości. Mogę to teraz zostawić po staremu ale skoro blog jest już poszerzony to mogę wykorzystać tą przestrzeń i poszerzyć także te elementy. Dodaję więc moje 220px do istniejących tam wartości tak aby nie przekroczyć 990px.

Po drugie WZGLĘDEM CZEGO ustawiamy.

position:relative;Jeżeli zakładki zamierzasz przenieść w innym szablonie niż Clean upewnij się, że w szablonie jest określony element nadrzędny dla zakładek z właściwością position:relative; czyli z polskiego na nasze zobacz czy przy #BlogGlownyBox bądź #BlogBodyBox jest wpisana ta cecha, jeżeli nie to ją tam dopisz. W przeciwnym razie zakładki będziesz ustawiać nie względem bloga a względem okna przeglądarki (moje miało już różne wymiary począwszy od wspomnianego 1024px, a twoje?).

Po trzecie USTAWIAMY

position:absolute;Wiemy już gdzie będziemy element ustawiać więc do dzieła. Możemy nasz kod dodać na koniec każdego arkusza ale dla porządku odszukajmy w CSS selektor #BlogZakladkiBox. Mój był razem z innymi selektorami opisującymi pudełka w wąskiej szpalcie więc dodałam o poniżej na nowo. Ustawianie należy zacząć od ogłoszenia, ze się będzie ustawiać czyli wpisujemy position:absolute;

top:270px;Od góry moje zakładki muszą być odsunięte na wysokość całego topu, to trzeba sobie zmierzyć albo dojść do tego metodą prób i błędów, zazwyczaj topy zajmują około 200-300px. Ja miałam sprawę ułatwioną bo element RSS ustawiałam absolutnie na takiej wysokości więc tylko skopiowałam wartość top:270px;

left:790px;Od lewej moje zakładki muszę przesunąć o całą szerokość istniejącego uprzednio bloga co ułatwia nam sytuację bo jak pamiętasz blog miał 770px szerokości. Banalnie proste ale... Trochę za blisko siebie są te kolumny z treścią poboczną więc przydałoby się odsunąć zakładki jeszcze troszkę; wpisuję więc left:790px;

width:200px;Zostawia mi to 200px na zakładki i choć najczęściej nie będzie problemu jeżeli tego nie wpiszę to jednak... skąd przeglądarka ma wiedzieć jakiej szerokości są moje zakładki jak jej tego nie powiem? Jak będzie łamać wiersze? Ona sobie jakoś poradzi choć nie zawsze to musi być po mojej myśli więc aby było tak jak chcę wpisuję jeszcze width:200px;


I na koniec alternatywne wzory do body, które decydują o wyglądzie topu. Można sobie wymienić na dowolny plik ale nie powinien być on ani zbyt jasny, ani zbyt wzorzysty - na jego tle wyświetlać się będzie tło tytułu. Szerokość jest dowolna, wzór będzie się powtarzać w poziomie, wysokość natomiast nie powinna przekraczać 200px

tło oryginalne paski odwrotne paski 2x jednolite ze wzorkiem

niedziela, 12 października 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2008/11/02 13:24:42
poczęstowałem się - nunosport.blox.pl
-
semi-lka
2009/02/06 21:15:03
Witam, oczywiście skorzystałam z szablonu bo mnie bardzo odpowiada takie rozłożenie na blogu i wszystkie te funkcje, które on posiada - zwijane zakładki, archiwum i ostatnie komentarze. Bardzo mi się one podobają, jednakże szkoda, że nie jest nieco jaśniejszy. Ten podstawowy jest super, ale wolałabym mieć dwie wąskie szpalty po jednej stronie i szkoda, że więcej może nie być takich szabloników.
pozdrawiam i podziwiam, Emila
-
kate_mac
2009/02/07 08:46:49
@semi-lka
teoretycznie mogłoby być ich więcej ale są dość problematyczne i to nawet nie chodzi o ich tworzenie... zobaczymy może jeszcze kilka się pojawi; niedługo będzie zapewne jeden z nowej serii serdecznie ale też będzie miał układ z wąskimi po bokach ale pomyślę też o czymś z układem klarownego ale jasnym
-
semi-lka
2009/02/07 12:24:48
Korzystając z tego szablonu - trochę go zmodyfikowałam kolorystycznie, nie wiem czy tak można, ale dopiero się uczę, a tu te dwa blogi:
slubneprzygotowania.blox.pl/html
semilka76.blox.pl/html
pozdrawiam
-
kate_mac
2009/02/07 16:30:14
@semi-lka
bez obaw można niemal wszystko
widzę, ze potrzebowałabyś czegoś w stylu serii handmade... pomyślę nad czymś takim choć ostatnio po głowie chodzą mi nasycone kolory
-
sikor-world
2009/02/25 14:01:13
świetny szablon, użyłem go na blogu Moje Miasto Wyśniona Kraina dokonując pwnych modyfikacji.
Robisz dobrą robotę!
-
2009/02/26 09:09:02
Nic z tego nie rozumiem, ale bardzo mi się podoba taki układ. Kiedyś może z niego skorzystam.
-
2009/02/27 22:45:54
świetny pomysł:))) właśnie ćwiczę na próbnym blogu Twoja trzecia zakładkę, ale nie wiem, jak ja uzupełniać... Dopiero zaczynam przygodę z takim blogiem:)
-
kate_mac
2009/03/01 10:40:12
@okienko.ona
jeżeli wybierasz wersję zakładki to nic nie musisz specjalnie uzupełniać - zwyczajnie dodajesz zakładki do bloga
jeżeli korzystasz z wersji TrzeciaSzpalta to trzecią kolumnę wypełniasz korzystając z najzwyklejszych znaczników html pamiętając tylko aby je wpisywać w ramach identyfikatora TrzeciaSzpalta - Tworzenie elementu TrzeciaSzpalta
-
2009/03/01 16:39:30
Mam następne pytanie: przyjmując twój szablon mam go w swoim CSS? bo wchodzę tam, ale jest tylko wąska i szeroka szpalta.
-
kate_mac
2009/03/08 13:43:48
@okienko.ona
jeżeli html był inny (w większości przypadków jako bazy używam html bloksowego szablonu Spokojny) to aby zobaczyć szablon w edycji swojego bloga musisz wylogować się i zalogować na nowo
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...