Wpisy z tagiem: typ A
środa, 11 kwietnia 2012
Stronność szablonu to mocno niejednoznaczna sprawa. W przypadku starego kodu zawsze polecam prawostronne. To nie tyle kwestia wizualnego układu co praktycznych rozwiązań. Na blogu najważniejsza jest treść i to ona powinna ładować się w pierwszej kolejności (w przypadku nowego kodu stronność nie ma znaczenia bo treść zawsze ładuje się tam pierwsza).
Szablon 41 - Times indygo, ze zmienioną stronnością Generalnie stronność to kwesta wyboru ale w przypadku starego kodu bardzo ważnym czynnikiem będzie jednak kolejność ładowania się strony i dlatego dzisiaj jeden z moich szablonów lewostronnych zamienię w prawostronny.
Ta sama instrukcja zmieni szablon lewostronny na prawostronny jak i prawostronny na lewostronny. Wystarczy tylko odpowiednio podmieniać marginesy i bazowe kody. Na koniec notki zwyczajowo udostępniam gotowiec. Polecam
Stronność każdego szablonu można zmienić i to w obie strony. Teoretycznie może to być banalnie proste, wystarczy że większość elementów zostanie odpowiednio zaprojektowana. To sprawia jednakże, że niektóre szaleństwa i oryginalne wyglądowo rozwiązania nie zostaną zastosowane. Łatwość zmiany albo mocno pokombinowany wygląd. Zazwyczaj decyduję się na to pierwsze nie chcąc ograniczać użytkowników moich szablonów. Stronność to relacja prawej strony do lewej. Blogi nie są symetryczne i zresztą nie powinny być, w naszej kulturze czytamy od lewej do prawej czyli w pewnym sensie lewa strona zawsze będzie ważniejsza. Z drugiej strony menu nawigacyjne umieszczone po lewej będzie bardzo dużą zaletą. Jeżeli mamy wiele rzeczy w wąskiej kolumnie, dużo różnych dodatków, widgetów, wklejek, skryptów a wąska kolumna w szablonie na starym kodzie będzie po lewej to najpierw będą musiały się załadować wszystkie te dodatki a dopiero potem właściwa treść czyli notki. Jeżeli popełnisz jakiś błąd dodając kod html dodatków to przy układzie lewostronnym będzie on wpływał na wszystkie następujące po nim elementy czyli także notki. W najgorszym razie brakujący znacznik w kodzie dodatku spowoduje nie wyświetlenie się wpisów. To są chyba najistotniejsze wad lewostronności. Za lewostronnymi natomiast przemawia przyzwyczajenie. Mam wrażenie, że różnego rodzaju portale i strony przyzwyczaiły nas do podstawowej nawigacji umieszczonej na lewo od wpisu więc jej tam oczekujemy. Szablon: typ A Times New Roman
Do dzisiejszej zmiany stronności wybrałam szablon Times New Roman w kolorze indygo. Nie był popularny więc przy ostatnich poprawkach nieco go zmieniłam. Teraz, aby zareklamować jego odnowioną wersję, zdecydowałam się na jego przykładzie pokazać co i jak trzeba zrobić aby zmienić stronność. Górne i dolne tło, zarówno jednolite jak i wzorzyste zrobione jest grafikami. Jego ułożenie w poziomie nie przeszkadza w zmianie. Początkowo także tło treści było stworzone m.in. dzięki grafice. Bloksowa wąska szpalta to tylko ta część od archiwum do tagów. Pozostałe elementy mają inne nazwy albo nie mają ich wcale. Chcąc dodać tam inne tło trzeba to zrobić element wcześniej a następnie wrócić do oryginalnego koloru w szerokiej szpalcie. Można też po prostu dla całego bloga dodać w tle grafikę powtarzalną w pionie o odpowiednio zmienionych kolorach po lewej i prawej stronie. Grafika jest o tyle niewygodna, że utrudnia wszelkie zmiany w szerokości (poszerzenie, dodawanie trzeciej kolumny, zmianę stronności). Dlatego poprawiając szablony postanowiłam na nowo opisać ich tło. Wizualnie pod tym względem nic się nie zmieniło ale jeżeli ktoś kiedykolwiek wcześniej próbował coś pozmieniać w tym szablonie to zauważy, że w nowej wersji zmiany są łatwiejsze do edycji. Jeżeli szablon Times New Roman kopiowałeś już bardzo dawno, jeszcze zanim dodałam obok jednolitego tła wzorki to zanim zaczniesz zmieniać stronność (czy poszerzać albo też dodawać trzecią kolumnę) lepiej ponownie skopiuj szablon. W nowej wersji jest wygodniejszy. 1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.Przede wszystkim istotne jest aby szablon zachował swój charakterystyczny wygląd a zmienił jedynie stronność. Dlatego zmiany zacząć należy od skopiowania oryginalnego kodu css zmienianego szablonu. W tym celu należy przejść do edycji arkusza CSS: Edycja bloga -> WYGLĄD -> EDYCJA CSS -> Edytor CSS Zaznaczyć cały kod (Ctrl+A) i skopiować go (Ctrl+C). Dla bezpieczeństwa proponuję wkleić go (Ctr+V) sobie do notatnika aby nieopatrznie nie stracić go.
Oczywiście zawsze oryginalny kod szablonu można skopiować bezpośrednio z bloga z szablonem. Wystarczy otworzyć źródło strony (Ctrl+U) i odnaleźć adres zewnętrznego arkusza stylów.
2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.Ja zazwyczaj lewostronne robię na bloksowym Białym a prawostronne na Spokojnym. Są one swoimi lustrzanymi odbiciami i je wykorzystałam w serii Times New Roman. Jeżeli jednak zmieniasz inny szablon to zacznij od sprawdzenia jaki szablon podstawowy jest wybrany.
Niestety w edycji bloga szablony nie są podpisane. Pozostaje Ci po wyglądzie ocenić jak nazywa się wybrany szablon. Dla ułatwienia przygotowałam dwie notki o układach. W jednej z nich umieściłam ilustrację będącą sumą szablonów na starym kodzie tam szablony są podpisane bo zrzut pochodzi ze strony zakładania nowego blogu. Możesz też zajrzeć do źródła strony i na podstawie adresu dowiedzieć się co to za szablon. W drugiej wspomnianej notce umieściłam wszystkie możliwe nazwy szablonów na starym kodzie więc można łatwo sprawdzić czy domyśliłeś się właściwej nazwy. Następnie należy dobrać odpowiedni szablon podstawowy o przeciwnej stronności. W drugiej wspomnianej notce jest także odpowiednia tabela ułatwiająca dokonanie wyboru.
Przeciwieństwem Białego, na bazie którego zrobiłam zmieniany szablon Times będą więc: Spokojny, Almost Spring, Kubrick i Connections. Każdy z nich sprawdzi się równie dobrze. W edycji szablonów podstawowych zmieniamy wybrany szablon na ten o właściwej dla nas stronności. Edycja bloga -> WYGLĄD -> SZABLONY PODSTAWOWE 3. Wracamy do edycji CSS i wklejamy z powrotem skopiowany kod.Przechodzimy ponownie do edycji arkusza stylów. Usuwamy znajdujący się tam kod css (Ctrl+A, Delete), jest to kod szablonu podstawowego, zupełnie nam niepotrzebny. Na jego miejsce wklejamy (Ctrl+V) nasz skopiowany kod oryginalnego szablonu. Klikamy zapisz i sprawdzamy efekty. Niewątpliwie kilka rzeczy będzie niezupełnie doskonałych. 4. PoprawkiPrzede wszystkim należy zwrócić uwagę na odstępy między szpaltami. Owszem zdarzają się idealnie symetryczne w swych odstępach szablony ale to raczej wyjątki od reguły bo taka symetryczność powoduje drobne problemy przy innych, częściej dokonywanych zmianach. Dodatkowo należy być ostrożnym z wszystkimi elementami pozycjonowanymi bezwzględnie. Jeżeli mają być położone w tej samej pionowej linii co wąska szpalta to mogą mieć częściowo automatyczne położenie ale nie muszą. I na koniec ogólny układ ze szczególnym uwzględnieniem tytułu bloga. Często jest on przesunięty marginesem bądź dopełnieniem aby znaleźć się we właściwym miejscu. Wszystko to należy poprawić choć nie wszystko jest niezbędne, większość tylko zalecana.
A. Odstępy między szpaltamiZapewne po zmianie wąska i szeroka szpalta będą zbyt blisko siebie. Aby temu zaradzić należy zmienić marginesy ( W przypadku odstępu między szpaltami należy sprawdzić opisy przy trzech selektorach:
W przypadku mojego szablonu Times wszystko jest odpowiednio symetrycznie za wyjątkiem dopełnienia w szerokiej szpalcie. Trzeba zamienić prawe dopełnienie z lewym. Poprawiony fragment powinien wyglądać tak:
Po wprowadzeniu zmiany klikamy zapisz i sprawdzamy efekt. Można oczywiście kontrolę przeprowadzić na koniec ale zawsze lepiej drobną pomyłkę wyłapać od razu a nie potem zachodzić w głowę gdzie to też popełniło się błąd. B. Elementy pozycjonowane bezwzględnieStaram się w notkach opisujących szablony określać, które elementy są przenoszone absolutnie. Taka informacja przydaje się w kilku sytuacjach związanych ze zmianami. Stety-niestety jest to mój nowy pomysł więc taką informację można znaleźć w zaledwie kilku notkach. Z całą pewność absolutnie pozycjonowane jest górne menu i udawana stopka. Jeżeli jest trzecia szpalta to często jej położenie zawdzięczane jest właśnie pozycjonowaniu absolutnemu (ale nie zawsze). Jeżeli szukacz nie jest bezpośrednio nad opcjami bloksa na dole wąskiej szpalty to również przeniesiony jest bezwzględnie. W określonych sytuacjach zdarzało mi się przenieść także w ten sposób kategorie i zakładki jeżeli miały stanowić trzecia kolumnę. I to chyba tyle, więcej absolutnych eksperymentów nie pamiętam. W przypadku elementów pozycjonowanych absolutnie należy sprawdzić określenie położenia w poziomie czyli najczęściej W przypadku mojego szablonu Times wyszukiwarka przeniesiona jest bezwzględnie ale mimo to nie wymaga żadnego poprawiania bo jak widać na załączonym wyżej obrazku sama-się-przeniosła.
Jeżeli natomiast przy
W sytuacji gdy chcemy coś umieścić na szerokości wąskiej szpalty najwygodniejszym rozwiązaniem będzie określenie położenia jako auto i ewentualne powielenie marginesów i dopełnień z selektorów opisujących wąską szpaltę. Jeżeli natomiast naszym docelowym miejscem jest przestrzeń która umieszczona jest w pionowej linii szerokiej szpalty to tutaj najwygodniejszym rozwiązaniem będą już dokładne piksele. W przypadku tej zmiany szablonu Timesa szeroką szpaltę umieszczamy po lewej więc bardzo łatwo będzie określić ile pikseli od lewej krawędzi mają zaczynać się nasze dodatkowe elementy. W związku z tym że obie szpalty maja wpisane boczne dopełnienie o wartości co najmniej
W przypadku tego szablonu to bardzo proste.
Jeżeli korzystasz też z udawanej stopki, która dodaje wzorek także na dole to i ten fragment musisz analogicznie poprawić. Fragment kodu po zmianach ma wyglądać tak:
C. Tytuł bloga i ogólny układOgólny układ zależy od HTML szablonu podstawowego, który wybierzemy i od tego jak bardzo różnił się on będzie od tego który dotychczas był wykorzystywany w szablonie który zmieniamy. W przypadku szablonu Times nie ma wielu różnic do poprawiania. Jedyną naprawdę istotną jest położenie tytułu i opisu bloga. Kontener tytułowy bloga zarówno w szablonie Spokojnym jak i Białym zajmuje całą szerokość bloga i umieszczony jest nad obiema szpaltami. Chcąc nad lewą wąską szpaltą wyświetlać wyszukiwarkę musiałam zrobić dla niej nieco miejsca i przesunąć tytuł i opis. Teraz szukacz jest po prawej i tytuł może wrócić tam gdzie zaczyna się jego kontener. Natomiast po prawej muszę dodać dopełnienie aby jeżeli będzie dłuższy niż szeroka szpalta nie chował się pod szukaczem tylko przechodził do kolejnego wiersza.
Czyli najprościej rzecz ujmując znów symetrycznie zmieniam boczne marginesy i dopełnienia tylko tym razem w elemencie tytułowym.
Ciekawostka. Gdyby nie Jeżeli nie chce Ci się bawić w sprawdzanie, szukanie i własnoręczne zmiany to ten szablon jest już przerobiony. Aby skorzystać z gotowego kodu należy:
Notki na podobne i powiązane tematy: Tagi:
opcja zmiana stronności
typ A
07:39, szablonykatemac ,
DIY czyli zrób to sam
Link Komentarze (1) »
poniedziałek, 12 września 2011
Małe wspomnienie po latach. Ten szablon przechodził wielokrotnie zmiany, to mój drugi projekt w typie który nazwałam A lecz zupełnie nie mogę sobie przypomnieć dlaczego. Coś kołacze mi się po głowie słowo areas, które tłumaczę jako przestrzeń, sfera, obszar. I taka nazwa nawet by mi pasowała. Ten szablon, podobnie jak pierwszy mój szablon tutaj używany, powstał na podstawie Connetions. Starałam się niewiele zmieniać w wielkościach czy przesunięciu elementów (jak tylko próbowałam wszystko się sypało... ot początki) ale jednak stworzyć zupełnie inną przestrzeń, inaczej podzieloną i sprawiającą bardzo odmienne wrażenie. Stąd też układ horyzontalny i zazwyczaj nieograniczona wizualnie przestrzeń poniżej tytułu. Ten szablon piłkarski to jednak z wielu wizualnych powodów wyjątek od reguły chociaż, de iure, to on zapoczątkował całą serię typu A. Szablon sportowy 04 - piłkarski brązowy, Mimo licznych zmian szablon cieszy się raczej umiarkowaną popularnością. Stworzony jest z właściwych skrawków i czasem zastanawia mnie co z nim jest nie tak... Czy problemem jest towarzystwo w jakim był prezentowany? Zielony szablon piłkarski jest dużo bardziej jaskrawy i rzucający się w oczy. A może to zbyt stonowana kolorystyka? Szablon jest przytłumiony i spokojny, może dla niektórych ponury. Próbuję odkryć jego sekret bo bardzo go lubię, dużo bardziej niż pierwszy piłkarski, który tu zrobiłam.
piątek, 18 grudnia 2009
Uwagi:
niedziela, 26 lipca 2009
Szablon pasuje na każdy blog. Wyraźne brązowe ikonki w prawym górnym to jego osobliwość ale pojawi się ona dopiero jak wpisze się do pola na kod html odpowiednie identyfikatory. Jeżeli nie odpowiadają Ci one to bez obaw, tylko RSS jest na stałe. Jeżeli zaś chcesz je to zapraszam do dalszej części notki, wszystko wyjaśnię. Adres szablonu: http://04szablonkatemac.blox.plLink do natychmiastowego pobrania szablonu: skopiuj szablon Adres szablonu: http://05szablonkatemac.blox.plLink do natychmiastowego pobrania szablonu: skopiuj szablon Adres szablonu: http://06szablonkatemac.blox.plLink do natychmiastowego pobrania szablonu: skopiuj szablon
Szablon jest jasny i w gruncie rzeczy prosty. Jego głównym wyróżnikiem jest kolor linków a to bardzo łatwo zmienić. Owszem tło każdego z szablonów jest nieznacznie inne (czerwony ma najjaśniejsze a zielony najcieplejsze) ale poza tym jedyna różnica polega na kolorze linków więc wystarczy zdecydować się na nowy kolor odnośników, wprowadzić w szablonie drobną zmianę i po sprawie. Ikonkowe górne menu
Znacznikowi należy dodać opisany przeze mnie identyfikator a element pojawi się nad tytułem. Jako kontakt opisałam identyfikator Po tym przydługim opisie pora na część praktyczną. Kod wklejony w polu na dodatki powinien wyglądać mniej więcej tak: Mam nadzieję, że powyższy zapis jest zrozumiały. Jasne fragmenty należy zastąpić własną treścią: adresem konta na twitterze, adresem fanpeage'a na facebooku i własnym adresem mailowym do kontaktu. Wpisując kod należy pamiętać o wszystkich znacznikach, nawiasach i cudzysłowach. Każdy znak, za wyjątkiem tych zaznaczonych na jasno powinien znaleźć się w kodzie w dokładnie takiej samej formie.
niedziela, 22 lutego 2009
Rzadko robię szablony w których krojem do pisania notek jest czcionka szeryfowa. Z tego powodu m.in. postanowiłam wykorzystać całkiem dobry wzór jakim jest szablon Times New Roman i powielić go w kilku wersjach kolorystycznych. Już w pierwszej notce są dwa ale w gruncie rzeczy dość podobne do siebie: intensywne, kolorowe.
Szablony pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.
niedziela, 30 listopada 2008
Nowy szablon na bloga utrzymany jest w jasnych kolorach. Ma bardzo prosty wygląd i jedynymi cechami, które go wyróżniają są krój Times New Roman (szablon z serii typograficznie) i dwa intensywne kolory dla ozdoby. Przygotowałam go na razie w dwóch wersjach kolorystycznych (obie intensywne) i różnych stronnościach (układach). Szablon 40 Times, olowkowo-bordowy, Szablon 41 Times, indygo-magentowy, Szablony te wygląd mają raczej uniwersalny i oszczędny. Pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.
niedziela, 19 października 2008
Dzisiaj odsłona czwarta szablonu typu A Clean. Prezentuję cztery nowe kolory szablonu Clean: żółty, zielony, niebieski i fioletowy. Są ciekawe, są stonowane ale równocześnie intensywne. Wszystkie są prawostronne ale to nie problem, łatwo zmienić ich stronność czy przenieść zakładki do trzeciej kolumny.
Zdecydowanie mniej robię szablonów ciemnych więc te są do pewnego stopnia nietypowe. Łatwo w nich zmienić stronność czy przenieść do trzeciej kolumny zakładki są więc też wygodne. Na koniec zaś gratka dodatkowe wzorki do wymiany topu.
niedziela, 12 października 2008
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, 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
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 kolumnyNie 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.
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.
Po trzecie USTAWIAMY
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
|
Archiwum
Ostatnie wpisy
Zakładki:
O blogu i
subskrybcja 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 CSS zewnętrzne strony (głównie podręczniki)
CSS dla średnio zaawansowanych
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
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||