O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 12 lutego 2012

Niektóre zmiany są trudne do przeprowadzenia. Ciężko jest zmienić klimat szablonu na którego charakter składają się głównie grafiki w tle, jest on dosłownie zszyty na wymiar i tyle (chociaż CSS 3 daje aktualnie dodatkowe możliwości, które eliminują konieczność wykorzystania precyzyjnie zaprojektowanych ilustracji do tła). Są jednak szablony nieco luźniejsze. Owszem mają grafiki ale są one powtarzalne. Owszem mają ozdoby ale są one tworem kodu i w każdej chwil można wykorzystać je do nieco innych celów albo nieznacznie zmienić.

szablon dashed zmiana kolorów

Jednym z takich szablonów jest dashed. Największą jego ozdobą jest kolor więc bardzo łatwo zmienić taki wyróżnik. Co lepsze przypisany jest on tylko linkom (wszystkim za wyjątkiem tytułu bloga i notek) więc ewentualną zmianę przeprowadza się w jednym miejscu. Banalnie proste, nieprawdaż?

Instrukcja najprostsza.

1. Przechodzimy do edycji kodu szablonu (WYGLĄD->EDYCJA CSS)

2. Odszukujemy w szablonie kolor, który chcemy zmienić, np. kolor linków

3. Otwieramy przeglądarkową wyszukiwarkę (Ctrl+F) i wpisujemy tam wybrany kolor.

4. Numer zmienianego koloru zastępujemy w arkuszu numerem nowego wybranego koloru.

5. Upewniamy się, że kolor, którego chcemy się pozbyć nie pojawia się ponownie w szablonie, korzystając z wyszukiwarki przeglądarki.

Klikamy zapisz i gotowe

W dalszej części wpisu dokładny opis całego procesu dla tych co miewają wątpliwości. A na koniec prezent: kolorowy dashed czyli gotowe kody ze zmienionymi kolorami. Wystarczy zastąpić nimi kod pobranego szablonu i gotowe.

Kolorowy Dashed

środa, 08 lutego 2012

Myślałam o różnych rodzajach spisu treści. Układam poszczególne notki w grupy i staram się aby miały zawsze chociaż jeden wspólny tag. Poprawiając notki dzielę je na wstęp i treść bo planuję zwiększyć liczbę wpisów na stronie głównej co powinno przyśpieszyć i ułatwić przeglądanie całego bloga. Szablony są podzielone wg kolorów, czcionek czy ozdób na stronie delicious bo siedem tagów pod pojedynczą notką to trochę mało a delicious pozwala mi nie tyle podlinkowywać notki o szablonach (choć i tak można by było) co od razu blogi z szablonami.

To czego od dawna brakowało na tym blogu to porządny spis treści. Powinien w zasadzie być zrobiony tematycznie ale zamierzam zrobić małą rewolucję w kategoriach tak aby podział był bardzie zrozumiały (przykładowo szablony trzykolumnowe trafią do wspólnej kategorii z pozostałymi bo w większości nie wymagają specjalnego traktowania, za to przeróbki szablonowe dostaną własną kategorię bo na razie w zależności od tego czego dotyczy zmiana to są one porozrzucane po trzech kategoriach).

Dlatego zdecydowałam się na spis chronologiczny, który pomoże mi w sprawnym reorganizowaniu bloga. Na razie na jednej stronie spisu umieściłam po sto lików ale ledwo co się one mieszczą w notce ze względu na wszystkie te opisy i objaśnienia. Dlatego też przy najbliższej okazji ograniczę ich liczbę do dziewięćdziesięciu na stronę.


1-100 | 101-200 | 201-300


Sporo notek jest tam przekreślonych, to są te do których jeszcze się nie dobrałam a planuję. Ich treść nie tyle jest nieaktualna co planuję ją uzupełnić o nowe, pełniejsze informacje, które z biegiem lat zdobyłam.

Podobnie szablony. Wszystkie moje szablony, poza może dziesięcioma prostymi, są aktualne ale zamierzam wzbogacić je o górne menu i jakieś propozycje zmian nadających bardziej indywidualny charakter. Część z nich już zmieniona jest, te obok nazwy szablonu w spisie treści mają też obrazek favikonki umieszczonej na blogu z szablonem.

Spis treści

Ten spis jest chyba na razie bardziej dla mnie ale może komuś się przyda. Gdy wprowadzę trochę więcej zmian w notkach i podzielę wpis pomiędzy większą liczbę stron, tak już na stałe, to podlinkuję go na stronie głównej na stałe.

niedziela, 05 lutego 2012

