هذه مجموعة من صناديق 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 لقالبها وتحريره، نعم يمكنك ذلك.
التحميل:
آي فون/آي بود
استفتاءات
الأمن والحماية
التدوين
التسوق الإلكتروني
الجوّال
الكمبيوتر المحمول
اللغة الإنجليزية
النسخ الإحتياطي
الوسائط
برامج
تصميم وتطوير
تطوير الذات
تعلّم كيف
تنظيم الوقت
جي ميل
ذاكرة الفلاش
زيادة الإنتاجية
سطح المكتب
عام
فيرفوكس
كروم
لينوكس
مشاكل وحلول
مقالات تقنية
مواقع وخدمات
هندسية
وندوز
ووردبريس
يعطيـك العافيـة يا مهدي
.. هذا ما كنت احتاجه
هذه الصناديق من أفضل الألوان .. تم التحميل
سؤال / كيف يمكنني وضع صورة داخل الصندوق وفي مكان محدد ؟؟ .. حاولت اعامل الصورة مثل ما اعامل النصوص. الطريقة كانت ناجحة ولكن واجهت مشكلة في تحديد مكان الصورة ..
مثال ، وضعت صندوق معلومات واردت وضع ايقونة RSS في اليسار في زاوية معينة .. ماهي الطريقة ؟ ..
اكرر شُكري لك
..
@ خاطرة بيضاء: العفو
لإضافة أيقونة، تحتاج إلى إضافة خاصية جديدة background url. دعني أكتب تدوينة حول هذا لاحقاً. حتى ذلك الحين، ابحث في الشبكة بهذه المفردات: background url + css وتعلم حول هذه الخاصية.
صناديق رائعة وجميلة
وفقك الله لك خير
السلام عليكم
اخي الكريم .. إذا كنت ارغب ان اضع هذا الصندوق في الصفحة الرئيسية للمدونة .. قبل اي تدوينة
كما كنت تفعل في النسخة السابقة
فكيف يتم ذلك ؟
شكرا لك
@ عبد السلام: أنظر هذه التدوينة فقد تجد فيها ما يفيدك (الجزء المتعلق بتقنية CSS).
أولاً شكراً للمهندس مهدي ..
بالنسبة لسؤال الأخ خاطرة بيضاء .
ضع هذا الكود ضمن خصائص المربع الذي تريد وضع الصورة فيه :
background: url(‘images/yourimg.type’) no-repeated left top;
غير عنوان الصورة أو المسار كذلك قيم اليمين و اليسار و الأعلى و الأسفل .
هناك طرق أكثر احترافية عن طريق النسبة المئوية و البكسل لكن هذه الطريقة مناسبة لك أكثر على ما اعتقد .
أتمنى أن أكون قد أفدتك .
أبحث عنها هذه الصناديق وطريقة عملها .
الآن فهمت الطريقة .. وفقك الله
جزاك الله كل خير ..
أخي أردت الإستفسار عن كيفية جعل زوايا الصندوق مائلة ؟
@ بروفيشنال: يمكنك استخدام هذا الموقع.
رائع جدا أستاذ مهدي..
لكن لدي ملاحظة بسيطة..
من أجل استخدام هذه القوالب في أكواد php – مثلا مواضيع ذات صلة – لابد من التغيير في ملف css بحيث نظع
.box1
بدلا من
p.box1
لأن الاخير للفقرات لا للأكواد..
أيضا يتوجب علينا وضع وسم بدلا من في ملف php
أرجوا اضافة هذا التعليق للسابق..
أيضا يتوجب علينا وضع وسم بدلا من في ملف php
ملاحظة: فرقت الحروف لكي تظهر في التعليق..
عموما هي div و p
حركة واضافة جميلة للتدوينات وأنا جربته
[...] WordPress RO CSS Boxes: صناديق CSS لتدويناتك [...]
مرحبا أخي
شرح رائع بارك الله فيك
انا املك هذا الموقع:
http://www.e3lnt.vom
اريد تطبيق الشرح هذا لعرض اخر الاعلانات في الاعلانات المميزة وهي carousel
اريد استبدالها بطريقة اكثر بساطة و اناقة و هي ان تكون مربعات بجانب بعض كل مربع 150*150 بكسل و يكون rounded box
فهل هناك اضافة او هل يمكنك ارشادي لكيفية التعديل على القالب لكي يصبح مثلما اريد ؟
وشكرا لك
اخوك حسونة
@حسونة: استخدام هذه الاضافة:http://wordpress.org/extend/plugins/wp125/
عدل عليها في ملف css باستخدام الكود المذكور في هذه التدوينة.
بخصوص rounded box. تحتاج الى تطبيق خصائص rounded css.
هل استطيع إضافة ميزة معينة لبرنامج WLW لإضافة هذه الصناديق بشكل تلقائي؟ ام يتوجب عليّ كتابتها يدوياً في محرر الأكواد الخاص بالبرنامج ؟
نعم. يدوياً.
بعد التحية .
أنا سعيد بتعليقي الأول في هذه المدونة ، وسعيد لأني مررت هنا ، لديّ استفسار وهو أن الصناديق لا تظهر .. أضفت الكود p> class=”box1″ في ملف index.php
لكنه لم يعمل .. هل أنا أخطئت بشئ ما ؟
وشكرًا لك .
@Osama: أهلا بك.
نعم لقد اخطأت. يجب أن تضيف الكود في التدوينة وليس في قالب المدونة. عند كتابة تدوينة تحوّل الى وضع كتابة “الشيفرة” في محرر النصوص ثم أضف الكود. انظر الصورة: http://www.rehlaonline.com/wp-content/uploads/2009/02/cssboxes7-thumb.png
بعد التحية
ضفت الكود لكن لم يظهر أي ّ صندوق , هل يحتاج وقتا لتنفيذه ؟ ، مع العلم بأنني قمت باضافة أكواد css الصناديق في style.css .
وتحياتي اليك .
يبدو أن الكود استحى على حاله واشتغل .. أشكرك جزيل الشكر على ردّك السريع ولك تحياتي الحارة
[...] والتذكير وغير ذلك ، وقد تحدث عنها م.مهدي سابقاً في رحلة ضوء وشرح طريقة إضافتها بالنسبة للمدونات المدفوعة فقط. [...]
قمت بعمل تعديلات بسيطة علي حجم width ليتناسب مع شكل قالب مدونتي العام مع إضافة بعض تأثيرات من CSS3 ليظهر شكل الصناديق بالشكل الموجود في نهاية هذه التدوينة