تلوين مجموعات الأعضاء باستخدام خاصية الـ css

[دارك مان]

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف الأنبياء والمرسلين محمد بن عبدالله وعلى آله الطيبين الطاهرين وصحبه الأخيار المنتجبين ..


تلوين مجموعات الأعضاء باستخدام خاصية الـ CSS

معظمنا - إن لم يكن جميعنا - يعرف كيف يقوم بتلوين مجموعات الأعضاء .. إما عن طريق استخدام أكواد الهتمل Html أو عن طريق استخدام الهاكات المختصة ..

لكنني - حتى الآن - لم أجد أحداً يستخدم خاصية الـ CSS في القيام بتلك العملية ( أي تلوين مجموعات الأعضاء ) ..

وهذا هو ما دفعني إلى إنشاء هذا الدرس المتواضع .. علّني أُفيد واستفيد من خلاله ..

واعذروني إن كنت قد طرحت موضوعي في القسم الخاطئ ..



على بركة الله نبدأ

أولاً: علينا أن نُحدد موقفنا .. أي نقوم بتحديد الألوان التي سنقوم باستخدامها لكل مجموعة من مجموعات الأعضاء ..

وأنا اخترت هذه القيم :

المدير العام = FF0000
المشرف العام = 008000
المشرفين = 0000FF
الأعضاء = 996633
الزوار = 808080

* ولا ننسى علامة الهاش # في بداية كل لون | مثال: #FF0000 ..

وحتى تكون العملية أسهل .. يمكنكم اختيار الألوان بالدخول لهذا الموقع :

HTML Color Codes


الآن وبعد أن قمنا باختيار لون لكل مجموعة من مجموعات الأعضاء يمكننا الانتقال للخطوة الثانية ..


ثانياً: نتوجه إلى: لوحة تحكم المنتدى >> الإستايلات والقوالب >> التحكم بالإستايلات ..





ثالثاً: نقوم باختيار الستايل المُراد تلوين مجموعات الأعضاء فيه ومن ثم نتبع الآتي: خيارات جميع الستايلات >> إذهب ..



رابعاً: نتوجه إلى أسفل الصفحة ونبحث عن بند بعنوان ( تعاريف CSS الإضافية ) .. حيث سنقوم بوضع أكواد الـ CSS في المربع الفارغ وهو المربع الأحمر في الصورة ..



خامساً: قم بنسخ أكواد الـ CSS التالية:

.usergroup_moderator {
    color: #0000FF;
}
.usergroup_moderator:hover {
    background: #FFF;
}
.usergroup_supermoderator {
    color: #008000;
}
.usergroup_supermoderator:hover {
    background: #FFF;
}
.usergroup_admin {
    color: #FF0000;
}
.usergroup_admin:hover {
    background: #FFF;
}
.usergroup_guest {
    color: #808080;
}
.usergroup_guest:hover {
    background: #FFF;
}
.usergroup_member {
    color: #996633;
}
.usergroup_member:hover {
    background: #FFF;
}
.usergroup_inactivemember {
    color: #999966;
}
.usergroup_inactivemember:hover {
    background: #FFF;
}
.usergroup_minormember {
    color: #666633;
}
.usergroup_minormember:hover {
    background: #FFF;
}

ومن ثم قم بلصقها في المربع الفارغ الذي أشرنا إليه في الخطوة الرابعة .. مع مراعاة تغيير قيم الألوان ..


