اصنعها بنفسك: صناديق CSS لتدويناتك
ملاحظة: تفترض هذه التدوينة في القارىء معرفة أساسية بتقنية CSS.
عندما ترغب بإضافة ملف للتحميل في تدوينتك (في ووردبريس) , أو رابط, أو ملاحظة, الخ. تستطيع وضعه في صندوق CSS بكل بساطة وسهولة كما في المثال التالي (تحميل ملف):
لأجل ذلك, تحتاج إلى الخطوات التالية:
- تصميم صناديق CSS بالألوان والخصائص والخلفيات (الأيقونات) التي تريد ثم أن تحفظ كود CSS في ملف تعطيه الاسم الذي تريد بامتداد css. مثلاُ css-typography.css
- سترفع هذا الملف إلى القالب الذي تستخدم وتربطه مع ملف Style.css.
- في كل مرة تريد إضافة صندوق, فستضيف class=”x” في المكان المناسب في تدوينتك.
حيث X يشير إلى نوع الصندوق الذي تريد استخدامه. المثال أعلاه. وذلك بحسب ما أعددته في ملف css-typography.css, كما في هذا المثال.
كان ذلك هو ملخص الخطوات التي تحتاجها, لا تقلق, فسنبدأ الآن بالتطبيق.
الخطوة الأولى: تصميم صناديق CSS:
استخدم أي برنامج تحرير أكود تفضله, يمكنك استخدام الأداة الأبسط في وندوز notepad. افتح ملفاً جديداً ثم اكتب أسطر CSS التالية:
p.download{
margin: 10px 0 0;
padding: 10px 10px 10px 36px;
}
p.download{
border-top: 2px solid #d4ebaf;
border-bottom: 2px solid #d4ebaf;
background: #edfcd5 url(images/download.png) no-repeat right 50%;
text-align:right;
}
لاحظ أن الجزء الأول من الكود (رقم 1) يحدد خصاص صندوق التحميل Download. إذا أردت أن أضيف المزيد من الصناديق (رابط Link ملاحظة Info … الخ) فسأضيفها بهذا الشكل:
وبالعودة إلى الأجزاء ( 2 و 3) من الكود, فهي الأجزاء التي تحدد فيها تصميم الصندوق: لون الخلفية, الأيقونة, الحدود العلوية والسفلية وألوانها. بنفس الطريقة, يمكنك أن تصمم ما تشاء من صناديق بحيث تعرفها أولاً في الجزء الأول من الكود, ثم أن تضيف الكود الخاص بتصميمها تباعاً.
الخطوة الثانية: احفظ الكود بالاسم الذي تريد وبامتداد css ثم ارفعه إلى مجلد القالب الذي تستخدم.
الخطوة الثالثة: افتح ملف style.css في القالب الذي تستخدم ثم في بدايته, أضف إليه:
@import url('x.css');
حيث X هو اسم ملف CSS الذي أعددناه لتصميم الصناديق. الهدف من هذه الخطوة, هو إضافة كود الصناديق إلى كود CSS في ملف القالب.
الخطوة الرابعة (إضافة الصناديق إلى تدوينتك)
في كل مرة تريد إضاة صندوق إلى تدوينتك, عليك أن تضيف الوسم class في الوسم p. بهذه الطريقة:
انتبه إلى أن الأيقونات التي تستخدمها مع هذه الصناديق, يجب أن ترفعها إلى مجلد images في مجلد القالب الذي تستخدم.
يمكنك تحميل مثال على هذه الصناديق للتجربة, أو للتعديل عليه, أو لتصمم مزيداً من الصناديق معتمداً عليه. هذا المثال هو لصندوق التحميل download:
اشترك في الخلاصات RSS للحصول على جديد رحلة ضَوْء أولاً بأول. اشترك الآن! (ما هي الخُلاصات؟ المزيد من التفاصيل وخيارات الاشتراك …).
شكراً مهدي على هذا المقال. لقد أعجبتني هذه الفكرة كثيراً وقد بدأت بإستخدامها على موقعي http://www.makto3at.com