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

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

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

مُساهمة من طرف زائر في الخميس سبتمبر 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

avatar
AbdallahBeraida
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 6274

السٌّمعَة : 365

بلد العضو :

العمر : 22


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

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

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

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

بصمة خالدة

الجنس : ذكر

الاسد

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

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

السٌّمعَة : 65

بلد العضو :

العمر : 19


http://www.anjezweb.com/

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

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

مُساهمة من طرف JAR7 في السبت يناير 28, 2017 11:43 pm


#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك




التوقيع



avatar
JAR7
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : انثى

السمك

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

نقاط النشاط : 137171

السٌّمعَة : 2845

بلد العضو :

العمر : 31




http://taqnyiat.ahlamontada.com/

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

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

مُساهمة من طرف I'm The Guy في الثلاثاء مارس 21, 2017 1:05 am

avatar
I'm The Guy
نواب الادارة

نواب الادارة

الجنس : ذكر

القوس

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

نقاط النشاط : 29814

السٌّمعَة : 80

بلد العضو :

العمر : 31







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

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

مُساهمة من طرف Abir The Queen في الثلاثاء مارس 21, 2017 1:07 am

avatar
Abir The Queen
فريق الإشراف

فريق الإشراف

الجنس : انثى

الثور

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

نقاط النشاط : 1712

السٌّمعَة : 2

بلد العضو :

العمر : 15




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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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