طريقة تلوين فئات الصفحة الرئيسية كل فئة بلون خاص + الأكواد الآن بامكانك تلوين كل فئة من فئات الصفحة الرئيسية
بلون معين يختلف عن الفئة الأخرى كما في الصورة التالية
الخطوة الاولى احذف روابط صور خلفيات الفئات اليسرى واليمنى
كما هو موضح بالصورة التالية
الخطوة الثانية قم بأضافة كود الجافا التالي
- الكود:
-
$(function()
{
$('#cat_1').closest('table.forumline').addClass('cat-1');
$('#cat_2').closest('table.forumline').addClass('cat-2');
$('#cat_3').closest('table.forumline').addClass('cat-3');
$('#cat_4').closest('table.forumline').addClass('cat-4');
$('#cat_5').closest('table.forumline').addClass('cat-5');
$('#cat_6').closest('table.forumline').addClass('cat-6');
}
);
//by omarpop23
ملحوظة: هذا الكود لعدد 6 فئات فقط فإذا كنت
تريد اضافة فئات أخرى فعليك بتكرار الكود التالي
بعدد الفئات المراد اضافتها
- الكود:
-
$('#cat_*').closest('table.forumline').addClass('cat-*');
مع تغيير * برقم الفئة الجديدة
الخطوة الثالثة اضافة كود الــ
CSS
التالي في ورقة الأكواد الأنسابية ورقة التصميم
CSS
- الكود:
-
.forumline.cat-1 th {
background: #FF0000;
}
table.forumline.cat-1 {
border: 1px solid #FF0000;
background-color: #FF0000;
}
.forumline.cat-2 th {
background: #375468;
}
table.forumline.cat-2 {
border: 1px solid #375468;
background-color: #375468;
}
.forumline.cat-3 th {
background: #9848EF;
}
table.forumline.cat-3 {
border: 1px solid #9848EF;
background-color: #9848EF;
}
.forumline.cat-4 th {
background: #3399cc;
}
table.forumline.cat-4 {
border: 1px solid #3399cc;
background-color: #3399cc;
}
.forumline.cat-5 th {
background: #488E11;
}
table.forumline.cat-5 {
border: 1px solid #488E11;
background-color: #488E11;
}
.forumline.cat-6 th {
background: #000;
}
table.forumline.cat-6 {
border: 1px solid #000;
background-color: #000;
}
ملحوظة: لقد كتبت كود الـــ
CSS
لعدد 6 فئات فقط فاذا كنت تريد اضافة فئات أخرى
فعليك بتكرار الكود التالي بعدد الفئات المراد اضافتها
- الكود:
-
.forumline.cat-* th {
background: #000;
}
table.forumline.cat-* {
border: 1px solid #000;
background-color: #000;
}
مع تغيير * برقم الفئة الجديدة
وتغيير اللون بوضع كود أو رمز اللون الجديد مكان
#000الخطوة الرابعة هذه هي أهم خطوة
فعليك اعادة تسمية الفئات ولكن بهذه الطريقة
فمثلا الفئة الأولى تكتب كما في الكود التالي
- الكود:
-
<strong id="cat_1">اسم الفئة</strong>
والفئة الثانية تكتب كما في الكود التالي
- الكود:
-
<strong id="cat_2">اسم الفئة</strong>
والفئة الثالثة تكتب كما في الكود التالي
- الكود:
-
<strong id="cat_3">اسم الفئة</strong>
وهكذا ...........
والصورة التالية توضح مكان وضع اسم الفئة في قسم المنتديات والفئات