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

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

زائر
زائر
تمت المشاركة في الخميس سبتمبر 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
منورة الموضوع

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

بصمة خالدة
الجنس : ذكر

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

نقاط النشاط : 6286

السٌّمعَة : 367

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة أكتوبر 28, 2016 4:01 pm
موضوع مميز
بوركت اخي
تقبل مروري وفائق احترامي
دمت بخير

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

avatar
بصمة خالدة
الجنس : ذكر

الاسد

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

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

السٌّمعَة : 65

بلد العضو :

العمر : 20

معاينة صفحة البيانات الشخصي للعضوhttp://www.anjezweb.com/
تمت المشاركة في الثلاثاء نوفمبر 22, 2016 8:55 pm
طرح مميز شكرا لك
التوقــيـــــــــــــــــــــع

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

avatar
مؤسس الابداع العربي
الجنس : انثى

السمك

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

نقاط النشاط : 140200

السٌّمعَة : 2921

بلد العضو :

العمر : 31



معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
تمت المشاركة في السبت يناير 28, 2017 11:43 pm
#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك
التوقــيـــــــــــــــــــــع



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

avatar
بصمة خالدة
الجنس : ذكر

القوس

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

نقاط النشاط : 35904

السٌّمعَة : 84

بلد العضو :

العمر : 31

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء مارس 21, 2017 1:05 am
بارك الله بيك
واصل
التوقــيـــــــــــــــــــــع

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

avatar
عضو محترف
الجنس : انثى

الثور

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

نقاط النشاط : 2079

السٌّمعَة : 9

بلد العضو :

العمر : 16




معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء مارس 21, 2017 1:07 am
طرح مميز يعطيك العافية
التوقــيـــــــــــــــــــــع


أنـا فـتاة لآ أخــسـر #كــبريآئـي من أجـل بــقايـا حـب ،،
فـأنا أنـثــى لآيسـتطـيع أن يلــوي ذراعـي رجــل ...
أستطيـع ترک أغـلى شيء وأنا فـي قمـة السـعادة #واثـقة_من_نفـسي لـدرجـة أنـک لآ تـتحمـل #غـروري ...
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى