إستمارات أنيقة!

لقد قمت بتخصيص تصميم صفحات موقعك وكتابته وسنحصر اهتمامنا الآن في استمارات SPIP التي تبدو الآن مختلفة جداً عن جو الموقع العام. وهنا ايضاً تتكفل اوراق الانماط بحل المسألة.

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

مرة اخرى، لن نعود هنا الى جرد كافة الانماط التي يقدمها SPIP. اعلم فقط انك تستطيع تعديل مظهر كل الاستمارات في الموقع العمومي: استمارات الرد على المنتديات والبحث وتوقيع العرائض... [1] سنكتفي هنا ببعض الوصفات.

الوان وتضاريس

خبر سار للمبتدئين في اوراق الانماط: من الممكن تغيير الوان حقول الاستمارات وازرارها [2].

على سبيل المثال، لتظهر الازرار مع خلفية زرقاء فاتحة، نضيف هذه القاعدة الى ورقة الانماط (نذكّر ان اسمها my_styles.css):

.spip_button {
   background-color: #b0d0FF;
   color: black;
}

تظهر الآن الازرار بالازرق الفاتح (من خلال خاصية background-color) ونص اسود. لاحظ ان .spip_button هو النمط الذي تستخدمه الازرار والحقول في استمارات SPIP.

لنقم الآن بتغيير مظهر اطراف الازرار لأن شكل اطراف ازرار HTML صار قديماً. يمكن ان نقرر تسطيح الاطراف وتسميكها لتبرز اكثر، هكذا:

.spip_button {
   background-color: #b0d0FF;
   color: black;
   border: 2px solid #000060;
}

ترسم خاصية border الظاهرة هنا، طرف عرضه نقطتين وبشكل مسطح (اي «solid» بلغة اوراق الانماط) وبلون ازرق داكن حول الازرار. يمكن ايضاً تغيير بنط الخط في الزر (باستخدام خاصيتي font-size وfont-family كما رأينا في المراحل السابقة من هذا الدرس).

قليل من المساحة

لا تكتفي اوراق الانماط بتغيير الالوان والخطوط المستخدمة بل تتيح كذلك التحكم بموقع العناصر النسبي على الصفحة. ودون الغوص كثيراً في هذا المفهوم، نعرض هنا كيفية جعل الاستمارات اكثر ترحرحاً في المساحات:

.forms {
   background-color: #e8f4ff;
   font-family: "Arabic transparent", Geezah;
   font-size: 90%;
   font-weight: normal;
   border: 1px solid black;
   padding: 10px;}

نغير هنا عرض النمط .forms الاساسي الذي سينطبق على كل الاستمارات الناتجة عن SPIP. اما ميزة تغيير هذا النمط، فتكمن في امكان التحكم بعرض كل الاستمارات. نطبق هنا لون خلفية فاتح ونوع خط. ولكن المهم اننا نغيّر المسافات الداخلية في كل استمارة على حدى. ويحصل ذلك من خلال خاصية padding التي تُدخل عنصر «التهوئة» هذا. لاحظ ان هذه «التهوئة» تحصل بالتحديد داخل الاطار المحدد بخاصية border: فتعتبر الاستمارة هنا كتلة مستطيلة مستقلة.

ملاحظة: تتيح اوراق الانماط ايضاً امكان تحديد مواقع هذه الكتل المستطيلة بين بعضها بدقة كبيرة دون الحاجة لاستخدام الجداول في التصميم. الا ان هذا الموضوع متشعب ولا يدخل ضمن هذا الدرس.

حواشي

[1وحتى ازرار الادارة التي تظهر في اعلى الصفحات عندما تكون متصلاً بالموقع.

[2الا ان بعض برامج التصفح تفرض انماطها الخاصة في عرض الازرار ولا تسمح لك بتغيير شكلها.

مؤلف جورج نُشر في: تم التحديث: 26/10/12

الترجمات: عربي, català, Deutsch, English, Español, français, italiano, Nederlands