طريقة عمل كود ستايل مخصص للمقالات في الاعدادات والودجات
طريقة عمل كود ستايل مخصص للمقالات في الاعدادات والودجات
من اهم مزايا قالب روكيت هي امكانية عمل ستايل مخصص لقوائم المقالات داخل التصنيفات وداخل الودجات، وذلك عن طريق ادخال كود الستايل في الحقل المخصص.
الستايل الافتراضي يكون من صفحة الاعدادات -> تبويب الأقسام/التصنيفات -> كود ستايل مخصص للمقالات .. وسيتم تطبيق الكود على كل قوائم المقالات في التصنيفات، وأيضا في الودجات في حالة عدم وجود كود ستايل مخصص للودجت.
الكود يكون عبارة عن متغيرات مفصولة بمسافة، وكل متغير يعني شكل أو تأثير ما.
مثال:
style-row width-1_2 image-sm
الكود السابق يعني ان ستايل المقال يكون عبارة عن صورة بجوارها العنوان، ويكون عرض المقال النصف (أي يظهر عدد 2 مقال في الصف الواحد في أقصى اتساع) ويكون حجم الصورة صغير.
كما يمكن عمل ستايل مختلف للمقالات حسب ترتيبها عن طريق ادخال اكواد في اسطر منفصلة، بحيث يكون الستايل العام في أول سطر، ويليه ستايل المقال المحدد مسبوقا برقم المقال ثم علامة ” : “.
مثال:
style-overlay width-1_4
1 : style-overlay width-1_2 height-2
الكود السابق عبارة عن سطرين، السطر الأول هو الستايل العام للمقالات، بينما السطر الثاني عبارة عن ستايل محدد لمقال محدد وهو المقال رقم 1، والذي سيظهر بستايل مختلف.
كما يمكن اضافة ستايلات أخرى لمقالات أخرى في قائمة المقالات بنفس الطريقة المعمول بها في السطر الثاني، ولكن في أسطر جديدة.
كل المتغيرات الخاصة بستايلات المقالات
| hide-image | إخفاء الصورة |
| show-meta | إظهار معلومات المقال |
| show-description | إظهار وصف المقال |
| style-boxed | لجعل المقال يظهر في صندوق |
| style-overlay | لجعل عنوان المقال أعلى الصورة مع وجود ظل |
| style-row | لجعل العنوان يظهر بجوار الصورة |
| style-column | لجعل العنوان يظهر أسفل الصورة |
| style-row-mobile | لجعل العنوان يظهر بجوار الصورة على الموبايل |
| style-row-desktop | لجعل العنوان يظهر بجوار الصورة على الديسكتوب |
|
width-1_4
|
عرض المقال 1/4 (4 مقالات في الصف الواحد) |
|
width-1_3
|
عرض المقال 1/3 (3 مقالات في الصف الواحد) |
|
width-1_2
|
عرض المقال 1/2 (مقالين في الصف الواحد) |
|
width-2_3
|
عرض المقال 2/3 (لجعل مقال معين يأخذ ثلثي الصف) |
|
width-1
|
عرض المقال بكامل عرض الصف |
|
height-2
|
ارتفاع المقال × 2 |
|
height-3
|
ارتفاع المقال × 3 |
|
title-lg
|
حجم العنوان كبير |
|
title-xl
|
حجم العنوان كبير جدا |
|
title-xxl
|
حجم العنوان كبير جدا جدا |
|
image-auto
|
حجم الصورة تلقائي |
|
image-flex
|
حجم الصورة مرن |
|
image-150
|
حجم الصورة 150 بكسل (عرض أو ارتفاع) – الأرقام المتاحة هي 100 – 150 – 200 – 250 – 300 – 350 – 400 |
|
image-sm
|
مقاس الصورة صغير |
|
image-md
|
مقاس الصورة متوسط |
|
image-lg
|
مقاس الصورة كبير |
|
image-xl
|
مقاس الصورة كبير جدا |
أكواد جاهزة لستايلات المقالات
|
width-1_4 style-overlay image-md image-300 title-lg |
 |
| width-1_4 show-meta 1 : width-1_2 height-2 title-xl show-description image-lg image-400 |
 |
| width-1_4 show-meta 2 : style-overlay width-1_2 height-2 title-xl image-lg image-400 |
 |
| width-1_2 style-row image-200 title-lg show-meta |  |
| width-1_4 show-meta 1 : width-1_2 height-2 title-xl show-description image-lg image-400 style-overlay 2 : width-1_2 style-overlay title-lg |
 |
| style-row image-100 1 : style-overlay title-lg image-300 |
 |
| width-1 style-row image-300 title-lg show-description show-meta |  |
| style-overlay width-1_4 show-meta 1 : style-overlay image-lg image-400 title-lg width-1_2 2 : style-overlay image-lg image-400 title-lg width-1_2 |
 |
هذه بعض الستايلات الجاهزة، ويمكنك إنشاء عدد لا نهائي من الستايلات باستخدام الأكواد.