Jak tworzyć szablony? - Wprowadzenie

Zacznijmy od początku. Na bloggerze my nie tworzymy szablonów. My je modyfikujemy. Tworzyć a modyfikować to jednak jest różnica. Natomiast pewne jest to, że tworzymy coś swojego, niepowtarzalnego. No właśnie, jak się za to zabrać? Nie powiem, trochę z tym jest pracy, ponieważ by stworzyć naprawdę dobry i dopracowany szablon trzeba modyfikować wiele elementów. Nawet jeśli mowa jest o szablonie minimalistycznym. Nic nie przychodzi samo. Ale nie martwcie się, nie musicie zaczynać od razu na wysokim poziomie. Chyba nikt tak jeszcze nie zaczął. Praktyka czyni mistrza! Sama się śmieję, że grafik wykonujący szablony jest jak kucharz. Wszystko robisz według przepisu i schematów jednocześnie dodajesz od siebie trochę finezji i szaleństwa. No... i często się eksperymentuje. :) A jaki jest schemat? Najprościej mówiąc, zacznijmy od podstaw:


Szablon = Nagłówek + CSS 

Nagłówek - wykonany w różnych programach graficznych (najczęściej Adobe Photoshop lub Gimp). By wiedzieć jak stworzyć nagłówek najlepiej obejrzeć parę instrukcji graficznych oraz speedartów.
Uwaga! Nagłówek nie zawsze jest potrzebny np. szablony minimalistyczne.

CSS - to język służący do formatowania określonych elementów HTML. Pierwszą rzeczą jaką musimy zrobić by zacząć przygodę z CSS jest otworzenie arkusza: Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS


Selektor - oznacza nazwę poszczególnego elementu, np. .column-right-outer Każdy selektor musi być otwarty znakiem { i zamknięty poprzez }.
Cecha - określa co chcemy edytować w danym elemencie, np. tło - background.
Wartość - jest to najprecyzyjniejsza komenda opisująca cechę danego elementu, każda wartość poprzedzana jest dwukropkiem a zamykana średnikiem, np. kolor tła, lub parametry mierzone w pixelach(px) lub procentach(%).
Uwaga! Wszystkie selektory, cechy i wartości muszą być szczelnie zamknięte, gdyż inaczej nie zadziałają i mogą pojawiać się błędy!

Budowa elementy kodu:
selektor { cecha: wartość; cecha: wartość; cecha: wartość;}

Warto zwrócić uwagę na ;, po każdej wartości. Oddziela to cechy, żeby się nie mieszały, a w kodzie panował porządek.

Przykład:
.post-outer {background-color: #87A071; color: #ffffff; border-radius:  0 20px;}
h2 { text-align: center; color: #ccc;}

Więcej o selektorach, co oznaczają znajdziecie w podstronie Selektory!

Inne ważne kwestie:
  • a na końcu selektora oznacza link. Linki dodatkowo można oznaczyć:
  1. a:link - zwykły link
  2. a:visited - link, w którego kiedyś już weszliśmy
  3. a:active - link, który aktualnie jest aktywny
  4. a:hover - link, gdy najeżdżamy na niego kursorem myszy
np. .post-body {color: #000} - zmieniamy kolor tekstu w poście na czarny
      .post-body a:link {color: #000} - zmieniamy kolor linków w poście na czarny
      .post-body a:hover {color: #fff} - kolor linków w poście po najechaniu na niego kursorem myszy zmienia się na biały
    • Jeśli chcesz edytować element po najechaniu na niego kursorem myszy, dodaj do ostatniego słowa selektora :hover (przykładowo: selektor .date-header span po najechaniu kursorem to .date-header span:hover)
    • Bardzo przydatną komendą (a fachowo deklaracją) jest !important .Gdy chcemy złamać reguły CSS w wyjątkowych sytuacjach lub gdy z jakiegoś powodu CSS nas się nie słucha, to na pewno podsłucha się tej deklaracji np. .post {color: green !important;}. Uwaga! !important dodajemy przed ;

    2 komentarze:

    1. Mam prośbę. Nigdzie nie znalazłam instrukcji, jak manewrować wielkością grafiki wstawionej zamiast nagłówka. Program graficzny kompletnie się mnie nie słucha, a kod, którego używałam na innym z moich blogów i działał, tu został uznany za... uszkodzony. Oba szablony powstały na bazie tego samego, ale tu za Chiny nie mogę tego obejść. Może ktoś pomóc...?

      OdpowiedzUsuń