Reliefowe szablony nie są doskonałe. Brakuje im nieco miękkości, czegoś przyjaznego i osobistego. Uznałam je jednak za skończone bo tą osobistość ma zapewnić użytkownik szablonu. Taki szeroki projekt pasuje tylko do treści wizualnych z niewielkimi opisami więc nie wiedząc co na blogu się znajdzie nie chciałam za bardzo nadawać mu tematu czy stylu.

Połączony efekt szablonu i własnej ilustracji wychodzi natomiast doskonale co mogę potwierdzić własnym doświadczeniem bo na dwóch swoich innych blogach wykorzystałam karminowy i amerykański.

Ilustracje tytułowe na poniższych zrzutach są zupełnie przykładowe i nawet ich w szablonie nie umieszczałam.


07 reliefowy beżowo karmazynowy

Szablon 07 reliefowy, beżowo-karminowy,
na nowym kodzie, dla blogów na blox.pl. -935px- 


08 reliefowy amerykański

08 szablon reliefowy, czerwono-niebieski,
na nowym kodzie, dla blogów na blox.pl. -935px- 


09 szablon reliefowy, czarny

09 szablon reliefowy, czarny,
na nowym kodzie, dla blogów na blox.pl. -935px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami tylko, że jest ona umieszczona pod treścią główną. Udało mi się znaleźć sposób na konkretne określenie jej szerokości przy jednoczesnym elastycznym umieszczeniu dolnego tła, które rośnie wraz z treścią poboczną. Kod do górnego menu mają opisany ale w szablonach na nowym kodzie dodaję mu nieco inny identyfikator (#menu-top).

Nie przygotowałam wersji w pełni dwukolumnowej ale za to zrobiłam coś na kształt... Dla każdego z szablonów przygotowałam trzy wersje z bezwzględnie wypozycjonowanymi elementami z treści pobocznej, są to odpowiednio kategorie, zakładki bądź dodatki. Należy być tylko ostrożnym po przy takim pozycjonowaniu może się pojawić problem na stronie z pojedynczym wpisem gdy ten będzie krótszy niż element pozycjonowany.

niedziela, 29 stycznia 2012

Od dawna planowałam pozbyć się szablonów Light. Były całkiem niezłe, szczególnie niebieski, ale już raczej sprawiały przestarzałe wrażenie. Zarówno wersja fioletowa jak i żółta kolorystycznie od początku były co najwyżej zadowalające. Dlatego zdecydowałam się zachować typ Light ale jako przykład dla kilku właściwości z CSS3 a oryginalne Light zamienić na z beleczką. Fioletowy i niebieski znaleźć można w starszych notkach, w dalszej części wpisu umieściłam linki do nich


26 szablon z beleczką, żółty

26 szablon z beleczką, żółty
na starym kodzie, dla blogów na blox.pl. -500px- 


Szablon jest jasny i prosty. Jego głównym ozdobnikiem jest intensywna beleczka, która jest elementem dodatkowym - jest to górne poziome menu. W tym szablonie bardzo łatwo można dodać własną ilustrację tytułową. Szablon jest powtórką z czerwonego sportowego a tam ilustracja już istnieje.

Krój jest nie-całkiem-typowy i nie-w-pełni-dostępny więc nie każdy zobaczy Cambrię, dla reszty przygotowałam równie śliczną lecz znacznie popularniejszą Georgię.

środa, 25 stycznia 2012

Niedawno w FAQ pisałam o zastępowaniu tytułu bloga ilustracją. To była krótka aczkolwiek bardzo treściwa notka. Pytanie czytelnika można było zinterpretować na kilka sposobów, choćby jako prośbę o pomoc w dodaniu faviconki. Kluczowe w pytaniu były słowa: zmienić nazwę bloga na logo. Czy to faktycznie miało być logo czy po prostu jakiś rodzaj ilustracji to już inna rzecz. W FAQ opisałam jak najprościej zastąpić tekst nazwy bloga ilustracją.

Dodawanie logo do szablonu ZERO

Dzisiaj coś bardzo podobnego, rozwinięcie skrótowego wpisu z FAQ lecz nie będę zastępować oryginalnego napisu z tytułu bloga obrazkiem tylko dodam mu obrazek. Można go w taki sposób umieścić w każdym szablonie i jest to bardzo proste, bez względu czy logo jest obok, nad czy pod tytułem.

Instrukcja ekspresowa:

1. Dodajemy wybrany plik do zasobów bloga

2. W edycji CSS przy części opisującej tytuł dodajemy taki fragment kodu:

#BlogTytulText {
background: url(/resource/twoje-logo.png) no-repeat center top; /* adres twojej ilustracji i jej oczekiwane położenie */
}
#BlogTytulText a {
display:block;
padding-top:128px; /* wysokość ilustracji */
}


Gotowe.

niedziela, 22 stycznia 2012

