[ د-م-1 | 8 ] - دورة تصميم ستايل منتديات - تعديلات واضافات بالمنتدى

[X100]

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


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


كيف حالكم جميعاً ؟

ان شاء الله بخير وصحة وعافية




أقدم لكم أخيراً الدرس النهائي والختامي من دورة تصميم ستايلات منتديات الـ vb

نأسف على التأخير مرة أخرى ، انتهى اشتراك النت لدي واضطررت الآن الى التوجه الى أحد المقاهي





الدرس هذا سنتحدث فيه عن برمجة الـ CSS

يعني أن كل عملنا تقريباً سيكون باعدادات المنتدى الداخلية ، وسيكون الدرس على شكل فقرات .




الفهرس :


• اصلاح الفراغ

• تلوين الخلفية

• تركيب خلفية ◄ خارجية - داخلية

• مجلدات الصور

• تأطير / تلوين داخلي للقوالب

• تقليص المنتدى

• حفظ الستايل






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




{ اصلاح الفراغ }


- بعد فتح المنتدى ستلاحظون وجود فراغ بسيط يظهر على حواف الستايل ، مثل الصورة التالية :





* لإصلاحها نتبع الآتي :

- بعد الدخول على لوحة تحكم الإدارة نختار التحكم بالاستايلات





- نختار " اذهب " على الستايل الذي نود تعديله





- بعد النزول الى أسفل قليلاً .. واذا وجدنا المستطيل المسمى " خلفية المنتدى / Body "

نعدل " خواص CSS الإضافية بحيث نجعل جميع الأرقام الموجودة الى 0 .. ثم ننزل آخر الصفحة ونختار " حفظ "





- والنتيجة اختفاء الفراغات







{ تلوين الخلفية }


الخلفية هي الفراغات البيضاء الظاهرة أمامكم عند فتح الستايل :





لهذا أولاً ، نفتح أي جزء من صور الستايل بالمنتدى والذي يحمل لون الخلفية الذي نريده .. ثم نختار هذه الأداة



سيظهر اللون في المربعين الصغيرين . نضغط عليه



ننسخ الكود الظاهر امامنا





ثم نذهب الى لوحة تحكم الإدارة








ثم ننزل للأسفل حتى نجد القالب المسمى " خلفية الصفحة / Page Background " ونضع الكود بدون مسح الـ #






ثم نذهب الى آخر الصفحة ونختار " حفظ " .. ونذهب الى المنتدى ونرى النتيجة :







{ تركيب الخلفية }

[ تركيب خلفية خارجية ]


الخلفية الخارجية هي الخلفية التي تقع على حدود الستايل ، وتقريباً هذه الطريقة لا تفيد الا بالستايل الخالي من مناطق التمدد او الستايلات المقلّصة العرض ..

وهي الموجودة برقم واحد بالصورة التالية :





لتركيب صورة للخلفية نتبع الآتي :

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





نختار " اذهب " على الستايل الذي نود تركيب الخلفية فيه





ننزل للأسفل حتى نرى الجدول " خلفية المنتدى / Body "

وتحديداً المحدد باللون البرتقالي ..





في الفراغ الموجود ،

#E1E1E2 

نضيف بعدها مسافة ثم نلصق هذا الكود بعد تعديل ما يأتي :

url(Folder Name/Background Name.jpg) repeat-y fixed center top 

الـ Folder Name نغيره ونجعله اسم مجلد الستايل الموجود بداخل ملف الـ vb
اما الـ Background Name فنغيره ونجعله اسم صورة الخلفية الموجودة بداخل ملف الستايل ،
اما الـ jpg فنغيرها الى صيغة صورة الخلفية التي صممناها
وأيضاً اذا كان اسم المجلد او الصورة يحتوي على مسافة فتكتب المسافة على شكل 20%

- واضيف أيضاً انه يفضل ان تكون صورة الخلفية بعرض 1280 بكسل ان أمكن .. او أياً كان عرض شاشة جهازك ..

بعد التعديل :

url(New%20Style/Background.jpg) repeat-y fixed center top 

ثم والخطوة الأخيرة نضع صورة الخلفية بداخل ملف الستايل الذي نريده .. وانا وضعته بمجلد الـ New Style



النتيجة :





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






[ تركيب خلفية داخلية ]


الخلفية الداخلية هي الخلفية البيضاء والمحددة برقم 2 بالصورة :





لتعديلها ندخل الى لوحة تحكم الادارة ، ونختار التحكم بالاستايلات






ثم نختار الستايل الذي نود التعديل عليه ونضغط " اذهب "





ننزل الى الأسفل حتى نجد القالب المسمى " خلفية الصفحة / Page Background "





وبعد كود اللون

#FFFFFF 

نضيف مسافة ثم الكود التالي :

url(File Name/Background name.jpg) repeat-y fixed center top 

الـ Folder Name نغيره ونجعله اسم مجلد الستايل الموجود بداخل ملف الـ vb
اما الـ Background Name فنغيره ونجعله اسم صورة الخلفية الموجودة بداخل ملف الستايل ،
اما الـ jpg فنغيرها الى صيغة صورة الخلفية التي صممناها
وأيضاً اذا كان اسم المجلد او الصورة يحتوي على مسافة فتكتب المسافة على شكل 20%

- واضيف أيضاً انه يفضل ان تكون صورة الخلفية بعرض 1280 بكسل وطول 800 بكسل ان أمكن .. او أياً كان حجم شاشة جهازك ..

بعد التعديل :

url(New%20Style/Background.jpg) repeat-y fixed center top 

ثم نختار " حفظ " من آخر الصفحة



