Blogger to strona, która posiada gotowe szablony, które my - szabloniarze - modyfikujemy. I o tym należy pamiętać! Nie tworzymy szablonów od zera, mimo to robimy coś oryginalnego i swojego - to można przyznać.
Zacznijmy od tego, że samo to nasze tworzenie/modyfikowanie szablonów do prostych zadań nie należy i nie ma się z tym co spierać. Na dobry graficznie i "kodowo" szablon składa się dużo pracy - w grafice i kodach CSS, i nie raz HTML. Więc przejdźmy do podstaw, aby ten podstawowy schemat robienia szablonów poznać.
I. Pierwsza podstawa:
→ Nagłówek - jest to praca graficzna o wybranych przez autora wymiarach, wykonywana w przeróżnych programach graficznych (najczęściej jest to Gimp lub Adobe Photoshop). Nagłówek nie jest jednak koniecznością w szablonie.
→ kod CSS (i HTML) - kod, który pozwala na modyfikowanie poszczególnych elementów kodu HTML. Aby pracować z CSS należy wejść w (zdj. 1)Motyw > Dostosuj > (zdj. 2)Zaawansowane > Dodaj arkusz CSS
II. Druga podstawa:
CSS (tłum. kaskadowe arkusze stylów) - kod służący do opisu formy wyświetlania stron WWW, czyli język, dzięki któremu ustalamy jak ma wyglądać nasza strona.
→ Selektor - nazwa poszczególnego elementu, np. .h1
→ Deklaracja - blok deklaracji zawiera jedną lub więcej deklaracji rozdzielonych średnikami. Każda deklaracja zawiera nazwę właściwości CSS i wartość oddzieloną dwukropkiem. Deklaracja CSS zawsze kończy się średnikiem, a bloki deklaracji są otoczone nawiasami klamrowymi { i }.
→ Cecha/Właściwość/Własność - pozwala nam określić co chcemy zmodyfikować/edytować
np. text-align: center; - zmieniamy wyrównywanie tekstu do środka.
→ Wartość - komenda określająca właściwość danego elementu, prawidłowy zapis wygląda następująco: właściwość: wartość; - należy pamiętać, że wartość poprzedza dwukropek(stawiany zaraz po własności), a zamykamy ją średnikiem.
!Uwaga! Selektory, cechy i wartości muszą być zamknięte, inaczej nie zadziałają i mogą pojawiać się błędy i/lub problemy.
III. Trzecia podstawa:
Zwróć uwagę na ';' po każdej wartości. Wspomniany znak oddziela własności, żeby w kodzie panował porządek.
Przykład kodu:
Więcej o selektorach oraz co one oznaczają dowiecie się w zakładce Selektory!
Dygresja:
Przydatną deklaracją jest !important . W wyjątkowych sytuacjach lub gdy z jakiegoś powodu nasz dany kod CSS nie działa, na pewno posłucha się wspomnianej wcześniej deklaracji
np. .#PageList1 li a:visited {text-decoration: none !important;}
!Uwaga! !important dodajemy przed ;
I. Pierwsza podstawa:
→ Nagłówek - jest to praca graficzna o wybranych przez autora wymiarach, wykonywana w przeróżnych programach graficznych (najczęściej jest to Gimp lub Adobe Photoshop). Nagłówek nie jest jednak koniecznością w szablonie.
→ kod CSS (i HTML) - kod, który pozwala na modyfikowanie poszczególnych elementów kodu HTML. Aby pracować z CSS należy wejść w (zdj. 1)Motyw > Dostosuj > (zdj. 2)Zaawansowane > Dodaj arkusz CSS
z d j . 1
z d j . 2
CSS (tłum. kaskadowe arkusze stylów) - kod służący do opisu formy wyświetlania stron WWW, czyli język, dzięki któremu ustalamy jak ma wyglądać nasza strona.
→ Selektor - nazwa poszczególnego elementu, np. .h1
→ Deklaracja - blok deklaracji zawiera jedną lub więcej deklaracji rozdzielonych średnikami. Każda deklaracja zawiera nazwę właściwości CSS i wartość oddzieloną dwukropkiem. Deklaracja CSS zawsze kończy się średnikiem, a bloki deklaracji są otoczone nawiasami klamrowymi { i }.
→ Cecha/Właściwość/Własność - pozwala nam określić co chcemy zmodyfikować/edytować
np. text-align: center; - zmieniamy wyrównywanie tekstu do środka.
→ Wartość - komenda określająca właściwość danego elementu, prawidłowy zapis wygląda następująco: właściwość: wartość; - należy pamiętać, że wartość poprzedza dwukropek(stawiany zaraz po własności), a zamykamy ją średnikiem.
!Uwaga! Selektory, cechy i wartości muszą być zamknięte, inaczej nie zadziałają i mogą pojawiać się błędy i/lub problemy.
III. Trzecia podstawa:
Budowa elementu kodu CSS:
Zwróć uwagę na ';' po każdej wartości. Wspomniany znak oddziela własności, żeby w kodzie panował porządek.
Przykład kodu:
.post {
background: #2a2a2a;
}
.column-left-inner {
position: fixed;
top: -75px;
}
Więcej o selektorach oraz co one oznaczają dowiecie się w zakładce Selektory!
Przydatną deklaracją jest !important . W wyjątkowych sytuacjach lub gdy z jakiegoś powodu nasz dany kod CSS nie działa, na pewno posłucha się wspomnianej wcześniej deklaracji
np. .#PageList1 li a:visited {text-decoration: none !important;}
!Uwaga! !important dodajemy przed ;
Brak komentarzy:
Prześlij komentarz