Spip واوراق الانماط

اين يوجد تعريف اوراق الانماط؟

لدى تثبيت SPIP، مع الصفحات النموذجية المرفقة، يتم وضع تعريف اوراق الانماط في الملف:

– spip_style.css

يمكنك تعديله (وننصحك بذلك) او انشاء ملف انماط خاص بك او حتى ادخال تعريف الانماط مباشرة في الصفحات النموذجية.

ملاحظة: لا يشكل مفهوم اوراق الانماط (Cascading Style sheets) مقياساً خاصاً بـSPIP، انه مقياس خاص بالنسيج. وهناك الكثير من الادبيات حول هذا الموضوع. يمكن مثلاً مراجعة صفحة تجمع النسيج المخصصة لهذا الموضوع.

لمتابعة بقية هذا المقال، يستحسن فتح ملف «spip_style.css» في محرر نصوص.

وصلات هايبرتكست

التعريفان الاولان يسمحان بتعديل تصرف علامتي «a» و«a:hover». ويشمل التعريفان كل وصلات هايبرتكست المعروضة في صفحة الموقع (عرض الوصلات دون خط تحتها، تعيير «الحوم» فوق الوصلات...).

تأتي بعدهما ثلاثة تعريفات تتعلق باختصارات الكتابة: «a.spip_in» و«a.spip_out» و«a.spip_url».

– a.spip_in يتعلق بالوصلات داخل موقعك. مثلاً:

في الموقع [article1177 <- هذه [وصلة داخلية

– a.spip_out يتعلق بالوصلات الى خارج موقعك. مثلاً:

من الموقع [http://www.uzine.net <- هذه وصلة خارجة]

– a.spip_url يتعامل مع عناوين URL التي تحولت الى وصلات هايبرتكست. مثلاً:

[http://www.uzine.net<-]

(يعرض هذا الاختصار مباشرة عنوان URL مع وصلة هايبرتكست الى هذا العنوان، هكذا: http://www.uzine.net).

والميزة الاساسية لهذه التعريفات الثلاثة تكمن في اتاحتها التمييز رسومياً بين الوصلات الداخلية وتلك المتوجهة الى الخارج.

العناوين الفرعية

يتم تعريف العناوين الفرعية التي ينشئها الاختصار التالي:

{{{عنوان فرعي}}}

بواسطة نمط h3.spip. وقد يكون هذا النمط الاكثر فائدة لأنه يتيح تحديد حجم العنوان الفرعي وطقم الحروف الذي يستخدمه وموقعه في المادة.

والتعريف الافتراضي لهذا النمط هو:

h3.spip {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 120%;
text-align: center;
}

البرمجة والاطارات

يتم تعريف الاوامر البرمجية التي ينشئها الاختصار التالي:

<code>اوامر برمجية في النص</code>

بواسطة النمط spip_code. وهو قليل الاستخدام.

اما علامة

<div class="base64" title="PGRpdiBjbGFzcz0icHJlY29kZSI+PHByZSBjbGFzcz0nc3BpcF9jb2RlIHNwaXBfY29kZV9ibG9jaycgZGlyPSdsdHInIHN0eWxlPSd0ZXh0LWFsaWduOmxlZnQ7Jz48Y29kZT4uLi4NCjwvY29kZT48L3ByZT48L2Rpdj4="></div>

، التي دخلت على SPIP 1.3، فتتيح عرض اوامر برمجية داخل جدول (في استمارة) مما يسهّل نسخ ولصق النصوص. اما النمط الذي يصف هذه العلامة فهو spip_cadre. المعرّف افتراضياً كالتالي:

.spip_cadre {
width : 100%;
background-color: #FFFFFF;
padding: 5px;
}

الحواشي

يتم تعريف الحواشي باختصار الكتابة:

النص [[حاشية في اسفل الصفحة]]

ويصفها النمط p.spip_note، الا انه غالباً ما يكون دون فائدة لأنه يمكن تغيير الحواشي مباشرة باستخدام HTML لدى استخدام العلامة #NOTES في الصفحات النموذجية.

الجداول

يتم تعريف الجداول في SPIP بالطريقة التالية:

| {{الاسم}} | {{تاريخ الولادة}} | {{المدينة}}|
| سليم | 5-10-1970 | القاهرة |
| جهاد | 12-2-1975 | دمشق |
| هدى | 31-1-1957 | بيروت |
| زياد | 23-12-1965 | القدس |

مما يعطي:

وتتيح اوراق الانماط التالية وصف هذه الجداول بدقة:

table.spip {
}

table.spip tr.row_first {
background-color: #FCF4D0;
}

table.spip tr.row_odd {
background-color: #C0C0C0;
}

table.spip tr.row_even {
background-color: #F0F0F0;
}

table.spip td {
padding: 1px;
text-align: left;
vertical-align: center;
}

– table.spip يتيح تغيير الشكل العام للجدول (ولا سيما موقعه ومحاذاته - الى اليمين، توسيط...).

– table.spip tr.row_first يصف تصرف «السطر الاول» من الجدول (ويظهر في المثال بلون اصفر، وليتم وصف السطر الاول يجب ان تكون العناصر بداخله بخط اسود).

– table.spip tr.row_odd يصف السطور المفردة.

– table.spip re.row_even يصف السطور الزوجية.

– table.spip td يتيح تعديل شكل خانات الجدول. من ميزات هذه الانماط اتاحتها اختيار الوان مختلفة للسطور المفردة والسطور الزوجية مما يعرض السطور بألوان متناوبة (كالرمادي الداكن والرمادي الفاتح في المثال اعلاه).

خط الفصل الافقي

خط الفصل الافقي المعرّف باختصار الكتابة التالي:

----

يأخذ وصفه من نمط: hr.spip.

الاسود والمائل

يعرّف اختصارا الكتابة التاليان الخط الاسود والخط المائل:

نص {{بخط اسود}}، وآخر {بخط مائل}

ويمكن تعديلهما بواسطة نمطي: strong.spip وi.spip. وهما نمطان قليلا الفائدة.

لمحة تاريخية: قبل [SPIP 1.8] كان نمط النص الاسود، b.spip>.

الفقرات

يمكن تعديل الفقرات التي ينشئها SPIP (بترك سطر فارغ في المادة) بواسطة نمط: p.spip.

مبدئياً ليس هناك فائدة تذكر لهذا النمط لأنه من الممكن تعيير عناصر النص مباشرة من HTML.

الاستمارات

هناك الكثير من الاستمارات المستخدمة في الموقع العمومي لتشغيل محرك البحث الداخلي وواجهة المنتديات العامة والتسجيل في المجال الخاص...

والانماط التي تصف هذه الاستمارات هي: forml. وspip_encadrer. وspip_bouton. وformrecherche..

ويتم تعريفها افتراضياً كالتالي:

.forml { width: 100% ; background-color: #FFDDAA;}
.spip_encadrer { background-color: #EEEEEE; }
.spip_bouton { background-color: #FFCC00;}
.formrecherche { width: 100% ; background-color: #FFDDAA;}

– forml. يصف مربعات ادخال النصوص في الاستمارة. وهو مفيد لوصف عرض المربعات ولون خلفياتها.

– spip_encadrer. يتيح هذا النمط وصف الفصل بين اقسام الاستمارة اذا كانت هذه الاخيرة تحتوي اقساماً مختلفة (مثلاً وضع اطار حول كل قسم او انشاء مسافة قبل القسم وبعده ...).

– spip_bouton. يغيّر شكل زر الموافقة على الاستمارة.

– formrecherche. يغيّر شكل مربع «بحث» التابع لمحرك البحث.

الصور والمستندات

منذ [SPIP 1.8]، صار من الممكن التحكم بأنماط الصور والمستندات التي تم ادخالها آلياً بالاختصارات <docXX|left> و<docXX|right> و<docXX|center> بواسطة الفئتين:
– .spip_documents للاطار الذي يحتوي على مصغر ومعلومات المستند.
– .spip_doc_titre لعرض عنوان المستند.
– .spip_doc_descriptif لعرض وصف المستند.

الخلاصة

لاحظ ان بهض اوراق الانماط غير معرّفة افتراضياً. يمكن اعتبارها ثانوية (محصورة بمصممي المواقع الراغبين في اضافة بعض المؤثرات الجمالية).

بشكل عام، ان الانماط التي تتسبب بتغييرات كبيرة وجذرية في الموقع والتي يسهل تعريفها هي تلك التي تصف:
– الوصلات على صعيد الصفحة كلها، a وa:hover،
– تصرف العناوين الفرعية h3.spip،
– الاستمارات.