فمثلاً إذا اخترت في الخطوة الأولى اللون (#DF7401) لمجموعة المدير العام .. يتوجب عليك تغيير قيمة (color) الموجودة أسفل فئة (usergroup_admin) إلى (#DF7401) وهكذا ..





** توضيح الفئات في الكود السابق :

المشرفين = usergroup_moderator
المشرف العام = usergroup_supermoderator
المدير العام = usergroup_admin
الزوار = usergroup_guest
الأعضاء = usergroup_member
الأعضاء غير المفعلين = usergroup_inactivemember
الأعضاء القُصّر = usergroup_minormember



وإذا كنت ممن لديهم خلفية في تقنية الـ CSS .. فبالتأكيد يمكنك التغيير في الأكواد بما يتناسب مع احتياجاتك ..

وتجدر الإشارة هنا إلى أنه يجب عليك القيام بهذه الخطوة على جميع الستايلات المستخدمة لديك .. أو إذا كنت مُلمّاً بهذه الخاصية فيمكنك عمل ملف CSS خاص بمجموعات الأعضاء ومن ثم وضع كود استدعاء في جميع ستايلاتك ( لن أتطرق لهذه الخطوة لأن الدرس يستهدف المبتدئين ) ..

وبعد الانتهاء من تعديل الأكواد ووضع الألوان المناسبة لك .. قم بعملية الحفظ ..



الآن وقد انتهينا من وضع أكواد الـ CSS يمكننا الانتقال للخطوة التالية ..


سادساً: نتوجه إلى: لوحة تحكم المنتدى >> مجموعات الأعضاء >> التحكم بالمجموعات ..




سابعاً: سنبدأ الآن بعملية وضع أكواد الهتمل Html التي تربط المجموعات بما يتناسب معها في أكواد الـ CSS ..


** سأقوم بشرح عملية وضع أكواد الهتمل Html على مجموعة المدير العام فقط .. ويتوجب عليكم أن تقوموا بهذه الخطوة على كل مجموعة من مجموعات الأعضاء ..


إذن نقوم باختيار مجموعة (المدير العام) ومن ثم نتبع الآتي: تعديل مجموعة الأعضاء >> إذهب ..



الآن وبعد أن دخلنا إلى صفحة التعديل سنشاهد مربعين صغيرين فارغين متجاورين موضوعين تحت بند بعنوان (اسم العضو بصيغة HTML) وهما المربعين الحمراوين المبينيين في الصورة التالية:



وما سنقوم بفعله هو نسخ الكود التالي ومن ثم لصقه في الخانة ذات الرقم 1 .. مع مراعاة تغيير الـ (X) الموجودة في الكود إلى الفئة المناسبة المذكورة في الخطوة الخامسة تحت بند بعنوان ( توضيح الفئات في الكود السابق ) .. وفي هذه الحالة هي فئة المدير العام (usergroup_admin) .. وهذا هو الكود العام :

<font class="usergroup_X">

فيكون الناتج في حالة المدير العام :

<font class="usergroup_admin">

ولو أردنا أن نتكلم عن مجموعة المشرفين لكان الكود كالتالي :

<font class="usergroup_moderator">

هذا بالنسبة للكود الذي سنضعه في الخانة ذات الرقم 1 ..

أما بالنسبة للكود الذي سنضعه في الخانة ذات الرقم 2 فهو ثابت لا يتغير .. وهو كالآتي:

</font>

وفي النهاية يصبح لدينا مربعين بهما أكواد كما تبينه الصورة التالية :

وبعد الانتهاء من وضع الأكواد في الخانتين .. يتبقى لنا أن نقوم بعملية الحفظ ..




وبهذا نكون قد وصلنا إلى ختام درسنا .. تمنياتي للجميع بدوام التقدم والازدهار ..

وعلى بركة الله نختم

---------------------------------------

ملف الدرس:


في حال تعطل الصور وعدم تمكنك من مشاهدتها أو في حال أردت مشاهدة الدرس من على جهازك فإنه بإمكانك القيام بتحميل ملف الدرس من خلال أحد هذه الروابط :


تلوين مجموعات الأعضاء باستخدام خاصية الـ CSS | تحمــــيل FileDen

تلوين مجموعات الأعضاء باستخدام خاصية الـ CSS | تحمــــيل 4Shared

تلوين مجموعات الأعضاء باستخدام خاصية الـ CSS | تحمــــيل DM-GRAPHICS

---------------------------------------

© كافة الحقوق محفوظة لكاتب هذا الدرس ولـ (( شبكة جرافكس الظلام التعليمية )) ..

© All Rights Are Reserved to the writer/DaRK mAN306 and to: DaRK MArE Graphics

لسنا ممن يمنعون نقل المواضيع لكننا نحثّ ناقل الموضوع على ذكر المصدر ..
---------------------------------------

هذا ما لزم ..
والله ولي التوفيق ..

||الموضوع الأصلي || المصدر || الكاتب: DaRK mAN306 ||

[محمد اف ام]

اخي شكرا على الشرح الجميل

[دارك مان]

اخي شكرا على الشرح الجميل

الشكر لله يالغالي .. إن شاء الله تكون استفدت من الشرح ..

ويعطيك العافية على مرورك .. إن شاء الله دوووووووم ..

[دايم الســيف]

تسلم على هذا الشرح وجزاك الله خير

[دارك مان]

تسلم على هذا الشرح وجزاك الله خير

الله يسلمك أخي العزيز ويجازك ألف خير .. أهم شيء تكون استفدت من الشرح ..

يعطيك العافية .. وإن شاء الله دووووووووم ..