حلقة من حلقاتي .. تلوين جميع أجزاء الاستايل الاحترافي Css تفضل بالدخول

زائر

السلام عليكم و رحمة الله و بركاته

انتهينا من تركيب الاستايل الاحترافي و من تصميم خلفية للمنتيات الرئيسية و لبعض الجداول لإعطائها شكل مرتب و جميل و منسق

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

الآن نبدأ معكم باسم الله :

1- اذهب إلى لوحة تحكم منتداك
2- على اليمين في الاختيارات راح تلاقي قائمة باسم "الاستايلات & القوالب"
3- افتح القائمة و اختر منها ضبط الاستايلات
4- بجانب الاستايل اللي شغالين عليه توجد قائمة منسدلة افتحها و اختر منها خيار "الرئيسي CSS"
5- راح نلاقي صناديق و خيارات كثيرة انتبه معاي و نبدأ الآن واحد واحد للنتهاء منهم :

أول خيار باسم : "الجسم"

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

قلنا أول خيار "الجسم" و ناخذ معاه ثاني خيار "Page Background" :

لاحظ نشتغل على الاثنين يعني اللي نسويه في الخيار الأول نسويه في الثاني انتبه تمام ؟ طيب تمام

في خانة الخلفية ضع لون خلفية الاستايل اللي صممناه في الفوتوشوب كالتالي :

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

يعني قم باختيار الأداة اللي في الصورة و بعد اختيارها اضغط في وسط صورة الاستايل لمعرفة اللون و بعد الضغط سوف يتغير عندنا اللون هنا في المربع الأمامي للألوان :

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

الآن الكود اللي نسخناه نذهب و نضعه في خانة الخلفية للخيارين اللي قلنلكم عنهم أول شيء يعني الآن طلع عندي الكود أنا : D7C8FF راح أنسخه من الفوتوشوب و أضعه في خانة الخلفية لا تنسى قبل ما تضع الكود في خانة الخلفية ضع قبلة مربع بواسطة الضغط على Shift + 3 و بعد المربع قم بوضع الكود و هذا تلكمنا عنه في الحلقة الثالثة لتصميم خلفية للمنتديات و أرجوكم تابعوا الحلقة الثالثة قبل هذي الحلقة فيها أشياء هامة راح تتعلموها و كل الحلقات أرجوكم أن تتابعوها أول بأول

المهم وضعنا الكود و هذا هو : #D7C8FF في خانة الخلفية كما في الشكل التالي :

بعد ما نضعه مثل ما هو في الصورة نضغط على الزر و بعدين للخيار الثاني Page Background نضع الكود و نضغط على الزر لحفظ المدخلات الجديدة و المتغيرات اللي سويناها

ملاحظة : ضع في خانة لون الخط اللون اللي تريده و افضل أن يكون غامق كالأزرق الغامق و في كل خيار توجد في آحره ثلاث خيارات للون الخط في الخيارين على اليمين نضع لون الخط نفسه اللي وضعناه فوق و في الخيار الأخير و الثالث على اليسار نضع كود اللون اللي راح يظهر عند تمرير الماوس على الوصلة و أفضل اللون الأحمر و لكن انتبه هذا على حسب استايلك ممكن يكون استايلك لونه أحمر بتروح غنت تحط لون ثاني تمام ؟؟ تمام طيب

طيب الآن الخيار الثالث و هو : <td>, <th>, <p>, <li>

هذا الخيار امسح جميع محتوياته و اترك كل خانة فيه فارغة حتى لو كان هنا خانة فيها كود أو غير أو كلام امسح كل ما فيه و اتركه فارغا

الخيار الرابع و هو : "Table Border"

هذا الخيار هو للون إطار المنتديات و الأقسام كما في الصورة :

نقوم بوضع لون غامق أو متوسط المهم يكون ظاهر بشكل ملحوظ مثلا لإطار الجدول في خانة الخلفية و الخانات الباقية لا تترك فيها شيء يعني لو فيها شيء امسحه اتركها فارغة و هذا القصد و من ثم نحفظ العمل (كل خيار نحفظ CSS بعد الانتهاء منه يعني خطوة خطوة أفضل)

الخيار الخامس : "تصنيف السكربتات"

