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

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

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


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

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

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

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

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

https://mwadah.com/images/imgcache/2009/07/168.png

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

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

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

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

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

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

HTML Color Codes


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


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


https://mwadah.com/images/imgcache/2009/07/538.jpg


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

https://mwadah.com/images/imgcache/2009/07/539.jpg

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

https://mwadah.com/images/imgcache/2009/07/540.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) وهكذا ..


https://mwadah.com/images/imgcache/2009/07/541.jpg


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

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



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

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

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

https://mwadah.com/images/imgcache/2009/07/542.jpg

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


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

https://mwadah.com/images/imgcache/2009/07/543.jpg


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


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


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

https://mwadah.com/images/imgcache/2009/07/544.jpg

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

https://mwadah.com/images/imgcache/2009/07/545.jpg

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

كود:

---

<font class="usergroup_X">

---

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

كود:

---

<font class="usergroup_admin">

---

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

كود:

---

<font class="usergroup_moderator">

---

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

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

كود:

---

</font>

---

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

https://mwadah.com/images/imgcache/2009/07/546.jpg

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

https://mwadah.com/images/imgcache/2009/07/547.jpg


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

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

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

ملف الدرس:


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


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

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

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

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

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

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

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

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

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

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

اقتباس:

---

المشاركة الأصلية كتبت بواسطة محمد اف ام

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

---

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

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

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

اقتباس:

---

المشاركة الأصلية كتبت بواسطة دايم الســيف

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

---

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

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

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

اقتباس:

---

المشاركة الأصلية كتبت بواسطة ابو راشد

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

---

الشكر لله يالغالي .. ويعطيك العافية على المرور ..

شرفتنا بحضورك ..