لاستخدام مصمم النماذج مع CSS لنموذج مدونتك، هناك بعض الإرشادات التي يلزم اتباعها.
إعداد المتغيرات
في قسم <head> من شفرتك، ستحتاج إلى زوج من العلامتين <b:skin> </b:skin>.
ترد بيانات أنماط CSS بين تلك العلامات، جنبًا إلى جنب مع أسماء المتغيرات التي تجعل تصميمك يعمل مع صفحة الخطوط والألوان.
<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>لن يتم عرض شفرة CSS المضمنة بين علامتي التعليق /* و*/ في مدونتك.
ستكون هناك قائمة بالمتغيرات هنا، متغير لكل خط أو لون تريده أن يكون قابلاً للتعديل من علامة التبويب "الخطوط والألوان". ويلزم أن يحتوي كل متغير على المعلومات الموضحة في المثال أعلاه، والتي نصفها في ما يلي:
- الاسم - قد يحتوي على حروف أو أرقام. يجب أن يكون كل اسم في نموذجك فريدًا من نوعه.
- الوصف - أضف وصفًا ليظهر في قسم "الخطوط والألوان".
- النمط - "خط" أو "لون".
- افتراضي - القيمة الافتراضية. بالنسبة إلى الألوان، يجب أن تكون رمز لون سداسيًا عشريًا، على سبيل المثال #FF0066. بالنسبة إلى الخطوط، ستكون قائمة بنمط الخط وسمكه وحجمه وعائلته.
استخدام المتغيرات
بعد أن يتم إعداد المتغيرات، وعندما تريد استخدام قيمة متغير، أدخل $variable_name في b:skin css.
يتوفر لمصمم النماذج دعم تعديل مجموعة محددة من أنواع متغيرات CSS. لتعيين نوع المتغير:
- ستوفر متغيرات الألوان لوحة الألوان للاختيار من بينها في مصمم النماذج.
- ستوفر متغيرات الخطوط اختيار الخط، مع خيارات الحجم وغامق أو مائل، في مصمم النماذج.
في المثال أعلاه، هناك متغير يسمى bgcolor، والذي تم تعيينه على أبيض (#fff). في الشفرة التالية، يكون: background: $bgcolor. ويحوّل هذا الخلفية إلى اللون الأبيض، ويمكنك تغييره في قسم "الخطوط والألوان".
ملاحظة: لا تحتاج إلى إنشاء متغيرات للأنماط الأخرى من سمات CSS. يمكن تضمينها في CSS كما تكون عادة (كما هو الحال مع سمتي margin: وpadding: في المثال أعلاه).