شرح ادارة الثيمات (اغلب ماستحتاجه لتصميم استايل)

[Pepo]

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

1. ادخل على لوحة تحكم الأدارة.. من ثم اضغط تعديل / حذف الموجودة تحت الثيمات
2. سوف تظهر لك قائمة بالأستايلات المثبتة بمنتداك (هذا اذا كنت قمت بتثبيت اكثر من استايل)
3. اضغط على كلمة اذهب الموجودة امام الأستايل الذى تريد التعديل عليه..
4. الأسم وهذا هو اسم الأستايل.. اذا كنت تنوى بدأ استايل جديد, يمكنك تغيير اسمه مثل ماتريد. (فى شرحنا انا سميته MyBB )
5. الأسم الرئيسى هنا اتركه كما هو..
6. السماح لمجموعة الأعضاء هنا تختار من الأختيارات الموجودة,, مجموعة الأعضاء التى يمكنها ان تستخدم هذا الأستايل.
   

من هنا نبدأ شرحنا.. ارجو ان تقرأ بإمعان حتى تصل المعلومة بإذن الله..

1. اعداد التمبليت فى هذا الجزء تحدد اى من القوالب الخاصة بهذا الأستايل.
   كما ذكرت ان فى مثالنا انا سميت الأستايل MyBB اذن مجموعة التمبليت التى استخدمها هى MyBB Templates
2. مجلد الصور هنا تحدد له.. المجلد الذة سوف تضع فيه صور تصميمك للأستايل..
   (تشمل اللوجو, والأزرار, والخلفيات, الخ)
3. شعار المنتدى هنا تحدد له اسم الملف الخاص باللوجو على سبيل المثال.. اذا كان مجلد الصور هو mybb اذن رابط اللوجو (المفترض انك قمت بتصميمه مسبقا) يكون mybb/logo.gif
4. Table Spacing يترك دون تغيير. بكل الأحوال.
5. Inner Table Border Width هذا الخيار خاص بعرض الخط الفاصل بين التمبليتس الموجودة بالمنتدى, او الذى يسمى البوردر Border انظر الصورة التالية, وانظر الى المكان المشار اليه بالسهم.
   
6. Body كل ما يأتى تحت هذا الخيار, هو خاص بتصميم الشكل الكلى.. او الجسم الخارجى للأستايل.. اذا لاحظت بمنتدانا ان الخلفية له, لونها ابيض.. انظر الصورة التالية
   
   كل ماتشير اليه الأسهم هو الـ Body اما الأجزاء البيضاء اللى بالوسط ليس لها علاقة بالـ body انها جزء اخر وهو الجزء التالى..
7. Page Container هذا الخيار.. هو خاص بألوان الصفحة التى داخل الـ Body
   وليس الجزء الخارجى.. انظر الصورة التالية..
   
   ويمكنك من خلال هذا الأختيار تحديد كل اختيارات معينة للجسم الداخلى.. وهى لون الخلفية, والمحاذة. واضا عرض الجزء الداخلى..
8. Content Container صراحة لم اتطرق للأستخدام هذا الجزء من قبل.. ومازلت لا افهم سبب وجوده اصلا.. اذا عرفت سوف اخبركم
9. Top Links Menu هذا الجزء خاص بالروابط الموجودة اعلى الصفحة.. انظر الصورة التالية.
   
   يمكنك عن طريق هذا الأختيار تغيير لون الخلفية الخاصة بالروابط اعلى الصفحة.. او حتى تغيير الوان ونوع وحجم الخط الخاص بها!.
10. Welcome Panel هذا الأختيار خاصة بالألوان الموجودة داخل مربع الترحيب بالعضو او الزائر.. انظر الصورة التالية
    
11. Tables (Ignored by 'Body') هذا الخيار خاص بأحجام والوان خطوط. وصف المنتديات. انظر الصورة التالية.
    
    وليس هذا فقط.. لكنه ايضا يحدد الوان وانواع خطوط المشاركات.. اذا لم تكن قمت انت بإعدادها اعداد خاص. وايضا تتأثر بها بقية الخطوط التى ليس لها اعدادات. مثل (اعضاء يتضفحون هذا المنتدى)
12. Table Border هذا الأختيار خاص بألوان البوردر.. وارجو عدم تغيير اى شئ به سوى لون الخلفية (background) اذا احتاجت لذلك اما اذا حاولت مثلا تقليل الـ width به سوف ترى مالا تحب ان تراه (شكل المنتدى هايتشقلب)
13. Table Headers هذا الجزء خاص بعناوين المواضيع.. وايضا رؤس القوالب.. انظر الصورة التالية لتفهم ماهى رؤس القوالب.
    
