كيف تتحكم بالخطوط و الالوان من خلال لوحة تحكم بلوغر variables

من خلال هذه المقالة سوف نتعرف على كيفية تعريف المتغيرات لقالب البلوغر, وتشمل تعريف الخطوط و الالوان و التي غالبا ما نجدها في اعلى قالب بلوغر الاصلي.

يمكن كتابية مقادير المتغيرات مباشرة من خلال مصم القوالب لمدونة بلوغر, وتشمل الالوان احجام و انواع الخطوط …..........الخ

و ﻻضافة المتغيرات الى القالب اهمية كبرى وهي تمكين المستخدم من تغيير القيم من مخلال لوحة التحكم

التحكم بالخطوط و الالوان

هكذا تبدوا من خلال لوحة بلوغر

هناك نوعان من المتغيرات يمكن كتابتها للتحكم بالقالب من خلال لوحة التحكم و هي متغيرات الالوان و متغيرات الخطوط

مثال على متغيرات الالوان

<Variable name=”color1” description=”Header Color ” type=”color” default=”#555” value=”#000” />

الان الى الشرح:

*- كلمة Variable الحرف الاول يجب ان يكون كبيرا و هي امر تعريف المتغير

*name اسم المتغير و يجب ان يكون وحيدا اي لم يكن لمتغير سابق قط, يجب ان ﻻيحوي فراغات

*description بيان ماهية اللون وسوف تكون عنوان للون في اللوحة و يمكن ان تحوي فراغات

*type النوع و في حالتنا هذه "لون" و في حالة الخط يكون النوع "خط"

* default القيمة الافتراضية

*value قيمة المتغير

مثال على متغير خطوط

<Variable name=”body.font” description=”Body font” type=”font” default=”normal normal 12px Arial,Tahoma,Freesans,sans serf” value=”normal normal 12px Arial,Tahoma,Freesans,sans serf” />

هنا النوع هو "خط"

القيمة الافتراضية هي انواع الخطوط المحددة بين قوسين

القيمة هي ايضا انواع الخطوط المطلوبة

و يمكن وضع سطور تعريف المتغيرات في جزء الرأس <head> و بين <b:skin></b:skin>

ملاحظة : من تجربتي الشخصية وجدت ان سطر المتغير يؤدي الى مشاكل في باقي المتغيرات فوضعته بين علامتي ملاحظة فحلت المشكلة وقرأه البلوغر دون مشاكل

مثال على تطبيق المتغير على المدونة

نريد تغيير لون الخلفية للقالب من خلال لوحة التحكم

نضيف السطر التالي كما بيننا انفا الى القالب

/*<Variable name=”Bcolor” description=”Background Color” default=”#ccc” value=”#eec” type=”color” />*/

في سطر الستايل نضع المتغير بالشكل التالي:

body{

background-color:$Bcolor;

}

ونشير هنا الى ان الاسم حساس لحالة الاحرف و ﻻيحوي فراغات

عندما تذهب الى لوحة تحكم بلوغر , مصمم القالب , متقدم ...سوف تجد عنصرا اضافيا اسمه Background color وقيمه هي قيم Bcolor و يمكنك تغييره الى اللون الذي تريد من خلال الضغط على اللون وهذه هي فائدة كتابة المتغيرات

القالب الاصلي لبلوغر ﻻ يحتاج الى كتابة اي سطر اضافي ﻻن المقادير موجودة افتراضيا اما عندما تصمم قالبا خاصا او تضيف خاصية جديدة للقالب الاصلي وتريد منهاان يتم تغييرها من خلال لوحة التحكم فعليك اضافة سطور على القالب لتغييرها

اما لو اردت ستايل خاص للتخكم بالعرض و ابعاد القوائم الجانبية اليك هذا الكود

<b:template-skin>
<b:variabe name="content.width" type="width" default="90%" />
<b:variabe name="main.column.left.width" type="width" default="0" />
<b:variabe name="main.column.right.width" type="width" default="310px" />
<![CDATA[
.page-wrap {
width: $(content.width);
}
#sidebar-right-1 {
width: $(main.column.right.width);
}
#sidebar-left-1 {
width: $(main.column.left.width);
}
]]>

</b:template-skin>