Aby użyć w projektancie szablonów arkusza CSS zastosowanego w szablonie bloga, skorzystaj z kilku poniższych wskazówek.
Konfigurowanie zmiennych
W sekcji <head> Twojego kodu musi znaleźć się para tagów <b:skin> </b:skin>.
Określone deklaracje stylów CSS znajdą się pomiędzy tymi tagami razem z nazwami zmiennych, dzięki którym w projekcie będzie można korzystać ze strony Czcionki i kolory.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Definicje zmiennych:
* <Variable name='bgcolor' description='Kolor tła strony'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>Kod CSS zawarty między tagami komentarza /* i */ nie będzie widoczny na blogu.
Będzie dostępna lista zmiennych – po jednej dla poszczególnych czcionek i kolorów – które będzie można edytować na karcie „Czcionki i kolory”. Każda zmienna musi zawierać informacje pokazane w powyższym przykładzie i opisane poniżej:
- name (nazwa) – może zawierać litery lub cyfry. Każda nazwa w szablonie musi być niepowtarzalna.
- description (opis) – dodany opis pojawi się w sekcji „Czcionki i kolory”.
- type (rodzaj) – „czcionka” lub „kolor”.
- default (domyślnie) – wartość domyślna. W przypadku kolorów należy użyć szesnastkowego kodu koloru, na przykład #FF0066. W przypadku czcionek będzie to lista zmiennych określających styl (font-style), grubość (font-weight), rozmiar (font-size) i rodzinę (font-family) czcionki.
Używanie zmiennych
Aby użyć wartości zmiennej, po skonfigurowaniu zmiennych wpisz $variable_name (nazwę zmiennej) w sekcji b:skin arkusza css.
Projektant szablonów umożliwia edycję określonych rodzajów zmiennych w arkuszach CSS. Możesz określić rodzaj zmiennej:
- zmienne kolorów pozwolą wybierać w projektancie szablonów kolory z palety kolorów;
- zmienne czcionek pozwolą wybierać w projektancie szablonów czcionki, ich rozmiary oraz pogrubienie lub kursywę.
W powyższym przykładzie występuje zmienna bgcolor, dla której ustawiono kolor biały (#fff). W dalszej części kodu znajduje się ciąg: background: $bgcolor. Ten element kodu nadaje tłu kolor biały i można go zmienić w sekcji „Czcionki i kolory”.
Uwaga: nie musisz tworzyć zmiennych dla pozostałych rodzajów atrybutów CSS. Mogą być one standardowo zawarte w arkuszach CSS (jak w przypadku atrybutów margin: i padding: w powyższym przykładzie).