بسم الله الرحمان الرحيم و السلام عليكم و رحمة الله.
إخواني الكرام أقدم لكم فكرة اليوم : صناديق CSS - للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) . طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...
طبعا يجب استبدال روابط الصور في الكود لأنها مرفوعة على سيرفر Herosh فقط ، و سيحذفها بعد مدة .
و إليك الصور
الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :
إخواني الكرام أقدم لكم فكرة اليوم : صناديق CSS - للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) . طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...
لتستعملها في تدويناتك أو صفحات موقعك يكفي أن تزرع كود css الخاص في قالب موقعك أو مدونتك، مثلا في بلوجر نضع كود css قبل ]]></b:skin> من صفحة تحرير html، و في ووردبريس نزرع الكود نفسه في ملف style الموجود في مجلد القالب المستعمل و نفس الطريقة صالحة لباقي المواقع ...
أما الكود فهو كالتالي :
أما الكود فهو كالتالي :
#yellow-box,
#blue-box,#green-box,#red-box,#orange-box,#down-box,#show-box {border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;text-align:center;padding:6px 20px 6px 20px;color:#222222;margin:10px 0 5px 0;}#yellow-box {border:solid 1px #8e8e04;background:#FFFFCC url(http://img102.herosh.com/2011/06/26/426945931.png) 97% 6px no-repeat;}#blue-box {border:solid 1px #27739d;background:#94d5fb url(http://img102.herosh.com/2011/06/26/688326384.png) 97% 6px no-repeat;}#green-box {border:solid 1px #90ac13;background:#eef4d3 url(http://img105.herosh.com/2011/06/26/681386449.png) 97% 6px no-repeat;}#orange-box {border:solid 1px #ba4c0e;background:#ffcaa4 url(http://img102.herosh.com/2011/06/26/398818527.png) 97% 6px no-repeat;}#red-box {border:solid 1px #dc2727;background:#f2abab url(http://img105.herosh.com/2011/06/26/964674528.png) 97% 6px no-repeat;color:#222222;padding:6px;text-align:center;}#down-box {border:solid 1px #90ac13;background:#eef4d3 url(http://img105.herosh.com/2011/06/26/417615435.png) 97% 6px no-repeat;color:#222222;padding:6px;text-align:center;}#show-box {border:solid 1px #27739d;background:#94d5fb url(http://img102.herosh.com/2011/06/26/278846576.png) 97% 6px no-repeat;color:#222222;padding:6px;text-align:center;}#code-box {background:url(http://img105.herosh.com/2011/06/28/391147010.gif) repeat-x;border:1px solid #CFCFCF;padding:5px;overflow-x:scroll;margin:10px 0 5px 0;}
طبعا يجب استبدال روابط الصور في الكود لأنها مرفوعة على سيرفر Herosh فقط ، و سيحذفها بعد مدة .
و إليك الصور
الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :
<div id="blue-box">أنا رسالة داخل صندوق أزرق</div>