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

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

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

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

بصمة خالدة

الجنس : ذكر

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

نقاط النشاط : 6280

السٌّمعَة : 366

بلد العضو :


معاينة صفحة البيانات الشخصي للعضو

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

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

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

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

بصمة خالدة

الجنس : ذكر

الاسد

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

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

السٌّمعَة : 65

بلد العضو :

العمر : 19


معاينة صفحة البيانات الشخصي للعضو http://www.anjezweb.com/

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

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

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


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




التوقيع



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

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

الجنس : انثى

السمك

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

نقاط النشاط : 139220

السٌّمعَة : 2897

بلد العضو :

العمر : 31




معاينة صفحة البيانات الشخصي للعضو http://taqnyiat.ahlamontada.com/

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

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

مُساهمة من طرف Sportacus في الثلاثاء مارس 21, 2017 1:05 am

avatar
Sportacus
بصمة خالدة

بصمة خالدة

الجنس : ذكر

القوس

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

نقاط النشاط : 35878

السٌّمعَة : 84

بلد العضو :

العمر : 31


معاينة صفحة البيانات الشخصي للعضو

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

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

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

avatar
Abir The Queen
عضو محترف
عضو محترف

الجنس : انثى

الثور

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

نقاط النشاط : 2076

السٌّمعَة : 9

بلد العضو :

العمر : 16





معاينة صفحة البيانات الشخصي للعضو

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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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






Feedage Grade B rated