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

DaRK mAN306

عضو جديد
22 سبتمبر 2008
6
0
0
مملكة البحرين
www.dm-graph.net
بسم الله الرحمن الرحيم

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


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

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

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

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

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

Intro.png


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


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

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

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

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

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

HTML Color Codes


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



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



CUGWCSS%20%281%29.jpg



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

CUGWCSS%20%282%29.jpg


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

CUGWCSS%20%283%29.jpg


خامساً: قم بنسخ أكواد الـ 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) وهكذا ..


CUGWCSS%20%284%29.jpg



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

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



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

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

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

CUGWCSS%20%285%29.jpg


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


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

CUGWCSS%20%286%29.jpg



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


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


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

CUGWCSS%20%287%29.jpg


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

CUGWCSS%20%288%29.jpg


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

كود:
<font class="usergroup_[COLOR=Red]X[/COLOR]">

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


كود:
<font class="usergroup_[COLOR=Red]admin[/COLOR]">


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

كود:
<font class="usergroup_[COLOR=Red]moderator[/COLOR]">


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


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

كود:
</font>


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

CUGWCSS%20%289%29.jpg


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

CUGWCSS%20%2810%29.jpg



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


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

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

ملف الدرس:


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


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

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

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

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

© كافة الحقوق محفوظة لكاتب هذا الدرس ولـ (( شبكة جرافكس الظلام التعليمية )) ..
© All Rights Are Reserved to the writer/DaRK mAN306 and to: DaRK MArE Graphics


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

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



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

DaRK mAN306

عضو جديد
22 سبتمبر 2008
6
0
0
مملكة البحرين
www.dm-graph.net
بارك الله فيك

موضوع مميز


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

يعطيك العافية على المرور .. وما قصرت ..


بارك الله فيك

ما قصرت

الله يبارك فيك أخي العزيز محمد .. وهذا أقل من الواجب ..

أهم شيء تكون استفدت من الموضوع .. وتسلم على المرور ..
 

DaRK mAN306

عضو جديد
22 سبتمبر 2008
6
0
0
مملكة البحرين
www.dm-graph.net
و الله درس رائع
ما قصرت ابدا
جزاك الله كل خير ... و كان في ميزان الحسنات
موفق

الله يجزاك ألف خير يالغالي .. آمين إن شاء الله ..

أهم شيء أنك تكون استفدت من الشرح !!

ويعطيك ألف عافية على مرورك .. ما قصرت ..


بارك الله فيك

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

وتسلم على المرور .. إن شاء الله دوووووووووووم ..