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

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

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

  • الجنس : ذكر

    الاسد

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

    نقاط النشاط : 11686

    السٌّمعَة : 65

    بلد العضو :

    العمر : 20

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

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

    avatar
    بصمة خالدة
  •  

  • الجنس : انثى

    السمك

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

    نقاط النشاط : 141172

    السٌّمعَة : 2957

    بلد العضو :

    العمر : 31

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


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

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    القوس

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

    نقاط النشاط : 35990

    السٌّمعَة : 84

    بلد العضو :

    العمر : 32

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

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

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

    الثور

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

    نقاط النشاط : 2081

    السٌّمعَة : 9

    بلد العضو :

    العمر : 16




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


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