Bakenam
03-16-2009, 10:32 PM
سسنهي في هذا الجزء من الدروس ... هذه السلسله من الدروس لشرح تصميم ستايل للمنتدى العربي MySmartBB
والتي نقلناها لكم من الموقع الرسمي لمنتديات MySmartBB شاكرين الاخ : "طيف الابداع" ...
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول" (http://www.traidnt.net/vb/showthread.php?t=752224)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني" (http://www.traidnt.net/vb/showthread.php?t=752238)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثالث" (http://www.traidnt.net/vb/showthread.php?t=752987)
الان الدرس الرابع والاخير لتوزيع والتعديل على ملف CSS للستايل ...
بعد أن قمنا بتركيب الصور بالفرونت بيج حان الوقت للتعديل على الأيقونات و الأيقونات التي سنعدل عليها هي التالية:
(موضوع جديد,رد جديد,رسالة جديد,أخذ نسخة , منتدى يحوي على مشاركات جديدة,منتدى لا يحوي على مشاركات جديد,منتدى مغلق).
تابعوا الشرح:
نقوم بفتح برنامج الفوتوشوب و نفتح الصورة التي اسمها
add.gif
من مجلد images في الستايل:
بعد فتح الصورة يتوجب علينا جعل ألوانها ألوان الشاشة حتى نستطيع التعامل مع الصورة انظر الطريقة:
الآن نختار اداة التحديد المستطيل و نسمح كل ما في الصورة:
المسح يكون بتحديد كل ما في الصورة و ضغط من لوحة المفاتيح زر
Delete
الآن نختار أداة المستطيل دائري الزوايا و ننشئ مستطيلاً في الصورة ثم نبدأ بالتأثير عليه عن طريق اختيارات الدمج لاحظ التأثيرات التي قٌمتُ بها:
لاحظ كيف أصبح شكل الصورة:
الآن نقوم بكتابة كلمة موضوع جديد (و لا داعي لشرح الطريقة لأن ذلك مشروح في الدورة أكثر من مرة)
و الآن نختار من ملف حفظ بإسم و نقوم بحفظها بصيغة gif فوق الصورة
add القديمة
بعد الحفظ لا تغلق الصورة...بل عدل على موضوع جديد و اجعلها أضف رد و قم بحفظها فوق الصورة
reply.gif
و بعد الحفظ قم بتغيير الكلمات من أضف رد إلى رسالة جديدة و قم بحفظها فوق
new_pm.gif
و بعدها قم بتعديل الصورة إلى أخذ نسخة و احفظها فوق
take_copy.gif
الآن تستطيع إغلاق الصورة.
افتح بعدها صورة منتدى يحوي مواضيع جديد و قم بالتعديل عليها كالطريقة السابقة إنما على الشكل التالي إتبع الصور:
الآن كتبنا جديد في مربع مع تكبير الصورة..اعمل كما فعلنا في الصور (موضوع جديد رد جديد,,إلخ)
و قم بحفظ الصور على الشكل التالي:
جديد icon-67_new
قديم icon-67_old
مغلق icon-67_lock
وصلة audit
الآن جاء دور التعديل على التدرجات المستخدمة في المنتدى افتح الصورة gradient_tcat و قم بعمل تدرج كالتالي طبعاً بعد أن تجعلها ألوان الشاشة:
و قم بحفظها و اعمل الأمر ذاته مع الصورة
gradient_thead.gif
****الآن انتهينا من المرحلة الأولى في درسنا****
نبدأ المرحلة الثانية على بركة الله تعالى:
هذه المرحلة هي التعديل على السي اس اس و لن اكتب الا قليلاً و سأترككم مع الصور تشرح نفسها:
الصورة السابقة هي في بداية السي اس اس و هي الذي يجب أن نعدل عليها بداية ..أترى الكود المحدد عليك أن تغيره إلى لون خلفية ستايلك للحصول على اللون اتبع التالي:
افتح الفرونت بيج..
امسح كل ما في التعليمات البرمجية في الصفحة...
الآن اكتب كلمة ما و قم بتحديدها و اتبع الصور:
الآن أصحبت الكلمات التي حددناها بلون الخلفية بإمكانك نسخ كود اللون عن طريق الذهاب إلى التعليمات البرمجية و نسخ الكود منها انظر الصورة:
طبعاً انسخ من عند # إلى آخر حرف بالكود و قم بلصقه مكان الكود القديم المحدد في السي اس اس.
الآن دور تلوين الجداول لتلوينها علينا اختيار لون محدد بعد ان نختار لوناً نذهب إلى السي اس اس و نتبّع الصورة:
و هناك أشياء أخرى بالسي اس اس اكتشفها بنفسك او استعن بالشرح الذي قدمه
ff5006
جزاه الله خيراً على كل حال ما سأشرح بالسي اس اس الآن هو لتعديل روابط الصور tcat thead
اتبع التالي:
في السي اس اس ترى خمس روابط تراها على الشكل التالي:
styles/main/images/photoname.gif
هذا يعني ان تظهر الصورة من مجلد main أي الستايل الرئيسي و نحن نريد أن تظهر صور ستايلنا ذاتها لذا نعدل الرابط من Main إلى اسم مجلد الستايل مثلاً ستايلي هذا اسم مجلده dora سوف أعدل جميع الروابط التي بالسي اس اس بحيث تصبح كالتالي:
styles/dora/images/photoname.gif
هكذا نكون قد انهينا التعديل على السي اس اس بنجاح و الحمد لله الآن نحفظ السي اس اس و نتابع الشرح النهائي.
**الجزء الثالث من الدرس: (تعديل مسارات الصور في القوالب)**
في هذا الجزء سوف نعدل مسارات الصور التي في القوالب بحيث نغير المسار كاملاً الشرح:
افتح مجلد
images
الخاص بستايلك و افتح مجلدات الصور التي استخدمتها بالستايل و قم بنسخ كل صورة استخدمها و الصقها في مجلد images ,
الآن نذهب إلى مجلد images الخاص بالستايل و نلصق الصور و نحذف الصور التالية أسمائها:
footer.gif
logo.jpg
background.gif
background.jpg
بعد هذا نفتح قالب الهيدر و نلصقه بالفرونت بيج
و نستعرض التعليمات البرمجية فنرى كود الهيدر بالإضافة إلى روابط الصور نحن لا نقوم بفعل أي شي مع الكود و لكن نقوم بالتعديل على روابط الصور بحيث تصبح كالتالي:
{$image_path}/imagename.gif
نقوم بالأمر ذاته مع كل روابط قالب الهيدر و الفوتر.
---***--انتهت سلسلة تصميم الستايلات انظر الآن إلى عملك و ادعلينا***---***
الحمد لله الذي بنعمته تتم الصالحات
الان ندعكم مع صوره للستايل الذي تم تصميمه في هذه الدوره ::
ملاحظه ::
سلسلة الشروحات هذه لتصميم ستايل للمنتدى العربي MySmartBB نقلت من الموقع الرسمي للمنتدى العربي MySmartBB للفائده لمستخدمي المنتدى العربي ..
كما اننا لاننسى شكر الاخ " طيف الابداع " على ابداعه بالفعل ...
كما واننا نامل من الاخوه والاخوات في معهدنا الغالي TRAIDNT للمزيد في دعم المنتدى العربي MySmartBB في شتى المجالات البرمجه والتصميم والدعم الفني ... الخ
لكم خالص التحيه والتقدير ,,,
والتي نقلناها لكم من الموقع الرسمي لمنتديات MySmartBB شاكرين الاخ : "طيف الابداع" ...
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الأول" (http://www.traidnt.net/vb/showthread.php?t=752224)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثاني" (http://www.traidnt.net/vb/showthread.php?t=752238)
[درس] تصميم ستايل لمنتدى MySmartBB "الجزء الثالث" (http://www.traidnt.net/vb/showthread.php?t=752987)
الان الدرس الرابع والاخير لتوزيع والتعديل على ملف CSS للستايل ...
بعد أن قمنا بتركيب الصور بالفرونت بيج حان الوقت للتعديل على الأيقونات و الأيقونات التي سنعدل عليها هي التالية:
(موضوع جديد,رد جديد,رسالة جديد,أخذ نسخة , منتدى يحوي على مشاركات جديدة,منتدى لا يحوي على مشاركات جديد,منتدى مغلق).
تابعوا الشرح:
نقوم بفتح برنامج الفوتوشوب و نفتح الصورة التي اسمها
add.gif
من مجلد images في الستايل:
بعد فتح الصورة يتوجب علينا جعل ألوانها ألوان الشاشة حتى نستطيع التعامل مع الصورة انظر الطريقة:
الآن نختار اداة التحديد المستطيل و نسمح كل ما في الصورة:
المسح يكون بتحديد كل ما في الصورة و ضغط من لوحة المفاتيح زر
Delete
الآن نختار أداة المستطيل دائري الزوايا و ننشئ مستطيلاً في الصورة ثم نبدأ بالتأثير عليه عن طريق اختيارات الدمج لاحظ التأثيرات التي قٌمتُ بها:
لاحظ كيف أصبح شكل الصورة:
الآن نقوم بكتابة كلمة موضوع جديد (و لا داعي لشرح الطريقة لأن ذلك مشروح في الدورة أكثر من مرة)
و الآن نختار من ملف حفظ بإسم و نقوم بحفظها بصيغة gif فوق الصورة
add القديمة
بعد الحفظ لا تغلق الصورة...بل عدل على موضوع جديد و اجعلها أضف رد و قم بحفظها فوق الصورة
reply.gif
و بعد الحفظ قم بتغيير الكلمات من أضف رد إلى رسالة جديدة و قم بحفظها فوق
new_pm.gif
و بعدها قم بتعديل الصورة إلى أخذ نسخة و احفظها فوق
take_copy.gif
الآن تستطيع إغلاق الصورة.
افتح بعدها صورة منتدى يحوي مواضيع جديد و قم بالتعديل عليها كالطريقة السابقة إنما على الشكل التالي إتبع الصور:
الآن كتبنا جديد في مربع مع تكبير الصورة..اعمل كما فعلنا في الصور (موضوع جديد رد جديد,,إلخ)
و قم بحفظ الصور على الشكل التالي:
جديد icon-67_new
قديم icon-67_old
مغلق icon-67_lock
وصلة audit
الآن جاء دور التعديل على التدرجات المستخدمة في المنتدى افتح الصورة gradient_tcat و قم بعمل تدرج كالتالي طبعاً بعد أن تجعلها ألوان الشاشة:
و قم بحفظها و اعمل الأمر ذاته مع الصورة
gradient_thead.gif
****الآن انتهينا من المرحلة الأولى في درسنا****
نبدأ المرحلة الثانية على بركة الله تعالى:
هذه المرحلة هي التعديل على السي اس اس و لن اكتب الا قليلاً و سأترككم مع الصور تشرح نفسها:
الصورة السابقة هي في بداية السي اس اس و هي الذي يجب أن نعدل عليها بداية ..أترى الكود المحدد عليك أن تغيره إلى لون خلفية ستايلك للحصول على اللون اتبع التالي:
افتح الفرونت بيج..
امسح كل ما في التعليمات البرمجية في الصفحة...
الآن اكتب كلمة ما و قم بتحديدها و اتبع الصور:
الآن أصحبت الكلمات التي حددناها بلون الخلفية بإمكانك نسخ كود اللون عن طريق الذهاب إلى التعليمات البرمجية و نسخ الكود منها انظر الصورة:
طبعاً انسخ من عند # إلى آخر حرف بالكود و قم بلصقه مكان الكود القديم المحدد في السي اس اس.
الآن دور تلوين الجداول لتلوينها علينا اختيار لون محدد بعد ان نختار لوناً نذهب إلى السي اس اس و نتبّع الصورة:
و هناك أشياء أخرى بالسي اس اس اكتشفها بنفسك او استعن بالشرح الذي قدمه
ff5006
جزاه الله خيراً على كل حال ما سأشرح بالسي اس اس الآن هو لتعديل روابط الصور tcat thead
اتبع التالي:
في السي اس اس ترى خمس روابط تراها على الشكل التالي:
styles/main/images/photoname.gif
هذا يعني ان تظهر الصورة من مجلد main أي الستايل الرئيسي و نحن نريد أن تظهر صور ستايلنا ذاتها لذا نعدل الرابط من Main إلى اسم مجلد الستايل مثلاً ستايلي هذا اسم مجلده dora سوف أعدل جميع الروابط التي بالسي اس اس بحيث تصبح كالتالي:
styles/dora/images/photoname.gif
هكذا نكون قد انهينا التعديل على السي اس اس بنجاح و الحمد لله الآن نحفظ السي اس اس و نتابع الشرح النهائي.
**الجزء الثالث من الدرس: (تعديل مسارات الصور في القوالب)**
في هذا الجزء سوف نعدل مسارات الصور التي في القوالب بحيث نغير المسار كاملاً الشرح:
افتح مجلد
images
الخاص بستايلك و افتح مجلدات الصور التي استخدمتها بالستايل و قم بنسخ كل صورة استخدمها و الصقها في مجلد images ,
الآن نذهب إلى مجلد images الخاص بالستايل و نلصق الصور و نحذف الصور التالية أسمائها:
footer.gif
logo.jpg
background.gif
background.jpg
بعد هذا نفتح قالب الهيدر و نلصقه بالفرونت بيج
و نستعرض التعليمات البرمجية فنرى كود الهيدر بالإضافة إلى روابط الصور نحن لا نقوم بفعل أي شي مع الكود و لكن نقوم بالتعديل على روابط الصور بحيث تصبح كالتالي:
{$image_path}/imagename.gif
نقوم بالأمر ذاته مع كل روابط قالب الهيدر و الفوتر.
---***--انتهت سلسلة تصميم الستايلات انظر الآن إلى عملك و ادعلينا***---***
الحمد لله الذي بنعمته تتم الصالحات
الان ندعكم مع صوره للستايل الذي تم تصميمه في هذه الدوره ::
ملاحظه ::
سلسلة الشروحات هذه لتصميم ستايل للمنتدى العربي MySmartBB نقلت من الموقع الرسمي للمنتدى العربي MySmartBB للفائده لمستخدمي المنتدى العربي ..
كما اننا لاننسى شكر الاخ " طيف الابداع " على ابداعه بالفعل ...
كما واننا نامل من الاخوه والاخوات في معهدنا الغالي TRAIDNT للمزيد في دعم المنتدى العربي MySmartBB في شتى المجالات البرمجه والتصميم والدعم الفني ... الخ
لكم خالص التحيه والتقدير ,,,