إذا تابعت الحلقة الثالثة و لازم تتابعها و راح تعرف هذا الخيار و هو اللي تكلمنا عنه في الحلقة الثالثة و هذا الخيار أكيد إحنا الآن مخلصينة مش لازم نسوي فيه شيء

الخيارين السادس و السابع : "Table Header" و "Table Footer" :

أيضا لا نغير فيهم شيء لأننا تكلمنا عنهم في الحلقة الثالثة السابقة

الخيار الثامن : "First Alternating Color" :

هذا الخيار هو لتغيير لون خلفية اسم القسم المدرج تحت منتدى رئيسي كما ترى في الصورة :

الآن في خانة الخلفية نضع كود اللون الذي نريده مسبوقا بمربع و ما راح أعيد الكلام لأنه احفظناه يالغاليين اكيد صح ؟ تمام :lulu18:

في خانة لون الخط نضع اللون الذي نريده و لو كان غامق تمام و نحاول نخلي اللون واحد يعني ما نريد يكون ألوان متنوعة بدنا استايل احترافي مش كوكتيل :grin:

الآن في الثلاث خانات اللي تحت في آخر الخيار نضع نفس لون الخط في أول خانتين على اليمين و الخانة الأخيرة نضع فيها لون و لو يكون الأحمر يكون تمام حتى لما نيجي نضغط على رابط القسم لما نمرر الماوس عليه يتغير اللون للأحمر أو إلى أي لون تريد و لكن يكون ملحوظ على لون الاستايل كما نرى في الصورة

.. الآن نحفظ CSS

الخيار التاسع : "Second Alternating Color" :

هذا نفس الخيار الاول و لكن هذا الخيار هو لخلفية عدد المشاركات و المواضيع و المشاهدات و ما شابه و لا تنسى هالخيارين الثامن و التاسع يغيروا لك خلفية المواضيع و المشاهدات و الردود داخل كل قسم أيضا المهم في خانة لون الخلفية ضع لون أفتح أو أغمق من اللون الأول على حسب ما بدك أنا بحط لون أغمق و لكن يكون اللون أغمق بشوي أفضل أو أفتح بشوي على حسب ما بدك و المهم بعد ما نضع لون الخلفية نضع لون الخط و كل شيء مثل ما سوينا في الخيار السابع بالضبط يعني الخلاصة إنه نغير لون الخلفية فقط .. نحفظ CSS الآن

راح أخبركم على شيء تجاهلته في جميع الخطوات و هو شكل الخط و نوع الخط (Font Family) و حجم الخط لن نتكلم عنهم لأنه هذا على حسب ما بدك فيه عدة خطوط و عدة ألونا و لكن أنصحك بنوع الخط Times New Roman و ms sans serif و arial

المهم نكمل

الخيارين العاشر و الحادي عشر و هما : "WYSIWYG Editor" و "Input Fields"

هذان الخيارين هما لصندوق كتابة المواضيع و صندوق الرد السريع و خانة كلمة البحث

الآن في خانة الخلفية نضع لون فاتح و في خانة لون الخط نضع لون غامق و هو لون كتابة الموضوع و الآن شكل الخط أنصحكم تسوون مثلي تخلوه فارغ و نوع الخط يكون ms sans serif و حجم الخط 8pt و طبعا هذي الخيارات مثل ما بدك لكن أنا فل استايلاتي مسوي هالخيارات .. (يا أخي الناس أذواق شايفهم كلهم نفسك ياللولو؟؟) :grin: :lulu18:

انتبه هام جدا : في الخيار العاشر "WYSIWYG Editor" في الخيارات الأخيرة اللي فيه تحت فرغ جميع الخانات ما تحط شيء فيهم انتبه تمام ؟؟ طيب الآن احظ CSS للخيار التاسع و عدل الخيار العاشر كما في التاسع بالضبط و احفظ CSS أيضا

الآن وصلنا للخيار الثاني عشر : "الأزرار" :

و هو خاص بالأزرار الموجودة في المنتدى و هي :

1 - زر تسجيل الدخول
2 - زر البحث
و باقي الأزرار كالتحكم بالمرفقات عند كتابة الموضوع و أزرار اعتماد المشاركة و معاينة الموضوع و غيرها من جميع الأزرار

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

