تصميم المربعات CSS للوردبريس – yourcolor
الووردبريس wp
سأشرح لك في هذا المقال كيف تزيد من جاذبية مدونتك أو موقعك وكيف تثري تجربة زوّارك عن طريق إستخدام المربعات والصور الملائمة. لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد.
لنفرض مثلاً أنك تضع في مدونتك أكواد html أو css أو php أو أي لغة أخرى (كما أعمل أنا في هذه التدوينة). بالطبع هذه الأكواد باللغة الإنجليزية ولذا يجب (إذا أردت أن تصنع مدونة ذات جودة عالية) أن تكون هذه الأكواد من اليسار إلى اليمين وأن تكون بصيغة Preformatted. دالة هذه الصيغة هي <pre> </pre> أي أن كل كود يوضع بين هذين القوسين هو على شكل Preformatted Code.
إذهب الآن إلى ملف style.css وعرّف خصائص دالة pre كما يلي:
pre
{
float:left;
direction:ltr;
font-size: 1.2em;
color: #000000;
margin: 10px;
padding:10px;
}
كما ترى، كل ما قمنا به هو وضع المربع على اليسار وتحديد مسار الخط ليكون من اليسار إلى اليمين وحجمه وتحديد المسافات أو الفراغات. يمكنك كذلك أن تضع خلفية وبوردر بلون ما كما يلي:
border: 1px solid #333333;
background-color: #dadada;
لم يتبقى سوى شيئ واحد مهم وهو خاصية overflow. تأكد من وضع هذه الخاصية حتى تمنع عرض سطور الأكواد الأعرض من مساحة المحتوى ووضع scroll bar في هذه الحالة. أضف:
overflow:auto;
إذن في هذه الحالة، سيكون الكود النهائي الذي أضفته كما يلي:
pre
{
float:left;
direction:ltr;
font-size: 1.2 em;
color: #000000;
margin: 10px;
padding:10px;
border: 1px solid #333333;
background-color: #dadada;
overflow:auto;
}
يمكنك الآن أن تضع الأكواد في مدونتك إما بين أقواس <pre> </pre> أو إذا كنت تستخدم محرر ووردبرس ذاته، فيمكنك أن تختار خط preformatted للأكواد. هذا كل شيئ… ستشاهد الآن الأكواد في مربع ذات خلفية ملوّنة. بالطبع، يمكنك أن تضيف الصور وأن تعدل كل شيئ عبرالكود الذي وفرته لك.
لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. لمزيد من التفاصيل شاهد مثلاً هذا الموقع. ستلاحظ في أسفل بعض التدوينات مربع يشرح بعض النقاط المهمة. هذه المربعات هي ما أقصد بالضبط.
كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد. أنظر المثال التالي:
.box {
padding: 12px 40px 12px 3px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 30px;
float:center;
text-align:justify;
direction:rtl;
border: 1px solid #bae2f0;
font-size: 13px;
line-height: 17px;
background-color: #e3f4f9;
font-weight: 500;
-moz-border-radius: 10px;
border-radius: 10px;
}
أما إذا أردت أن تضع صورة فكل ما عليك القيام به هو إضافة الكود التالي إلى الدالة:
background: url(images/icon.png) no-repeat right 1px;
التغذية
تويتر
فيسبوك
يوتيوب
الاكاديمية العربية لفنون التصميم و تعليم الجرافيك 
يجب عليك تسجيل الدخول لكتابة تعليق.