تغيير لون و حجم القائمة الجانبية

استكمالا للدرس السابق تغيير مكان القائمة الجانبية سوف اشرح كيف تستطيع تغيير لون الخلفية للقائمة الجانبية و تغيير لون العنوان و تغيير الحجم الكلي للقائمة.

احفظ نسخة احتياطية من قالبك قبل العمل

اولا: تغيير لون عنوان القائمة فقط

ستصبح هكذا ...











اذهب الي Layout==>Edit HTML ثم ابحث عن الكود الآتي

#sidebar-wrapper h2 {
color:$colortituloslateral;
font-size:20px;
text-align: center;
font-weight:normal;
line-height:22px;
margin:0pt 0pt 2px;
}

اضف الكود التالي
background-color:#157DEC;

هذا الكود سوف يضيف اللون الاصفر ولكن اذا اردت اضافة اللون الذي تريد قاستبدل الجزء المظلل بالاحمر بكود اللون الذي تريده من هذه الصفحة....


ليصبح الكود كالتالي

#sidebar-wrapper h2 {
color:$colortituloslateral;
background-color:#157DEC;
font-size:20px;
text-align: center;
font-weight:normal;
line-height:22px;
margin:0pt 0pt 2px;
}

ثانيا : تغيير لون خلفية القائمة كلها

سيصبح هكذا .......









افتح Edit HTML وابحث عن الكود الاتي

#sidebar-wrapper {
float:left;
margin:0pt 5px 0pt 0pt;
width:180px;
}

و اضف اليه التالي
background-color:#157DEC;

ليصبح هكذا

#sidebar-wrapper {
float:left;
background-color:#157DEC;
margin:0pt 5px 0pt 0pt;
width:180px;
}

ويمكنك تغيير اللون كما وضحت بالاعلي.

ثالثا : تغيير حجم ( سمك ) القائمة

ستصبح هكذا....

ادخل Edit HTML وابحث عن الكود التالي

#sidebar-wrapper {
float:left;
border: 3px ridge #2554C7;
margin:0pt 5px 0pt 0pt;
width:220px;
}

الجزء الملون بالاحمر هو الجزء المسئول عن حجم القائمة والان غير هذا الرقم الي 250 وتابع الفرق.
-----------------------------------------------------------------------

ملحوظة هامة جدا جدا :

ممكن الاكواد تختلف من تمبلت الي الاخر ولكن مضمونها واحد ولو في مشاكل و مش لاقي الكود... اترك رد بمشكلتك و سوف اساعدك بقدر الامكان.