الخيار الثالث عشر : "<select> Menus" :

و هو خيار خاص بما يلي :

قائمة الاستايلات عند اختيار شكل الاستايل المناسب
قائمة الانتقال السريع
قائمة خيارات عرض الموضوع

يفضل أن نضع في خانة الخلفية لون فاتح كما نريد

في خانة لون الخط يكون غامق و نحفظ الـ CSS

الخيار الرابع عشر و هو :"خط صغير" :

طبعا نقوم بتفريغ خانة لون الخلفية و هذا اهم شيء يعني نتركها فارغة و نضع لون الخط الذي نريده و شكله و حجمه و نوعه

لون الخط يقوم بتغيير ما يلي في المنتدى :

1- لون خط معلومات العضو في الترحيب :

2- لون خط شرح القسم :

3- لون خط إحصائيات المنتدى :

4- لون خط شرح الصورة الموجودة بجانب عوان الموضوع مثل موضوع ساخن أو انت مشارك في هذا الموضوع كما في الصورة ستتعرف عليها :

5- لون خط عبارة التوقيت بدون تغيير لون الساعة :

6- لون خط حفظ الحقوق vBulletin :

7- لون قوانين المشاركة :

8- لون مسمى العضو و عنوان الموضوع :

الآن انتيهنا و نقوم بحفظ CSS

الخيار الخامس عشر : "Time Color" :

هذا الخيار لتغيير لون الساعة كما في الصورة :

طبعا في خانة الخلفية انتبه لا تضع لون و اتركها فارغة و في خانة لون الخط ضع لون الساعة و على حسب لون خلفية منتداك يعني يكون اللون ظاهر و أنا كل مرة أضع اللون الأحمر FF0000 لانه خلفيات استايلاتي ما فيها أحمر

الخيار السادس عشر : "Navbar اتقئ اللهاتقئ اللهاتقئ اللهاتقئ الله" :

هذا الخيار للمكان التالي في الصورة عند كلمة منتديات اللولو جرافكس في الـ Navbar :

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

و الخيارات الثلاثة الأخيرة الخيارين الأول على اليمين و الثاني ضع فيهم لون الخط اللي وضعناه فوق و الخيار الثالث ضع فيه لون الخط عند مرور الماوس في الـ Navbar عند الدخول لقسم ما و يفضل نفس الاون مش كل لون نسويه عند مرور الماوس غير عن الثاني و تكون كلها متناسقة اهم شيء في الاستايلات تناسق الألوان

الخيار السابع عشر : "Highlighted Font" :

هذا الخيار لتغيير لون كلمة البحث أي أنه عند البحث عن كلمة يميزها عند دخولك للموضوع الذي وجدته في نتائج البحث الذي يحوي تلك الكلمة فتكون بلون غير عن لون الموضوع نفسه و أفضل أن تتركه باللون الاحمر ليكون مميزا

الخيار الثامن عشر : "Panel Surround" :

هذا الخيار تحدثنا عنه في الحلقة السابقة الثالثة نتركه كما فعلناه في الحلقة السابقة و ما نغير فيه و لا أي شيء

الخيار التاسع عشر : "Panel Forms" :

هو خيار لتغيير خلفية صندوق الرد السريع و ليس خلفية الكتابة في الصندوق أي كما في الصورة :

المنطقة المظللة .. و هذا الخيار أيضا تكلمنا عنه في الحلقة السابقة و لكن أود أن أخبركم في خانة المربع Extra CSS Attributes نضع الكود التالي :

padding: 10px;
border: 2px outset;

الخيار العشرون : "<legend>" :

هذا الخيار اترك فيه الخلفية فارغة و ضع لون الخط كما وضعته في الخانات السابقة و كما قلنا هو اللون الغامق

و هذا الخيار هو لتغيير لون و حجم و شكل و نوع الخط الموجود بين الخلايا كما في الصورة التالية (اللي خلفيتهم خضراء للتمييز فقط) :

أي أنه أي كلمة بس خلية كما رأينا سوف يتغير لونها و شكلها كما تريد انت و أهم شيء لا تحط خلفية و اترك مكان الخلفية فارغ

