szablony katemac

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

Adres blogu z szablonem: http://26szablonkatemac.blox.pl

Link do natychmiastowego pobrania szablonu: skopiuj szablon

Uwagi o szablonie

szerokość szablonu	990px
szerokość części na notkę	510px (+120 na datę)
szerokość pobocznej szpalty	258px
kolor tła	jasne w szerokiej (#e7e9eb), białe w wąskiej (#f4f6f8)
kolor tekstu	grafitowy (#444)
kolor linków	żółty (#d59904)
pozostałe kolory	jaskrawy żółty (#ffc430)
krój użyty w notce	Cambria lub Georgia (w zależności od systemu)
wielkość tekstu notki	medium (około 16px)
interlinia w notce	wartość względna: 130%
maksymalna wielość elementów graficznych w notce	500px
css-owe ramki przy grafikach	tak border:1px solid #cbcbcb; padding:4px; background: #ebedf0 url(../resource/s1_gradient.png) repeat-x left bottom;
wypunktowanie/numerowanie	automatyczne
pogrubienie/kursywa	automatyczne
blok cytatu (blockquote)	automatyczne przesunięcie, kursywa
nagłówki w notce (h1, h2, h3, h4, h5, h6)	automatyczne h3 - powiększone o 10%
wyróżnienie akapitów	automatyczny odstęp
baza bloksowa	stary kod, szablon Spokojny (0Etheme)
skrypty użytkowników, wklejki	avatary w komentarzach, zwijane zakładki, zwinięte archiwum, Ostatnie komentarze, delicious, fotoforum (pionowy)
dodatkowe klasy i identyfikatory	#uStopka - dodawanie udawanej stopki #menuTop - górne menu (długość 988px) .boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Dawniej szablon 26 był szablonem Light, był żółty z zaokrągleniami i cieniowaniami. Nic z tego nie zostało ale szablon dużo zyskał na zmianie, jest mniej udziwniony, bardziej stylowy i bezproblemowy. Jego nowa wersja powstała na bazie czerwonego sportowego ale są też wersje fioletowa i niebieska.

Krój wykorzystany w szablonie to windowsowa Cambria, która jest (tak mi się wydaje) dostępna dopiero od wersji Vista więc dla reszty czytelników wyświetlać się będzie śliczna Georgia.

Zdjęcie w topie można bardzo łatwo dodać. Zasada jest zawsze ta sama. Można spróbować po swojemu, już zrobiłam stronę o selektorach opisujących tytuł. Polecam jednak najprostsze z rozwiązań. W arkuszu dodałam opis ilustracji, która nie jest dodana w zasobach więc nie ma co się wyświetlać czy skopiować. Umieściłam ją po prawej stronie, dokładnie tak jak w sportowej czerwonej wersji, wystarczy więc dodać do zasobów bloga plik o nazwie 26_tyt.gif a znajdzie się on właśnie tam.

Notki na powiązane tematy:

• 24 szablon z beleczką, niebieski
• 27 szablon z beleczką, fioletowy
• Sportowy 01 szablon z beleczką, czerwony
• jedyny istniejący szablon Light, beżowy
• Jak wymienić obrazek w tytule bloga?
• Jak zrobić górne poziome menu?

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

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.

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

Budowa znacznika

W większości przypadków znacznik składa się z części otwierającej i zamykającej, które różnią się od siebie ukośnikiem. Jest kilka wyjątków, są to znaczniki, które nie mogą zawierać innych znaczników ale także one powinny kończyć się rodzajem zamknięcia.

Dla znaczników obowiązują małe litery. W starszych stronach można zetknąć się ze znacznikami pisanymi dużymi literami ale takie rozwiązania aktualnie sa niezalecane i mogą przysparzać problemów. Piszemy więc małymi literami.

Każdemu znacznikowi otwierającemu MUSI odpowiadać znacznik zamykający. Znacznik otwierający składa się z ostrych nawiasów i nazwy znacznika umieszczonej pomiędzy nimi. Znacznik zamykający jest niemal identyczny tylko nazwa poprzedzona musi być ukośnikiem.

Wyjątkami są znaczniki nie mogące posiadać zamknięcia dlatego, że nic więcej zawierać w sobie nie mogą, żadnych innych znaczników. Przykładem takiego znaczniku będzie ilustracja. Może mieć ona różne atrybuty (wręcz powinna) ale nie może zawierać w sobie innych elementów. No bo jak wstawić tekst w ilustrację tak aby jedna ilustracja otaczała tekst. Ilustracja to po prostu odwołanie do adresu URL umieszczone w takim znaczniku, który powie przeglądarce, że to co jest pod tym adresem trzeba wyświetlić jako ilustrację. Swego rodzaju zamknięciem jest dodanie ukośnika na koniec znacznika otwierającego.

Zagnieżdżanie znaczników

Znaczniki mogą się zawierać w sobie. Nie wszystkie we wszystkich, czasem dozwolona jest tylko określona kolejność ale opiera się ona na semantyce czyli znaczeniu. Link to najczęściej pojedyncze słowo lub obraz, dość często fraza, czasami zdanie ale niezwykle rzadko cały akapit a już niespotykane są linkujące akapity (jeden link, kilka akapitów). Oznacza to, że znacznik akapitu może otaczać znacznik linku ale w drugą stronę jest to już niespotykane. Kolejność znaczników jest więc intuicyjna. Istotne jest aby znaczniki zamykające dodawać analogicznie od otwierających, w odwrotnej kolejności: abc-cba.

Nie należy też mieszać znaczników, robić jakiś przekładańców. Spróbuj zdjąć skarpetki zanim zdejmiesz buty. Każdy znacznik musi być zamknięty we właściwej kolejności w przeciwnym razie może dojść do konfliktu, którego efekty mogą być przeróżne od lekko niepokojących po zupełną ostateczność czyli niewyświetlanie się treści.

Atrybuty znaczników

Znaczniki mogą mieć atrybuty. Atrybut to coś co może wyróżnić dany znacznik, jakiś parametr zawierający dodatkowe informacje, dodać mu jakoś cechę specyficzną. Przykładowo otoczenie słowa znacznikiem a oznacza link ale bez odpowiedniego atrybutu jest to tylko informacja logiczna dla przeglądarki. Aby ten nasz element zadziałał jako odnośnik trzeba dodać atrybut href i jego wartość w postaci adresu URL.

Podobnie znacznik img odnosi się do ilustracji ale dopiero z atrybutem src ma sens bo ten atrybut właśnie służy do wprowadzenia adresu pliku obrazu.

Każdy znacznik ma swoje własne specyficzne atrybuty, inne będą one dla linku, inne dla ilustracji a jeszcze inne dla przycisku. Jest jednak kilka atrybutów standardowych, które w zależności od potrzeby można dodać do dowolnego znacznika. Będą to: id, class, style, title, lang, dir.

Atrybuty wprowadza się poprzez ich nazwę, następnie znak równości (=) i wartość atrybutu koniecznie umieszczoną w cudzysłowie. Dopuszczalny jest zarówno pojedynczy jak i podwójny jednak stosować go należy konsekwentnie. Jeżeli otworzyliśmy cudzysłów podwójny to i taki mamy zamknąć.

Atrybuty standardowe

Zacznijmy od końca: lang i dir związane są z językiem. Piszę po polsku i używając alfabetu łacińskiego więc wystarczające są dla mnie definicje języka w nagłówku html strony i dlatego nigdy tych znaczników nie używałam.

Title to atrybut tytułu, można go dodać każdemu znacznikowi, nie tylko ilustracjom czy linkom ale także przykładowo akapitowi, liście, wzmocnieniu (pogrubieniu). Title wyświetla się zazwyczaj w postaci dymku po najechaniu kursorem na element, któremu jest przypisany. Sposób prezentacji title zależy od przeglądarki.

Atrybut style służy do dodawania stylów lokalnych, czyli wyglądu specyficznego tylko dla tego miejsca i sytuacji. Po więcej informacji o różnych sposobach implementacji CSS zapraszam do starszej notki. O możliwych stylach, które można tak lokalnie wykorzystać, zapraszam do całej kategorii o CSS i ewentualnie tagu: właściwości CSS.

Jeżeli chodzi o wygląd elementów najbardziej przydatnym atrybutem jest jednak class. Nazwę klasy wybieramy sobie sami. Możemy jej użyć tylko raz albo dodać atrybut klasy o tej samej wartości do wielu elementów. Następnie tą stworzoną przez nas klasę możemy dowolnie opisać w edycji CSS.

Przykładowo na moim blogu, w notkach nie wszystkie ilustracje mają ramki. Niektóre są wstawiane bez odstępów, tła i ramki. Aby za każdym razem nie musieć opisywać stylu dla ilustracji (przy każdej pojedynczej ilustracji na nowo), ustaliłam wygląd podstawowy dla znacznika ilustracji w notce: to są te wszystkie ilustracje w ramkach, o ten styl uznałam za podstawowy i najczęściej przeze mnie używany. Niektórym ilustracjom dodaję jednak atrybut klasy, który następnie opisałam w arkuszu stylów jako pozbawiony ramek, odstępu i tła. I po sprawie. Jak chcę dodać ilustrację bez ramki to dodaję jej specjalną klasę i voila.

Ostatni z atrybutów standardowych, które można dodać do każdego znacznika to id. Ma on dwie magiczne role, zupełnie niezależne od siebie. Po pierwsze identyfikatora można używać jako kotwicy.

Kotwica to taki adres miejsca w treści. Normalnie możemy podać link do strony, do pojedynczej notki. Ale co jeżeli chcemy wskazać (podlinkować) tylko fragment treści. Albo chcemy umożliwić czytelnikom ominięcie jakiegoś fragmentu tekstu i przejście od razu do jakiejś dalszej jego części. Umożliwia tu umieszczenie małego spisu treści np na początku lub na końcu bardziej rozbudowanej notki. Tak działa kotwica, którą dodaje się poprzez atrybut name przy znaczniku linku. Dokładnie w ten sam sposób działa atrybut id przy dowolnym znaczniku a jego zalety są jeszcze większe.

Identyfikatora można używać w podobnej roli jak klasę czy do opisu wyglądu. Jeżeli jakiemuś elementowi na stronie dodamy id to nie tylko możemy do niego linkować ale także bardzo indywidualnie opisać jego wygląd w arkuszu stylów. Dlatego właśnie na jednej stronie id o określonej nazwie może pojawić się tylko raz. Ma być jak numer PESEL, bardzo indywidualny.

Jeżeli chcesz zobaczyć jak to działa to zapraszam do notki na stylowym blogu. W czwartym akapicie znajduje się trzypunktowa lista. Jej linki odnoszą się do zawartości tamtej notki więc po kliknięciu w nie zostaniesz przeniesiony do jej dalszej części.

Na dzisiaj to tyle. Dziękuję za uwagę i zapraszam do innych notek o HTML. Pamiętaj tylko, że HTML (albo dokładniej jak na bloksie XHTML) buduje stronę, stawia jej ściany, wstawia okna. Natomiast za wygląd tych elementów (kolor ścian czy rodzaj szła w oknach) odpowiedzialny jest arkusz stylów. Korzystając z HTMLowych porad, kursów i podręczników wybieraj najnowsze jak to możliwe. No chyba, że chcesz budować stronę będącą internetowym odpowiednikiem staropolszczyzny, dość urokliwe ale nie do końca zrozumiałe.

HTML4 może stanowić podstawę jednak bloks zbudowany jest w XHTML. Jeżeli więc masz wątpliwości używaj rzeczy odpowiednich dla XHTML. Jednocześnie spoglądaj na HTML5, który właśnie powstaje. Jeżeli coś było dopuszczalne lecz jest teraz niezalecane to nie stosuj tego. Po co przysparzać sobie kłopotów.

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

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ąglenie narożników
• border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius - zaokrąglenia wybranych narożników
• zaokrąglenia eliptyczne - jeden narożnik dwa sposoby zaokrąglenia
• zaokrąglenia eliptyczne, zapis skrócony
• zaokrąglenia dodawane cechą z prefiksem

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

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

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.

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.

Wbrew moim oczekiwaniom szampańska zabawa nie jest popularnym tematem szablonów. Jest jednak kilka które kojarzą mi się choć trochę z dobrą zabawą, wszystkie zgrupowałam na liście: Wino, kobiety i śpiew. Kilka z nich, moje faworyty, przedstawiam poniżej, dodaję też alternatywne uaktualnione kody do szablonów.

Po zmianach, notki w każdym z szablonów pomieszczą ilustracje o maksymalnej szerokości 500px.

    

Aby skorzystać ze zaktualizowanego szablonu:

1. Zostaw komentarz (na blogu z oryginalnym szablonem)
2. Skopiuj oryginalny szablon (przycisk "ładny blox")
3. Wejdź w edycję wyglądu bloga i upewnij się, że wybrany jest właściwy (przy szablonach podaję na jakiej bazie są one zrobione) bloksowy szablon
4. Przejdź do edycji CSS i zastany tam kod zastąp tym udostępnionym tutaj przeze mnie

Na koniec tego wstępu małe wyjaśnienie dlaczego zamiast zrobić własne szablony, nawet inspirowane poniższymi, bawię się we wprowadzanie poprawek z których zapewne mało kto skorzysta. Powód jest prosty: sama takich szablonów bym nie zrobiła. Nawet jakbym miała wykorzystać te same kolory, układy, zdjęcia i tak wyszłoby mi coś zupełnie innego.