Προσαρμογή ετικετών CSS για διατάξεις

Για να χρησιμοποιήσετε το εργαλείο σχεδίασης προτύπων με το CSS του προτύπου του ιστολογίου σας, υπάρχουν μερικές οδηγίες που πρέπει να ακολουθήσετε.

Ορισμός μεταβλητών

Στην ενότητα <head> του κώδικά σας, θα χρειαστείτε ένα ζεύγος ετικετών <b:skin> </b:skin>.

Οι δηλώσεις στυλ CSS θα τοποθετηθούν ανάμεσα σε αυτές τις ετικέτες μαζί με τα ονόματα των μεταβλητών που επιτρέπουν στη σχεδίασή σας να λειτουργήσει με τη σελίδα "Γραμματοσειρές και Χρώματα".

Παράδειγμα

<head>

    

    ...

    <b:skin>

     <style type='text/css'>

     /*

      * Ορισμοί μεταβλητών:

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

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

      */

     body {

       background: $bgcolor;

       margin: 0;

       padding: 40px 20px;

     }

     </style>

    </b:skin>

    </head>

Ο κώδικας CSS που βρίσκεται ανάμεσα στις ετικέτες σχολίων /* και */ δεν θα εμφανίζεται στο ιστολόγιό σας.

Θα υπάρχει μια λίστα μεταβλητών σε αυτό το σημείο, μία για κάθε γραμματοσειρά ή χρώμα για το οποίο θέλετε να υπάρχει δυνατότητα επεξεργασίας από την καρτέλα "Γραμματοσειρές και χρώματα". Κάθε μεταβλητή πρέπει να διαθέτει τις πληροφορίες που εμφανίζονται στο παραπάνω παράδειγμα, οι οποίες περιγράφονται εδώ:

name – Μπορεί να περιέχει γράμματα και αριθμούς. Κάθε όνομα στο πρότυπό σας πρέπει να είναι μοναδικό.
description – Προσθέστε μια περιγραφή η οποία θα εμφανίζεται στην ενότητα "Γραμματοσειρές και χρώματα".
type – "Font" ή "color".
default – Η προεπιλεγμένη τιμή. Για χρώματα, αυτή η τιμή θα πρέπει να είναι ένας δεκαεξαδικός κωδικός χρώματος, για παράδειγμα, #FF0066. Για γραμματοσειρές, θα είναι μια λίστα με τη μορφή font-style font-weight font-size font-family.

Χρήση μεταβλητών

Μετά τη ρύθμιση των μεταβλητών, όταν θελήσετε να χρησιμοποιήσετε την τιμή μιας μεταβλητής, εισαγάγετε το $variable_name στο css b:skin.

Τύποι μεταβλητών

Το εργαλείο σχεδίασης προτύπων διαθέτει υποστήριξη επεξεργασίας για ένα συγκεκριμένο σύνολο τύπων μεταβλητών CSS. Για να ορίσετε τον τύπο μεταβλητής:

οι μεταβλητές χρώματος θα παρέχουν μια παλέτα χρωμάτων για επιλογή στο εργαλείο σχεδίασης προτύπων.
οι μεταβλητές γραμματοσειράς θα παρέχουν μια συλλογή γραμματοσειρών με επιλογές μεγέθους, έντονης ή πλάγιας γραφής στο εργαλείο σχεδίασης προτύπων.

Στο παραπάνω παράδειγμα, υπάρχει μια μεταβλητή που ονομάζεται bgcolor, η οποία έχει οριστεί σε λευκό (#fff). Ο επόμενος κώδικας περιέχει: background: $bgcolor. Αυτό μετατρέπει το χρώμα του φόντου σε λευκό και μπορείτε να το αλλάξετε στην ενότητα "Γραμματοσειρές και χρώματα".

Σημείωση: Δεν χρειάζεται να δημιουργήσετε μεταβλητές για άλλους τύπους χαρακτηριστικών CSS. Αυτοί οι τύποι χαρακτηριστικών μπορούν να συμπεριληφθούν κανονικά στο CSS (όπως γίνεται με τα χαρακτηριστικά margin: και padding: στο παραπάνω παράδειγμα).

Μάθετε περισσότερα για το CSS.