Customize CSS tags for layoutsCSS-tagien muokkaaminen asettelua varten

To use the template designer with the CSS of your blog’s template, there are a few guidelines to follow.Mallin suunnittelutyökalua voi käyttää blogimallin CSS-tagien kanssa. Tutustu alla oleviin ohjeisiin.

Set up the variablesMuuttujien määrittäminen

In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags.Koodin <head>-osassa on oltava <b:skin> </b:skin> -tagipari.

The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.CSS-tyylisivutiedot sekä muuttujien nimet sijoitetaan näiden tagien väliin, jotta asettelu näkyy oikein Kirjasin ja väri -sivulla.

ExampleEsimerkki

<head><head>

    

    ......

    <b:skin><b:skin>

     <style type='text/css'><style type='text/css'>

     /*/*

      * Variable definitions:* Variable definitions:

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

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

      */*/

     body {body {

       background: $bgcolor;background: $bgcolor;

       margin: 0;margin: 0;

       padding: 40px 20px;padding: 40px 20px;

     }}

     </style></style>

    </b:skin></b:skin>

    </head></head>

The CSS code enclosed in /* and */ comment tags won't be shown on your blog.CSS-koodi kommenttitagien /* ja */ välissä ei näy blogissasi.

There will be a list of variables here, one for each font or color that you want to be editable from the “Fonts and Colors” tab.Tässä on luettelo kirjasinten ja värien muokattavista muuttujista, joita voi muokata Kirjasimet ja värit -välilehdellä. Each variable is required to have the information shown in the example above and described here:Jokaisessa muuttujassa on oltava yllä olevan esimerkin sisältämät tiedot sekä alla olevat tiedot:

name – May contain letters or numbers.Name: Tämä muuttuja voi sisältää ainoastaan kirjaimia ja numeroita. Each name in your template must be unique.Mallin kaikkien name-tagien on oltava yksilöllisiä.
description – Add a description to appear in “Fonts and Colors" section.Description: Lisää tähän Kirjasimet ja värit -osiossa näytettävä kuvaus.
type – "Font" or "color."Type: Tämä muuttuja sisältää kirjasimen (font) ja värin (color) asetuksen.
default – The default value.Default: Tämä muuttuja sisältää oletusarvon. For colors, this should be a hexadecimal color code, for example #FF0066.Väreissä on käytettävä heksadesimaalista värikoodia, esim. #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-family.Kirjasimissa on muotoa koskeva luettelo, jossa on arvot font-style, font-weight, font-size ja font-family.

Use the variablesMuuttujien käyttäminen

After the variables are set up, when you want to use the value of a variable, enter $variable_name in the b:skin css.Muuttujien määrittämisen jälkeen voit ottaa muuttujan arvon käyttöön kirjoittamalla b:skin-css-muuttujaksi $variable_name.

Variable typesMuuttujatyypit

The template designer has editing support for a specific set of CSS variable types.Mallin suunnittelutyökalussa tuetaan tietynlaisten CSS-muuttujatyyppien muokkausta. To set the type of variable:Muuttujatyypin asettaminen:

color variables will provide a color palette for selection in the template designer.Värimuuttujilla määritetään mallin suunnittelutyökalussa käytettävä väripaletti.
font variables will provide a font selection, with size and bold or italics options, in the template designer.Kirjasinmuuttujilla määritetään mallin suunnittelutyökalussa käytettävät kirjasimet, niiden koko sekä lihavointi- ja kursivointiasetukset.

In the example above, there is a variable called bgcolor, which is set to white (#fff).Yllä olevassa esimerkissä on bgcolor-muuttuja, jonka asetuksena on valkoinen (#fff). In the next code, it says: background: $bgcolor.Seuraavassa koodissa lukee background: $bgcolor. This turns the background white, and you can change it in the “Fonts and Colors” section.Tämä asetus muuttaa taustan valkoiseksi. Voit muuttaa asetusta Kirjasimet ja värit -osiossa.

Note: You don’t need to create variables for other types of CSS attributes.Huom. Muita CSS-attribuutteja varten ei tarvitse luoda muuttujia. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the example above).Muut muuttujat voidaan sisällyttää CSS-attribuutteihin tavalliseen tapaan (kuten yllä olevan esimerkin margin:- ja padding:-attribuutit).

Learn more about CSS.Lisätietoja CSS-tageista