HTML podręcznikZnaczniki to podstawowy budulec stron internetowych. Zastanawiam się czy lepiej porównać je do cegieł czy do zaprawy i chyba zdecyduję się na zaprawę bo cegłami w tym porównaniu będzie treść strony. Bez odpowiedniego spoiwa treść może nadal być dostępna ale raczej trudna do odczytania. To właśnie znaczniki układają treść w odpowiednie formy. Mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania.

Czasami można spotkać się z określeniem tag HTML. Znaczy to mniej więcej to samo więc można tych słów używać jak synonimów.

TAG = ZNACZNIK

Oczywiście innym znaczeniem tag jest słowo-klucz i związane jest ze sposobem opisu treści notki (patrz chmurka tagów). Te dwa znaczenia są niezależne i nie są ze sobą powiązanie. To trochę jak ze słowem zamek, z kontekstu trzeba wywnioskować o który zamek/tag chodzi. Ja określenia tag html używam raczej rzadko i zazwyczaj wprowadzam go tak jak przed chwilą, wraz ze skrótem HTML.

W dzisiejszej notce opiszę budowę znacznika, sposób zagnieżdżania znaczników, sposób zapisu informacji dodatkowych w postaci atrybutów a także na koniec omówię atrybuty standardowe: id, class, style, title, lang, dir.

wtorek, 17 stycznia 2012

CSSCSS jest jeden i jest go cała masa. Te tajemnicze numerki to nic innego jak kolejne wersje. Ludzie co chwile wpadają na nowe pomysły, moda i gusta ulegają zmianie, technologie są stale rozwijane więc rosną możliwości... to wszystko sprawia, że z góry określona lista możliwości choćby nawet bardzo względna i elastyczna po pewnym czasie przestaje być wystarczająca. Stąd tez się biorą reformy, rewolucje i kolejne wersje.

Dokument który zawiera opis reguł i zasad kaskadowych arkuszy stylów (CSS), nazywa się specyfikacją. Jest to rodzaj listy z wypisanymi możliwościami jakie dają arkusze. Nikt nie mówi w nich jak zrobić ładny szablon a jedynie określa się tam co znaczą poszczególne określenia i jak powinny być one wyświetlane przez przeglądarki. Specyfikacje są opracowywane głównie przez organizację World Wide Web Consortium (W3C) i przechodzą przez wiele etapów, aby ostatecznie uzyskać status rekomendacji W3C.

Obecnie rekomendowaną jest CSS 2.1 (od 7 czerwca 2011) jednakże niektóre moduły CSS3 również są już rekomendowane. Rozpoczęto też już pierwsze prace nad CSS4.

poniedziałek, 09 stycznia 2012

Specyfikacja CSS zawiera różne wytyczne odnośnie tego jakie cechy i w jaki sposób możemy opisywać w arkuszach stylów. Dzisiaj zajmę się zaokrąglonymi narożnikami czyli czymś co nie istniało w starszych specyfikacjach CSS a co od dawna przeglądarki potrafią zastosować.

border-radius

Zaokrąglone narożniki, mimo iż związane z ramkami, wyświetlają się niezależnie od nich. Można więc zaokrąglać narożniki elementów nie posiadających ramek. Dlatego też border-radius nie jest związany z cechą border i nie dodaje się go do skróconego opisu ramek. Jest natomiast ściśle związany z tłem i w tym sensie ramki jako część tła są cechą towarzyszącą border-radius. Ujmując to jeszcze prościej aby można było zaokrąglać narożniki elementu musi on posiadać tło albo ramki (mogą być obie rzeczy może być tylko jedna ale ta jedna MUSI być koniecznie).

Border-radius mimo iż jest cechą specyfikacji CSS3 modułu tła i ramek, który to moduł nie jest jeszcze oficjalną rekomendacją i ma aktualnie (listopad 2011) status rekomendacji kandydującej (następny etap to rekomendacja proponowana a wyżej jest już tylko oficjalna rekomendacja W3C) to jednak prace nad zaokrąglaniem narożników trwają od tak dawna, że najnowsze wersje przeglądarek przestały już nawet używać prefiksów. Do tematu prefiksów jeszcze wrócę zacząć wypadałoby jednak od najprostszych wyjaśnień.

czwartek, 05 stycznia 2012

Maile szablonoweTo pytanie jest bardzo częste w mailach. Gdybym miała sporządzić listę TOP pytań to zapewne zajęło by ono miejsce pierwsze (no, ewentualnie drugie). To poniżej jest nieco enigmatyczne i może w nim chodzić o wiele różnych rozwiązań ale wychodząc z założenia, że odpowiedzi najprostsze są najbardziej oczekiwane zinterpretowałam je jako prośbę o pomoc w zastąpieniu tytułu tekstowego graficznym.

