Personalizați etichetele CSS pentru aspecte

Pentru a folosi pagina de design al șabloanelor împreună cu codul CSS al șablonului blogului, trebuie să urmați câteva indicații.

Configurați variabilele

În secțiunea <head> a codului, trebuie să figureze o pereche de etichete <b:skin> </b:skin>.

Declarațiile de stil CSS se introduc între aceste etichete, la fel și numele de variabile care fac ca designul să funcționeze cu pagina Fonturi și culori.

Exemplu

<head>

    

    ...

    <b:skin>

     <style type='text/css'>

     /*

      * Variable definitions:

      *  <Variable name='bgcolor' description='Page Background Color'

          type='color' default='#fff'/>

      */

     body {

       background: $bgcolor;

       margin: 0;

       padding: 40px 20px;

     }

     </style>

    </b:skin>

    </head>

Codul CSS încadrat de etichetele de comentarii /* și */ nu va fi afișat pe blog.

Aici va exista o listă de variabile, câte una pentru fiecare font sau culoare care vreți să poată fi editată din fila „Fonturi și culori”. Fiecare variabilă trebuie să aibă obligatoriu informațiile din exemplul de mai sus, care sunt descrise mai jos:

name – poate conține litere sau cifre. Fiecare nume din șablon trebuie să fie unic.
description – adăugați o descriere care să apară în secțiunea „Fonturi și culori”;
type – „font” sau „color”;
default – valoarea prestabilită. În cazul culorilor, acesta trebuie să fie un cod de culoare hexazecimal, de exemplu, #FF0066. În cazul fonturilor, va fi o listă de forma font-style font-weight font-size font-family.

Folosiți variabilele

După ce variabilele sunt definite, când vreți să folosiți valoarea unei variabile, introduceți $variable_name în eticheta CSS b:skin.

Tipurile de variabile

Pagina de design al șabloanelor asigură suport de editare pentru un anumit set de tipuri de variabile CSS. Pentru a seta tipul de variabilă:

variabilele de culori vor oferi în pagina de design al șabloanelor o paletă de culori din care să puteți alege;
variabilele de fonturi vă vor oferi în pagina de design al șabloanelor posibilitatea să selectați fontul, cu opțiuni pentru dimensiune, aldin sau cursiv.

În exemplu de mai sus există o variabilă denumită bgcolor, care este setată la alb (#fff). Mai departe în cod este indicat: background: $bgcolor. Astfel, fundalul devine alb și puteți să-l schimbați în secțiunea „Fonturi și culori”.

Notă: nu trebuie să creați variabile pentru alte tipuri de atribute CSS. Acestea pot fi incluse normal în CSS (la fel ca în cazul atributelor margin: și padding: din exemplul de mai sus).

Aflați mai multe despre CSS.