هذه مجموعة من صناديق 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
آخر المشاركات: