طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

مُساهمة من طرف زائر في الخميس سبتمبر 15, 2016 3:47 am


طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص
اولا النسخة الثانية PhpBB2
رابط المنتدى التجريبي لمعاينة الكود مباشرةً:
http://tgrba.forumth.com

http://i64.tinypic.com/24bt3sz.png
الخطوة الاولى

عليك حذف صور خلفيات الفئات كما هو موضح بالصورة التالية
الخطوة الثانية

قم بأضافة كود الجافا التالي
الرمز:

$(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 التالي في ورقة الأكواد الأنسابية
الرمز:

.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;
}
مع تغير ? برقم الفئة الجديدة و تغير اللون

الخطوة الثالثة

هذه هي اهم خطوة
عليك اعادة تسمية الفئات ولكن بهذه الطريقة
مثلا الفئة الأولى
الرمز:
<strong id="cat_1">اسم الفئة</strong>
الفئة الثانية
الرمز:
<strong id="cat_2">اسم الفئة</strong>
الفئة الثالثة
الرمز:
<strong id="cat_3">اسم الفئة</strong>
صورة لتوضيح



النسخة الثالثة PhpBB3
رابط المنتدى التجريبي لمعاينة الكود مباشرةً:
http://hamor-shabik.arab.st
الخطوة الاولى
عليك حذف صور خلفيات الفئات كما هو موضح بالصورة التالية
الخطوة الثانية

عليك بأضافة كود الجافا التالي
الرمز:
$(function()
{
$('#cat_1').closest('div.forabg').addClass('cat-1');
$('#cat_2').closest('div.forabg').addClass('cat-2');
$('#cat_3').closest('div.forabg').addClass('cat-3');
$('#cat_4').closest('div.forabg').addClass('cat-4');
$('#cat_5').closest('div.forabg').addClass('cat-5');
$('#cat_6').closest('div.forabg').addClass('cat-6');
}
);
//by omarpop23
ملحوظة: لقد كتبت هذا الكود لعدد 6 فئات اذا كنت تريد فئة اضافية عليك تكرار هذا الكود
الرمز:
$('#cat_?').closest('div.forabg').addClass('cat-?');
مع تغير ? برقم الفئة الجديدة


ايضاً عليك اضافة كود CSS التالي في ورقة الأكواد الأنسابية
الرمز:

.forabg.cat-1 {
    background: #FF0000;
    border: 1px solid #FF0000;
}

.forabg.cat-2 {
    background: #375468;
    border: 1px solid #375468;
}

.forabg.cat-3 {
    background: #9848EF;
    border: 1px solid #9848EF;
}

.forabg.cat-4 {
    background: #3399cc;
    border: 1px solid #3399cc;
}

.forabg.cat-5 {
    background: #488E11;
    border: 1px solid #488E11;
}

.forabg.cat-6 {
    background: #000;
    border: 1px solid #000;
}
ملحوظة: لقد كتبت كود ال CSS لعدد 6 فئات اذا كنت تريد اضافة فئة آخري عليك تكرار الكود التالي
الرمز:


.forabg.cat-? {
    background: #000;
    border: 1px solid #000;
}
مع تغير ? برقم الفئة الجديدة و تغير اللون
الخطوة الثالثة

هذه هي اهم خطوة
عليك اعادة تسمية الفئات ولكن بهذه الطريقة
مثلا الفئة الأولى
الرمز:
<strong id="cat_1">اسم الفئة</strong>
الفئة الثانية
الرمز:
<strong id="cat_2">اسم الفئة</strong>
الفئة الثالثة
الرمز:
<strong id="cat_3">اسم الفئة</strong>
صورة لتوضيح




زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

مُساهمة من طرف زائر في الخميس سبتمبر 15, 2016 5:59 am


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

مُساهمة من طرف زائر في الخميس سبتمبر 15, 2016 11:47 am


منورة الموضوع


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

مُساهمة من طرف AbdallahBeraida في الجمعة أكتوبر 28, 2016 4:01 pm


AbdallahBeraida
اشراف عام التصميم

اشراف عام التصميم

الجنس : ذكر

الدلو

عدد المساهمات : 5219

نقاط النشاط : 6074

السٌّمعَة : 346

بلد العضو :

العمر : 21





الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: طريقة تلوين كل فئة بلون خاص به . كود تلوين كل فئة بلون خاص

مُساهمة من طرف 1sLaM A7mEd في الثلاثاء نوفمبر 22, 2016 8:55 pm


1sLaM A7mEd
بصمة خالدة
بصمة خالدة

الجنس : ذكر

الاسد

عدد المساهمات : 9913

نقاط النشاط : 11656

السٌّمعَة : 65

بلد العضو :

العمر : 19


http://www.anjezweb.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى