O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Dodawanie logo do szablonu ZERO

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.

Szablon: typu ZERO

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):

youtubeicon_by_mfayaz bmwminiicon_by_Cem foldericon_by_Iconka tajmahalicon_by_Iconka yumtubeicon_by_Iconka

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

BlogTytulBox BlogTytulText BlogTytulOpis

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.

tylko background

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

imege replacement dla szablonu zero

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:

środa, 25 stycznia 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: slavinho, *.ssp.dialog.net.pl
2013/11/19 14:18:12
hej czy pomoglbys mi usprawnic mojego bloga?
-
Gość: slavinho, *.ssp.dialog.net.pl
2013/11/19 14:19:06
moj blog i adres mail www.slavinho.96.lt
oraz player.21@interia.pl
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...