O szablonach, ich projektowaniu i moich z tym zmaganiach...
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.

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