ثم والخطوة الأخيرة نضع صورة الخلفية بداخل ملف الستايل الذي نريده .. وانا وضعته بمجلد الـ New Style





النتيجة :





طبعاً انا استخدمت نفس الصورة في الخلفية الخارجية والداخلية لتظهر وكأنها خلفية واحدة

يتبع

[X100]

{ مسار مجلد الصور }

هذه الفقرة هي من الفقرات الأساسية والمهمة بالستايل.. وهي تصميم الأيقونات و أزرار المنتدى..


اولا و كـ خطوة أساسية نذهب الى ملف الـ vb وننسخ الملف المسمى images ..ثم نلصقه بداخل مجلد الستايل الخاص بنا .. وبعدها :

بعد الدخول الى لوحة تحكم الادارة و اختيار الستايل ..

ننزل للأسفل حتى نجد الجدول المسمى " مسار مجلد الصور / ImagePaths "






سيكون عملنا الآن على هذه النقطة ،،

في كل الفراغات التالية .. نأخذ مثلآ مجلد الأزرار

images/buttons 

.. نكتب قبل images اسم مجلد الستايل الخاص بنا ثم / .. أي ستصبح بهذا الشكل :

New%20Style/images/buttons 

- أذكركم بأن المسافات بين الكلمات تكتب 20%


نفعل هذا بكل الفراغات لتصبح :





ثم نختار حفظ من آخر الصفحة ..


بعدها لنبدأ العمل كـ مثال اولا على " مجلد صور الأزرار "

لنفهم محتواه .. يجب علينا اولا الدخول على هذا الملف .. نذهب الى مجلد الـ vb ثم الى ملف الستايل الخاص بنا .. ثم ملف images الذي نسخناه .. ثم buttons وهو اسم مجلد الأزرار ..الصور الموجودة به مثل :

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

انا صممت زر " موضوع جديد " وهذا هو :
(((((يجب أن يكون بصيغة gif )))))







ننقل الزر الى ملف الـ buttons الخاص بالستايل





نبحث عن الزر المشابه ، ثم نعمل نسخ للاسم ..





نحذف الزر الأصلي ..





نلصق اسم الزر الاصلي بالزر الذي صممناه





الآن بمجرد الذهاب الى المنتدى نجد أن الزر قد تغير :






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

أتمنى أن يكون شرحي واضح ، ومن لم يفهم فلآ بأس بإعادة الشرح






{ التأطير الداخلي للقوالب }


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

يجب ان تفهموا طرييقة الاكواد التي شرحناها بـ خطوة تركيب الخلفية


ندخل الى ملف images ثم الى gradients .. ونضع الصور هناك ، ثم نكمل ...


اولا لتغيير أي تأطير ندخل الى لوحة تحكم الادارة > التحكم بالاستايلات ، ونختار الستايل


ثم ننزل الى الجداول التي بالأسفل ..


1- جدول (الأقسام الرئيسية/Category Strips)




وهو هذا القالب :




يفضل ان يكون التصميم بطول 28 بكسل ، اما العرض فلا مشكلة به ، ولكن يجب ان يكون قابل للتمدد ..
مثل :





2- جدول (رأس الجدول/Table Header)



وهذا هو القالب :




يفضل ان يكون التصميم بطول 34 بكسل ، اما العرض فلا مشكلة به ، ويجب ان يكون قابل للتمدد ..
مثل :







3- جدول (نهاية الجدول/Table Footer)



وهو هذا القالب :



يفضل ان يكون التصميم بطول 25 بكسل ، اما العرض فلا مشكلة به ، ويجب ان يكون قابل للتمدد
مثل :






النتيجة بالمنتدى :






ارأيتم كيف اصبح المنتدى رائعاً بعد التعديلات ؟



وهكذا اخوتي في كل الجداول والقوالب الباقية ..

تستطيعون ايضاً تغيير الخط - اللون - الحجم .. في كل الجداول ..

أي سؤال او استفسار فلا مانع ..






{ تقليص عرض المنتدى }

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


بعد الدخول الى لوحة تحكم الادارة >> التحكم بالاستايلات ، واختيار الستايل الذي تودون تعديله

ننزل للاسفل حتى نجد الجدول المسمى " مقاسات عرض المنتدى + مسار الصور الخاصة بالإستايل "

نعدل الخيار الأول من 100% الى 800 بكسل مثلا ،،

لجعل الحجم بالنسبة المئوية يكتب الرقم ثم اشارة الـ %
لجعل الحجم بالبكسل ، يكتب الرقم فقط





بعد الضغط على حفظ ، النتيجة :











{ الستايل / حفظه - تحميله }

[ حفظ الستايل ]


ندخل اولا على " رفع / تحميل الاستايل "





نتبع الشرح مثلما هو موضح بالصورة ، ثم نختار " تحميل "





ستظهر رسالة لحفظ الملف بصيغة xml ، نحفظها





النتيجة :











[ تحميل الستايل ]


نضغط على choose file





نختار ملف الستايل - ويجب ان يكون بصيغة xml -






نختار " استيراد "





نختار " تم "





النتيجة :









نتيجة المنتدى الأخيرة :




لمن أراد تحميل هذا الاستايل اضغط هنا








وبهذا اخواني واخواتي ننتهي من دورة تصميم ستايلات الـ vb

آسف على تقصيري في جميع الدروس وارجو المعذرة ^^"

أي سؤال او استفسار فلا تترددوا حالياً ، وبإذن الله لن أخذلكم


يرجى ارفاق صورة لمنتداكم بعد درس اليوم لنرى نتيجة الدورة


تم بحمدالله



في امان الله ورعآيته