14. Table Sub Headers (Category Backgrounds) هذا الجزء خاص بالتصنيفات.. انظر الصورة التالية لتوضيح القصد
    
    
15. Alternating Table Row 1 و Alternating Table Row 2 لتستوعب هذه الأختيارين انظر الى التالى
    فالنفرض ان منتداك, به 1- تصنيف و 5- منتديات
    منتدى 1 = Alternating Table Row 1
    منتدى 2 = Alternating Table Row 2
    منتدى 3 = Alternating Table Row 1
    منتدى 4 = Alternating Table Row 2
    منتدى 5 = Alternating Table Row 1
    اذن ماذا تستنتج من الترتيب السابق؟ اظنها اصبحت واضحة.
    اذن الخيار Alternating Table Row 1 سوف يتأثر به كل المنتديات التى ترتيب عددها فردى والأختيار Alternating Table Row 1 سوف يتأثر به المنتديات التى عددها زوجى انظر الصورة التالية
    
    
16. Shaded Table Row لم استكشفه بعد!.
17. Table Row Separator هذا الأختيار خاص بخصائص الفواصل بين المشاركات
    انظر الصورة التالية لتتضح الفكرة منه اكثر
    
18. Table Footers هذا الجزء خاص بنهاية المشاركات,, انظر الصورة التالية
    
    
    
    

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

حتى اذا تتطلب الأمر. سوف ابدأ فى طرح دروس للـ CSS والـ XHTML للتعلمو كل شئ يمكنكم ان تصنعو استايل قمة فى الأحتراف.. لكن دعونا ننتظر الأن لنرى نتائج هذا الشرح وتفاعل الأعضاء معه..

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

[Trouble Maker]

مشكووووووور جدا والله اخي بيبو شرح مفيد جدا

بس كنت عايز اسئل سؤال بالنسبة للصور اللي هنصصمها ازاي هنعرف اذا كانت كبيرة او صغيرة وكدا يعني وانا بدات اصمم واحد بالفعل

[Pepo]

صور ايه اللى عايز تعرف اذا كانت صغيرة ولا كبيرة؟

[Trouble Maker]

مهو انا مثلا هصمم صورة لله للهيدر وللفوتر واختيار الالوان المتنساقة وكدا

[Pepo]

بالنسبة لأحجام الصورتين دول, يتوقف على شكل تصميمك!. يعنى مالهومش حجم معين, ده حسب اختيارك

[علاء السقا]

تسلم على الشرح

نرجو المتابعة

[Beautiful_Mind]

Thank you so much
Nice work

[S_CaReCRo_W]

ممتاز بارك الله فيك

لكن من اين نبدا ؟ يعني لو هنعمل استايل جديد ؟ هل نباد بتصميم الصور او بالتعديل علي ملف xml او ماذا ؟


ومشكوووووور جدا اخي بيبو

[Pepo]

السلام عليكم..
الشرح اعلاه هو يتناول ا-ب تغيير فى تصميم الأستايل
بعنى اقرا الشرح مرة ثانية وثالثة, وجرب قراءة دروس الـ Css فهذا هو ماسوف تحتاجه لتعديل الخطوط والخلفيات و و الخ
وبعد ذلك سوف نحاول بطريقة تمهيدية لشرح القوالب وكيفية التعديل عليها واضافة class خاص بها ليتم التحكم به عن طرق ادارة الثيمات

[alkutob]

أخي Pepo

إن ما يريده الكثيرون هو معرفة كيف نقوم بتحويل ستايل مثلا من ستايلات في بوليتن إلى ستايل mybb ... فكيف نبدأ وكيف ننتهي وماذا نرفع من ملفات الستايل المراد تحويله ... صدقني قرأت الموضوع مرارا ... لكن لم يسعفني الحظ في الإحاطة برد لسؤالي هذا.

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

غير مسموح بعرض الروابط الا بعد التسجيل و تفعيل العضوية
وهذا رابط تحميل الستايل
غير مسموح بعرض الروابط الا بعد التسجيل و تفعيل العضوية

فكيف نتعامل مع هذا الستايل أو مع الستايل الجديد لهذا المنتدى وهو ستايل blue Star

خلينا نتعلم ونخفف عنك بعض الجهد
تحياتي