الخيار الحادي و العشرون : "Popup Menu Controls" :

هذا الخيار لتغيير كلمة أرقام الصفحات كما ترى في الصورة التالية :

فقط لتغيير المنطقة المظللة التي لها خلفية متدرجة

هذا الخيار تحدثنا عنه في السابق و وضعنا له خلفية متدرجة و نختار الىن لون للخط و نغير في الخيارات الثلاثة اللي تحت كما غيرنا قبل يعني الخيارين ابتداء من اليمين نغير ألوانهم لنفس اللون اللي وضعناه فوق في لون الخط و الخيار الثالث على اليسار نغيره إلى لون آخر عند مرور الماوس يتغير كما كلمتكم من قبل و كل شيء للآن سهل فقط تغيير ألوان و لكن في الإطالة إفادة انتبهوا إخواني لا تستعجلوا و اشربوا شاي و ما تبقوا مع الدرس كله شوي شوي و بتعرف كل شيء و آخر شيء قم بوضع الكود التالي في خانة المربع Extra CSS Attributes :

padding: 3px 6px 3px 6px;
white-space: nowrap;

المهم الآن الخيار الثاني و العشرون : "Popup Menu Body" :

هذا الخيار لتغيير إطار الروابط السريعة و الخطوط بين كل خيار و أي إطار فيه نافذة تخرج كما في الصورة :

الآن نقوم بتغيير لون الخلفية و هي لون الإطار و نقوم بوضع لون غامق للغطار و هذا الأفضل طبعا

ملاحظة : بجانب لون الخط لا تضع شيء أي اترك الخانة فارغة

الخيار الثالث و العشرون : "Popup Menu Option Row" :

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

الخيار الرابع و العشرون : "Popup Menu Highlighted Option" :

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

الخيار الخامس و العشرون : "قائمة الانتقال السريع في المنتدى" :

هذه لتكملة ألوان قائمة الانتقال السريع حتى تصبح لونا واحدا و نقوم بوضع اللون نفسه للخلفية و لون الخط أيضا كما وضعنا في الخيار الثالث عشر "select> Menus"

طبعا عندنا 6 خيارات و نضع في أول خياران أفقيان و اسمهما :

Selected Item
Depth 0 Items

و الخلفية و لون الخط نضعهم نفس الشيء

الآن انتيهنا بفضل من الله و الحمد لله من الخيارات

آخر شيء عندنا صندوقين في الأسفل باسم "تعريف CSS إضافي" الصندوق الأول نمسح ما به و نضع الكود التالي الجاهز لتلوين السكرول بار Scrollbar :

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { اتقئ اللهاتقئ اللهاتقئ اللهاتقئ الله-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

html
{
scrollbar-base-color: #FFFCD1;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #F1C972;
}

نقوم بتغيير أكواد متغيرات السكرول بار التالية إلى أكواد الألوان على حسب لون منتدانا :

scrollbar-base-color: #FFFCD1;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #F1C972;

في أول خيار نضع لون متوسط أو على حسب ما بدك إنت مثلا و في الثاني نضع لون أغمق بكثير من اللون الأول و في الخيار الثالث نضع لون فاتح نوعا ما أفتح من الأول و لكن كل الألوان على حسب لون منتدانا و الموجود في الوسط أهم شيء و الموجود في الوسط هو للمثلثات الموجود في السكرول بار اللي نضغط عليها للأعلى و الأسفل

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

تم بحمد الله الانتهاء من الحلقة الرابعة و هي : تلوين جميع أجزاء الاستايل الاحترافي CSS

هذا هو الشكل النهائي للاستايل :

[BiMg]http://members.lycos.co.uk/alluluorg/04-change-colors/022.gif[/BiMg]

ربي يعطيكم ألف عافية و ربي يوفقكم و نفسي أرى تطبيق حي لمثال كامل لمنتداكم و استايلكم الاحترافي و شكرا لكم و السلام عليكم و رحمة الله تعالى و بركاته

الموضوع لفائدة الجميع لا لنشر منتداي و أنا أخوكم .. محبكم ^^ا

مشكوررررررررررررررررر

حلقة من حلقاتي .. تلوين جميع أجزاء الاستايل الاحترافي Css تفضل بالدخول 914127868