Używam jednego z twoich szablonów. Chciałbym zapytać czy możesz pomóc zmienić nazwę bloga na logo?
Pozdrawiam.

Taka zmiana jest bardzo prosta. Owszem wymaga znajomości CSS ale nie są to jakieś skomplikowane, magiczne tajemnice. Najtrudniejsze w takiej zmianie będzie mnogość rozwiązań. Ile blogów tyle różnych wielkości tytułu i to nie CSS stanowi problem ale właśnie możliwe rozmiary i odstępy. Spróbuję jednak na początek tak bardzo prosto i ogólnie.

1. Logo, tytuł w postaci graficznej etc. ładujemy do zasobów bloga: wchodzimy do edycji bloga, klikamy zakładkę PLIKI i tam dodajemy nasz nowy plik.

2. Przechodzimy do edycji arkusza CSS (WYGLĄD -> EDYCJA CSS) i odnajdujemy fragment poświęcony części tytułowej. Będą to selektory:

  • #BlogTytulBox
    • #BlogTytulText
      • #BlogTytulText h1
        • #BlogTytulText a
        • #BlogTytulText a:hover
    • #BlogTytulOpis

Mogą być w szablonie opisane wszystkie albo tylko ich część, mogą mieć nieco inną formę (szczególnie jeżeli chodzi o kombinatory) ale w zasadzie powyższe w ponad dziewięćdziesięciu procentach przypadków będą więcej niż wystarczające.

Będą one miały własne opisy związane z wyglądem szablonu i trudno mi zgadywać jakie. Trzeba połączyć oba opisy tytułu. Te już istniejące w szablonie i te zaproponowane tutaj do przeprowadzenia zmiany.

Aby zastąpić tytuł tekstowy tytułem obrazowym proponuję podjąć takie działania w arkuszu:

#BlogTytulText {
 background: url(/resource/nazwa_pliku.jpg) left top no-repeat;
/* w nawiasie wpisuje się adres pliku z ilustracją */

}
#BlogTytulText a {
display:block; /* zmienia link w element blokowy, konieczne */
width:100%;    /* szerokość linku */
height:100px;  /* wysokość linku */
text-indent:-9999px; /* gigantyczne ujemne wcięcie tekstu sprawia, że słowa skrywają się poza krawędzią ekranu */
}

Jeżeli masz problem z połączeniem kodu, który już istnieje w Twoim szablonie z tym tutaj zaproponowanym to najprościej będzie jeżeli ten powyższy wkleisz w arkuszu poniżej tego, który już tam jest.

niedziela, 01 stycznia 2012

Niejednokrotnie pisałam o zmianach w szablonie poprzez zastępowanie. Proponowałam aby zastępować grafiki własnymi zdjęciami, wybrane przeze mnie kroje ulubionymi czcionkami czy kolory zmieniać na bardziej odpowiadające własnemu gustowi. Wszystko to łatwo się mówi ale jak człowiek staje w obliczu wielu linijek kodu, których w żaden sposób nie jest w stanie zrozumieć to jest to bardzo zniechęcające.

Nawet jeżeli zdecydujesz się na zmiany to cały arkusz do przejrzenia, linijka po linijce nie jest przyjemną perspektywą. Oczywiście można zaufać własnemu wzrokowi i spostrzegawczości ale wydaje mi się, że może to przynieść nie zawsze kompletne rezultaty. Szczególnie jeżeli początkowo nie używasz często jakiegoś elementu - nie zauważysz, że pominąłeś to miejsce w zmianach.

Ctrl+F

Dlatego bozia kazała programistom wymyślić wyszukiwarki. Każda przeglądarka ma takową. To nie jest wujek Google ani żaden inny Bing, mam na myśli wewnętrzną wyszukiwarkę przeglądarki dostępną najczęściej po wciśnięciu kombinacji klawiszy Ctrl i F. Wyszukiwarka przeglądarkowa nie przeszukuje całego Internetu, sprawdza tylko i aż aktualnie otwartą stronę. Takie rozwiązanie świetnie się przyda gdy wiemy, że na stronie na pewno jest szukana przez nas informacja ale tekst jest bardzo rozbudowany i trudno nam ją odnaleźć. W takiej sytuacji otwieramy wyszukiwarkę, wpisujemy frazę i voila. Szukajka nie tylko przewinie nam stronę do odpowiedniego miejsca ale i podświetli kolorem szukaną frazę.

Każda przeglądarka będzie miała własną wyszukiwarkę. W większości wypadków otworzy się ona po kliknięciu Ctrl + F i wyświetli w oknie przeglądarki, w górnej albo dolnej jej części.

1 , 2 , 3 , 4 , 5 ... 30
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...