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

1-ضبط الاستايلات
2-البحث في القوالب
3-رفع تحميل ملف الاستايل
1-ضبط الاستايلات
عند الدخول الى ضبط الاستايلات سوف تضهر لك عدة استايلات اذ كنت محمل اي استايل وسوف تظهر لك عدة خيارات (انظر الى الصورة وسوف تعرف ما هي الخيارات التي سوف نأخذها اليوم)

1-تعديل القوالب
2-اضافة قالب جديد
3-ccs الرئيسي
1-تعديل القوالب
القوالب كثيرة لكن سوف نشرح المهمة (جميع القوالب اللي توضع فوقها الصورالتجميليه.. )
اولاً / اسماء التمبلتز (القوالب) التي توضع فوقها الصور :

1- navbar >> هذا تمبلت اللي في تسجيل وخروج وبحث _المستطيل الأول في المنتدى_
------------------------------------------------------------

2- FORUMHOME >> هذا تمبلت اقسام المنتديات >> ملاحظة / اللي يبي يضع الصور التجميله على جميع اقسام المنتديات يضع هاك فصل الاقسام وهي تزين لحالها طبعا بعد ماتضع الصور يعني مو لازم تسوي على كل قسم نفس الحركه لا انت سوي اللي قلت لك عليه بعدين حط هاك فصل الاقسام وتضبط ان شااء الله
3- FORUMDISPLAY >> هذا تمبلت اللي فيه المواضيع (الخاص بالمواضيع الي داخل القسم)
4- postbit_legacy >> هذا خاص ببيانات العضو وتوسيط المواضيع
5- showthread_quickreply >> هذا تمبلت الرد السريع
6- STANDARD_ERROR هذا تمبلت اخاص بتسجيل الدخول والخروج
ثانياً / شرح مبسط عن كيفية وضع الصور فوق هذه القوالب :

1- تبحث عن القالب المطلوب من البحث في القوالب
2- تاخذ الكود اللي بداخله وتلصقه في الفرونت بيج
3- الجداول بتطلع لكن ليست مثل اللي في المنتدى
4- فوق الجدول اللي وضعته ضع جدول جديد مكون من صف وثلاث اعمده او حسب التصميم اللي انت مصممه وضع خاصية يسار / يمين له وشيل الحدود منه
5- ضع الصور في الجدوال ادراج صورة للصور وادراج خليه للتمدد
6- تغير روابط الصور اللي وضعتها الى اسم مجلد الصور واسم الصورة فقط

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

1-اسم الاستايل الذي تريد ان يركب علية القالب
2-اسم القالب
3-محتوى القالب
4- اضغظ حفظ اذا كنت تريد العودة الى قائمة القوالب بعد تركيب القالب
5-اضغط حفظ وتحديث اذا كنت تريد العودة الى القالب بعد تركيبة
3-css الرئيسي
شرح خصائص css الرئيسية

إقتباس: اقتباس من مشاركة allulu     السلام عليكم و رحمة الله و بركاته الآن نبدأ معكم باسم الله : 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: :laugh: الآن في الثلاث خانات اللي تحت في آخر الخيار نضع نفس لون الخط في أول خانتين على اليمين و الخانة الأخيرة نضع فيها لون و لو يكون الأحمر يكون تمام حتى لما نيجي نضغط على رابط القسم لما نمرر الماوس عليه يتغير اللون للأحمر أو إلى أي لون تريد و لكن يكون ملحوظ على لون الاستايل كما نرى في الصورة .. الآن نحفظ 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 Text" : هذا الخيار للمكان التالي في الصورة عند كلمة منتديات اللولو جرافكس في الـ 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 { text-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] الموضوع لفائدة الجميع لا لنشر منتداي و أنا أخوكم .. محبكم أحمد

وشكر خاص الى allulu لشرح لخيارات css
وهيك بنكون خلصنا ضبط الاستايل
2-البحث في القوالب
اذهب الى لوحة التحكم ضبط الاستايلات البحث في القوالب

1- اختر اسم الاستايل الذي تريد ان تبحث به واذا كنت تريد ان تبحث بكل الاستايلات لا تحدد اي استايل
2-اكتب كلمة البحث بحيث لا يوجد اي فراغ اخر الكلمة مثال
(frumhom) لا يجب ان تكتب هكذا ( frumhom) اي لا يجب ان يكون فراغ اخر الكلمة االاخيرة
3- اختر نعم اذا كنت تريد ان تبحث عن قالب محدد
اختر لا اذا كنت تريد ان تبحث عن كلمة في محتوى قالب
4-اضغظ بحث
وهيك بنكون خلصنا البحث في القوالب
3-رفع تحميل ملف الاستايل
لوحة التحكم ضبط الاستايلات رفع تحميل ملف استايل

1-اختر ملف الاستايل من جهازك
2-اختر نعم لتجاهل نسخة الاستايل
3-اضغط رفع الاستايل من اجل رفع الاستايل
اخواني جميعنا نخطأولا يوجد احد لا يخطئ فالرجاء اذا وجد اي خطأ تصحيحة
وشكر خاص الى allulu لشرح لخيارات css
اخواني حافظو دوما على حقوق الاعضاء فلا تنقلو موضوع دون ان تكتبو شكر الى صاحب الموضوع الاصلي
وهيك بنكون خلصنا الدرس الثاني اسف على الاطالة
انتضرو الدرس الثالث

جزاك الله الخير

العفو وهااد واجبنا

جزاك الله خير
دائما اضافاتك وابدعاتك متميزه

جزاك الله الخير
تحياتي وتقديري لك

جزاك الله الخير
ويعطيك الف عافية

جزاك الله خيرا علي هذا الجهد الممتاز

العفو ومشكورين على المرور

جزاك الله الخير
وبارك بك ووفقك لكل خير

[MOVE="up"]لاتنسانا من جديدك اخـــــــوي[/MOVE]

العفو ومشكور على المرور
وانشالله بضيف الدرس 3