szablony katemac

Szablon: typu ZERO

• 01 szablon zero, szary
• 02 szablon zero, kolorowy
• 03 szablon zero, ciemny

Zdecydowałam się zrobić to na podstawie bardzo minimalistycznego szablonu typu zero bo wykorzystuje on jako bazę szablon 0Ftheme (nazywany też Zielonym), którego użyłam chyba tylko ten jeden raz. Ma on jedną bardzo niezwykłą, w porównaniu do reszty, cechę: tytuł bloga umieszcza w wąskiej szpalcie. W przypadku szablonów na nowym kodzie każdy może sprawiać takie wrażenie, układ jest tam dużo bardziej niezależny od kodu HTML. Na starym kodzie jest to z góry określone i tylko Zielony ma taki układ wizualny.

Ilustracja: ikona/logo

Ilustrację planuję umieścić nad tytułem bloga lecz zmieniając położenie dopełnienia (padding) poniższy opis pomoże Ci umieścić logo po dowolnej stronie tytułu. Aby rzecz bardziej przypominała logo wybrałam do sporządzenia przykładu kilka ikonek udostępnionych na stronie www.iconarchive.com (wybierając jedną dla siebie upewnijcie się, że jesteście w stanie spełnić warunki licencji):

• You tube Icon autorstwa mfayaz; przykładowo dla blogów muzycznych, prześmiewczych, których główną treścią są filmy
• Bmw mini Icon autorstwa Cem; dla blogów motoryzacyjnych, miejskich
• Folder Icon autorstwa Iconka.com; uwaga szczur w restauracji czyli blogi kulinarne a także te recenzujące knajpy i restauracje
• Tajmahal Icon autorstwa Iconka.com; tajmahal czyli miłość i orient ale także inne podróże
• Yumtube Icon autorstwa Iconka.com; smaczne filmiki z videoblogów kulinarnych ale i nie tylko

Wykonanie: dodanie ikony nad tytułem bloga

1. Wybrany plik dodajemy do zasobów bloga. Nie powinien on być większy niż przestrzeń przeznaczona na tytuł (szczególnie, jeżeli chodzi o szerokość). Tutaj tytuł umieszczony jest w wąskiej szpalcie i nie może mieć więcej jak 200px. Możemy sobie otworzyć go w nowym oknie bo przyda nam się łatwy dostęp do jego adresu i wymirarów.

2. Przechodzimy do edycji CSS (WYGLĄD -> EDYCJA CSS). Jeżeli tyle co skopiowałeś nowy szablon to upewnij się, że właściwy kod jest w edycji arkusza.

Znajdź fragment opisujący tytuł. W starym kodzie będą to zapewne selektory:

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

Ilustrację można dodać do tekstu tytułu na kilka nieznacznie różnych sposobów. Te sposoby to głównie wybór selektora do którego przypiszę ilustrację. Dzisiaj, dla tego szablonu wybrałam #BlogTytulText. Jest to selektor odpowiedzialny tylko za treść tytułu bloga (nie cały element i nie opis). Jego opis w szablonie zero wygląda aktualnie mniej więcej tak:

#BlogTytulText {
 font-size:1em;
}
#BlogTytulText h1 {
 font-size:1em;
 font-weight:normal;
 margin:0px;
}
#BlogTytulText a {
 color: #AAAAAA;
}
#BlogTytulText a:hover {
 color: #777777;
 background-color: #ffffff;
}

W większości są to cechy związane ściśle z wyglądem tekstu i mają na celu zniwelowanie zmian dokonywanych przez przeglądarkę i wcześniejszy kod z arkusza. Dla większej jasności co jest czym poniżej ilustracja przedstawiająca kod HTML tego elementu. Znacznik nagłówka h1 pojawi się tylko na blogach z włączoną optymalizacją pod wyszukiwarki (tzw. zmiany SEO z końca 2007 roku).

Mam nadzieję, że teraz wszystko jest jasne ale jeżeli nie to już wracam do szczegółowej instrukcji.

Grafikę opisujemy jako tło

Ilustrację, zdecydowałam się przypisać elementowi #BlogTytulText. Dodaję więc właściwość background i jako jej wartość podaję wywołanie pliku z moim wybranym logo i określam jego położenie.

#BlogTytulText {
 background: url(/resource/foldericon_by_Iconka.png) no-repeat center top;
}

• url(/resource/foldericon_by_Iconka.png) to skrócony adres mojej ilustracji umieszczonej w zasobach
• no-repeat oznacza, że ilustracja nie ma być powtarzana
• center oznacza, że w układzie poziomym ma być wyśrodkowana
• top oznacza, że w układzie pionowym ma zaczynać się na samej górze elementu

Należy pamiętać, że najpierw określamy położenie w poziome a potem w pionie. Wartości równie dobrze można podać w pikselach czy procentach, niezbędne jest tylko zachowanie właściwej kolejności.

Póki co widać niewiele.

Ilustrację obejmujemy linkiem

Odpowiedni odstęp mogłabym dodać już przy #BlogTytulText ale chcę aby mój obrazek wyglądał (i przede wszystkim działał) jakby był linkiem więc pozostałe cechy opiszę przy kombinatorze opisującym tytuł blogu jako link. 

Znacznik linku jest elementem śródliniowym, trochę jak słowo czy zdanie w tekście literackim. Wyświetla się w linii z innymi elementami jeżeli są obok niego. Powoduje to, że pewnych cech nie można mu przypisać bo i tak nie zadziałają. Dlatego po pierwsze należy zmienić sposób wyświetlania elementu na blokowy. Teraz już bez problemu mogę określać jego wielkość czy dopełnienie.

#BlogTytulText a {
 display:block;
 padding-top:128px;
}

• display:block; zmienia sposób wyświetlania elementu na blokowy
• padding-top określa odstęp od góry czyli przesuwa tekst niżej; jeżeli chcemy dodać logo na lewo do tekstu należy określić lewy odstęp (padding-left) choć zapewne górny czy dolny też może się przydać (w zależności od wielkości tekstu i loga)
• 128px wielkość mojej ilustracji; jeżeli nie jesteś pewien jakie twoja ma wymiary to otwórz ją w nowej karcie, kliknij prawym przyciskiem myszy, wybierz opcję w stylu pokaż informacje o obrazku i w nowym oknie informacyjnym powinny znaleźć się także wymiary twojej grafiki

I gotowe. Ilustracja (logo) wyświetla się nad tytułem bloga i wygląda (i zachowuje się) jakby była linkiem.

Wpisy na powiązane tematy:

• favikonka - krok po kroku czyli instrukcja dla początkujących
• notka o szablonach zero: stopień najwyższy, dedykowany fotoblogom
• CSS: tytuł bloga - dokładny opis wszystkich selektorów związanych z opisem wyglądu tytułu w szablonie
• CSS: moduł tła - dokładny opis właściwości CSS związanych z tłem
• Co zrobić gdy w edycji CSS pozostał kod starego szablonu
• Jak wymienić obrazek w tytule bloga? - krótkie wyjaśnienie i lista notek na ten temat