هذه مجموعة من صناديق CSS صممتها لك، عزيزي المدوّن، يمكنك أن تضع فيها بعض النصوص أو الفقرات، الملاحظات، الهوامش، الخلاصات، الروابط، الفقرات المهمة، الجمل المهمة، الاقتباسات … الخ

طريقة الإستخدام:

1. حمّل الملف المضغوط بنهاية هذه التدوينة. ستجد بداخله ملف باسم RO-CSS-Boxes.css. ارفعه إلى مجلد القالب الذي تستخدم في مدونتك.

2. افتح ملف style.css في القالب الذي تستخدم في مدونتك وأضف في بدايته السطر التالي:

@import url('RO-CSS-Boxes.css');

ضعه مباشرةً تحت بيانات القالب.

3. الآن، عندما تريد وضع نص معين في أحد هذه الصناديق، يجب أن يكون هذا النص بين وسمين “p” وستحتاج إلى إضافة الوسم التالي في وسم p, وسم البداية:

ولاستخدام لون محدد للصندوق، غيّر الرقم إلى جوار كلمة box من 1 إلى 12 (أنظر الأمثلة).

مثال لطريقة إضافة صندوق إلى فقرة:

مثال 1: box1

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 2: box2

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 3: box3

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 4: box4

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 5: box5

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 6: box6

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 7: box7

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 8: box8

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 9: box9

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 10: box10

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 11: box11

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

مثال 12: box12

مُدوِّنة رحلة ضَوْء (ر.ض.) هي مُدوِّنة تقنية تهتم ببرامج الكمبيوتر، الإنترنت، التدوين، الهندسة وتطوير الذات؛ تُساعد المُستخدم العربي على تطوير ذاته ومهاراته التقنية. هي أكثر من كونها مُجرد “مُدوِّنة تقنية” بل تتجاوز ذلك لتكون مشروعاً عربياً طموحاً … الخ.

لتغيير ألوان الصناديق (لقليلي المعرفة في CSS):

لتغيير لون أي صندوق (الخلفية + الإطار) افتح ملف RO-CSS-Boxes.css الذي حمّلته في الخطوة الأولى، ثم غيّر رمز اللون (مثال: #E6DB55) للصندوق الذي تريد: background للخلفية border للإطار.

خيارات أخرى:

• لتغيير عرض الصندوق، غيّر القيمة من 400 إلى ما تريد في الخاصية width.
• لتغيير مسافات محاذاة الصندوق، غيّر الخاصية margin.
• لتغيير مسافات محاذاة النص داخل الصندوق، غيّر الخاصية padding.
• لتغيير اتجاه الخط, غيّر الخاصية text-align.

هل يمكن استخدام هذه الصناديق مع غيّر مدونات ووردبريس؟

إذا يمكنك رفع الملف RO-CSS-Boxes.css إلى مدونتك والوصول إلى ملف CSS لقالبها وتحريره، نعم يمكنك ذلك.

التحميل:

RO-CSS-Boxes.zip