المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة تصميم استايل الجيل الرابع - الجزء الأول



حلال المشاكل
29 Oct 2012, 02:30 AM
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته، وأسعد الله أوقاتكم بكل خير، أما بعد..

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

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

...

هل تتذكرون ستايل الانيمي؟


2432
في موضوع تصميم ستايل متمدد للجيل الثالث

لتحميل الستايل، اضغط على الرابط التالي:

الستايل.zip‏ (http://www.msmmy.com/vb/uploaded/1_01316356147.zip)

...

بعد التحميل، قم بفك الضغط عن الملف، وستجد مجلد الصور:

anime_msmmy قم بنسخه الى المجلد الرئيسي، للنسخة الرابعة لديك.

حسب شرحنا لطريقة التثبيت:

موضوع : 19 - تثبيت نسخة منتدى 4.0.1 [الجيل الرابع] (http://www.msmmy.com/vb/showthread.php?t=38447)

يكون اسم مجلد منتداك الرئيسي هو 401 الا اذا كنت قد اسميته اسماً آخر..

فلا مانع من ذلك، فقط قم بنسخ مجلد الصور anime_msmmy الى مجلد منتداك.

...

يعلم الجميع، ان في النسخة الجديدة 4.0.1 هناك ايقونات جديدة، ومجلدات جديدة..

لذلك، داخل مجلد النسخة الرابعة 4.0.1 والذي اسميته أنا عند التثبيت:

401 سنجد مجلد الستايل الافتراضي، وهو images كل ما علينا هو نسخ الصور والايقونات الجديدة من المجلدات:

buttons + gradients + misc + statusicon

الى المجلدات نفسها، في مجلد الستايل anime_msmmy

والطريقة سهلة، واليكم الشرح بالفيديو:

نسخ الايقونات.rar (http://www.msmmy.com/vb/uploaded/1_01294530721.rar)

...

كود الهيدر [header]


<table border="0" width="100%" id="table1" dir="rtl" cellspacing="0" cellpadding="0" background="anime_msmmy/anime_msmmy_02.gif">
<tr>
<td width="129">
<img border="0" src="anime_msmmy/anime_msmmy_05.gif" width="129" height="96"></td>
<td>
<table border="0" width="100%" id="table2" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td width="82">
<img border="0" src="anime_msmmy/anime_msmmy_03.gif" width="82" height="96"></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="110">
<img border="0" src="anime_msmmy/anime_msmmy_01.gif" width="110" height="96"></td>
</tr>
</table>
<table border="0" width="100%" id="table3" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td width="18" background="anime_msmmy/anime_msmmy_08.gif">&nbsp;</td>
<td>

كود الفوتر [footer]


</td>
<td width="18" background="anime_msmmy/anime_msmmy_06.gif">&nbsp;</td>
</tr>
</table>
<table border="0" width="100%" id="table4" dir="rtl" cellspacing="0" cellpadding="0" background="anime_msmmy/anime_msmmy_10.gif">
<tr>
<td width="179">
<img border="0" src="anime_msmmy/anime_msmmy_11.gif" width="179" height="33"></td>
<td>&nbsp;</td>
<td width="153"><map name="FPMap0">
<area target="_blank" href="http://www.msmmy.com/" shape="rect" coords="14, 6, 143, 25">
</map>
<img border="0" src="anime_msmmy/anime_msmmy_09.gif" width="153" height="33" usemap="#FPMap0"></td>
</tr>
</table>
...

كل ما عليك، أن تضع كود الهيدر، في أول سطر من الهيدر

وكود الفوتر، في آخر سطر من الفوتر، والطريقة كالتالي:


2433

ثم

2434

ثم


2435

...

النتيجة:


2436


الآن نأتي الى تأطير:


2437


ولكن قبل ذلك، اليكم مود التأطير العلوي:


<table border="0" width="100%" id="table1" dir="rtl" cellspacing="0" cellpadding="0" background="anime_msmmy/e6ar_02.gif">
<tr>
<td width="80">
<img border="0" src="anime_msmmy/Untitled-1_03.gif" width="80" height="72"></td>
<td>&nbsp;</td>
<td width="79">
<img border="0" src="anime_msmmy/e6ar_01.gif" width="79" height="72"></td>
</tr>
</table>
<table border="0" width="100%" id="table2" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td background="anime_msmmy/e6ar_07.gif" width="22">&nbsp;</td>
<td> </table>


ايضاً كود التأطير السفلي:


</td>
<td background="anime_msmmy/e6ar_04.gif" width="23">&nbsp;</td>
</tr>
</table>
<table border="0" width="100%" id="table3" dir="rtl" cellspacing="0" cellpadding="0" background="anime_msmmy/e6ar_10.gif">
<tr>
<td width="47">
<img border="0" src="anime_msmmy/e6ar_11.gif" width="47" height="49"></td>
<td>&nbsp;</td>
<td width="41">
<img border="0" src="anime_msmmy/e6ar_09.gif" width="41" height="49"></td>
</tr>
</table>

...

الان سننشئ "متغيرات الاستبدال" والطريقة كالتالي:


2433


ثم من القائمة المسندلة، نختار "متغيرات الاستبدال" كما في الصورة التالية:


2438


ثم نضغط على [إضافة متغير استبدال جديد‎]‏


2439


في خانة بحث عن النص نضع:



<!--up-->

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


2440


ونضغط حفظ

ثم نكرر العملية مرة اخرى ولكن لنضع كود التأطير السفلي:

نضغط على [إضافة متغير استبدال جديد‎]‏

في خانة بحث عن النص نضع:



<!--d-->

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


2441


...

الآن نكون أنشأنا متغيرات الاستبدال، وكما شرحنا سابقاً.. فائدة "متغيرات الاستبدال"

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

...

نعود الآن الى قالب الهيدر header ونبحث عن السطر:


<div class="above_body"> <!-- closing tag is in template navbar -->


نضع أعلاه وسم التأطير العلوي، وهو:



<!--up-->

كما في الصورة التالية:


2442


ثم نحفظ التعديلات

..

نعود مرة اخرى الى:


2433


ثم من القائمة المسندلة، نختار (تعديل القوالب) كما في الصورة التالية:


2443


...

ثم نقوم بتوسيع جميع القوالب:


2444


الآن قم بتحويل اللغة في لوحة المفاتيح الى الانجليزية، واضغط على حرف N

لكي تصل بسرعة الى أول قالب يبدأ بحرف N وهو هدفنا النافبار navbar


2445


الآن في قالب النافبار، ابحث عن السطر:


<!-- closing div for above_body -->

وضع أعلاه كود التأطير السفلي:



<!--d-->


كما في الصورة التالية:


2446


واليكم النتيجة التي حصلنا عليها:


2447


...

الآن نريد تأطير الاحصائيات:


2448


نذهب الى قالب الفروم هوم FORUMHOME ونبحث عن السطر:


<div id="wgo" class="collapse wgo_block">




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



<!--up-->



كما في الصورة التالية:


2449


وفي نفس القالب، نبحث عن:


</div>
<!-- end whats going on box -->




ضع اعلاها وسم التأطير السفلي:



<!--d-->

كما في الصورة التالية:


2450


ثم نضغط على زر حفظ لتكون النتيجة:



2451

...

بقي علينا الآن، تأطير الأقسام:


2452

نذهب الى قالب:

forumhome_forumbit_level1_nopost

نضع في بداية القالب وسم الاستبدال، للتأطير العلوي:


<!--up-->


وفي نهاية القالب، وسم الاستبدال، للتأطير السفلي:


<!--d-->

ثم نحفظ التعديل

النتيجة:


2453


...

نأتي الآن الى تفعيل القائمة الجانبية


2454


والطريقة كالتالي:


1- لوحة تحكم المنتدى.
2- الاعدادات.
3- الخيارات.



2455



4- خيارات شريط المنتدى الجانبي والقطعة


2456


...

الآن نعود الى لوحة تحكم المنتدى..


1- المنتديات والمراقبين.
2- إدارة القطع (الشريط الجانبي)


2457


ثم


2458


ثم


2459


ثم


2460


الآن كرر العملية اذا اردت ذلك.. لتكون النتيجة على سبيل المثال:


2461


وستظهر النتيجة النهائية، كما في الصورة السابقة:


2454


...

الان نعود من الصفحة الرئيسية، للوحة تحكم المنتدى، الى "التحكم بالستايلات"


2433ثم


2462


ثم نختار المتغير

titleimage


2463


الآن نصمم شعار بسيط، مثال:


2464


ثم نضعه في مجلد ستايلنا، أينما نشاء، وأنا أخترت على سبيل المثال:

كود:

anime_msmmy/misc/msmmy_logo.gif
لاحظ أنه بامكانك تغيير مسار، ونوع الصورة:


2465


النتيجة:


2466


الآن نقوم باعطاء لون للخلفية، وذلك من خلال المتغير:

header_background


2467


اما أن نضع نقطة التمدد، اذا كنا نستخدم خلفية متدرجة، او خلفية نقش، أو لون فقط، كما في الصورة التالية:


2468


النتيجة:


2469


الآن دور حدود الهيدر، ونستطيع التغيير والتعديل عليها من خالا المتغير:

header_border


2470


لاحظ اللون الأزرق فقط

...

أما المتغير:

header_color

خاص بلون النص في الهيدر:


2471


لاحظ العبارة: أهلا وسهلا بكـ

...

المتغير

header_font

يختص في نوع، وشكل، وحجم الخط في الهيدر، والخطوط البديلة، إن لم يكن الخط المحدد، متوفراً على جهاز الزائر:


2472


...

المتغير

toplinks_input_login_backgroundColor

لون خلفية زر تسجيل الدخول كما في الصورة التالية:


2473

..

المتغير

toplinks_form_input

خاص في لون النص، في خانة تسجيل الدخول، لاحظ اسم العضو:



2474


...

المتغير

header_padding

التباعد أو المسافة أعلى و أسفل و يمين و يسار التولبار "شريط الازرار" في الهيدر:


2475


النتيجة:


2476


يفضل جعل القيمة 0px لكي لا يكون هناك اي تباعد بين التولبار، والتأطير.

...

ننتقل الآن الى


المتغير



navbar_background


خلفية النفبار

2477



...


المتغير


navbar_background_notify


خلفية التنبيهات عند وجود رسالة خاصة:

2478



...


المتغير



navbar_border



حدود النفبار

...


المتغير


navbar_font


نوع + حجم + شكل الخط في النفبار

2479



...


المتغير


navbar_link_color


لون الروابط في النفبار

2480





...


المتغير


navbar_linkhover_color


لون تارجح الروابط عند مرور مؤشر الماوس

2481



...


المتغير


navbar_popup_link_background


لون خلفية الروابط في القوائم المسندلة في اعلى الهيدر


2482



...


المتغير


navbar_selected_popup_body_a_Color


لون النص في القوائم المسندلة

2483



...


المتغير


navbar_tab_background


خلفية النافبار الوسطى وشريط وحدود القوائم المنسندلة


2484 ...


المتغير


navbar_tab_bevel


حفر الأزرار في النافبار ولون الخط



2485


...



المتغير


navbar_tab_border


حجم الحفر ولون الحفر في النافبار

2486



...


المتغير


navbar_tab_color



لون الخط في التولبار

2487



...


المتغير


navbar_tab_font


نوع الخط وحجمه في التولبار

2488



...


المتغير


navbar_tab_linkhover_color


لون تأرجح الروابط في التولبار

2489



...

المتغير


navbar_tab_selected_background


لون خلفية الروابط المتارجحة في التولبار

2490





...


المتغير


navbar_tab_selected_top_width


نسبة ارتفاع الزر النشط للاعلى في التولبار

2491



...


المتغير


navbar_tab_size


عرض وارتفاع ازرار التولبار

2492



...


navbarsearch_borderWidth


عرض الحد لمحرك البحث في التولبار


2493


...

المتغير

navbarsearch_input_borderColor

لون الحد لمحرك البحث

2494


...


المتغير


navbarsearch_input_borderColor


لون الحد السابق، وهو محرك البحث في التولبار

...


المتغير


navbarsearch_padding


محاذات اطراف محرك البحث

...


المتغير


searchbox_size


حجم صندوق محرك البحث


...


متغيرات القوائم المسندلة

PopupMenus

...


المتغير


imodhilite_backgroundColor


خلفية القوائم المسندلة عند مرور الماوس

2495



2496



2497


...


المتغير


popupmenu_background


خلفيه القوائم المسندلة في المنتدى

2498



...


المتغير


popupmenu_border


حدود القوائم المسندلة

2499



...


المتغير


popupmenu_border_radius


نسبة انحناءحدود مربع القوائم المسندلة

...


المتغير


popupmenu_font


نوع الخط في القوائم المسندلة


...


المتغير

popupmenu_padding

نسبة محاذاة الخط في القوائم المسندلة

...






Private_Messages


المتغير



pm_foldercontrols_total_border


اطار في نسبة الرسائل في الرسائل الخاصه

2500



...


Forms + Forums




متغير


formrow_background


خلفية صندوق التحرير المتطور

2501



...


متغير


formrow_border


حدود معاينة المشاركة أو الموضوع

2502




...


متغير


input_borderColor


لون حدود محرك البحث في المدونة

2503



...


المتغير


textedit_background

لون خلفية الكتابة


2504


...


المتغير


forum_sidebar_background


خلفية القائمة الجانبية

2505



...


المتغير


forum_sidebar_border


حدود القائمة الجانبية من حيث اللون والحجم والستايل

2506



...


متغير


forum_sidebar_content_background


خلفية محتوى القائمة الجانبية

2507



...


المتغير


forum_sidebar_content_border

حدود محتوى القائمة الجانبية


2508

...


المتغير


forum_sidebar_content_separator_background


خلفية الخط الفاصل بين عناصر القائمة الجانبية

2509



...


المتغير


forum_sidebar_content_separator_height


المسافة الفاصلة بين عناصر القائمة الجانبية

...


متغير


forum_sidebar_contentlist_avatar_maxSize


مقاس الصور الرمزية في القائمة الجانبية


...


المتغير


forum_sidebar_header_color


لون خط العنوان والمحتوى للعنصر في القائمة الجانبية


2510



...


المتغير


forum_sidebar_header_font


حجم ونوع خط العنوان للعنصر في القائمة الجانبية

...


المتغير


forum_sidebar_width


عرض القائمة الجانبية

...


المتغير


forumbits_aForum


لون الرابط والخط في رأس المنتدى


2511


...


متغير


forumbits_border


حدود أقسام المنتدى السفلية


...


المتغير


forumbits_shadow_color


ظل اقسام المنتدى

"هذا الخيار لا يعمل على متصفح Internet Explorer"



...


المتغير


forumbits_text_color


الخط الصغير "وصف الأقسام" في المنتدى

...


المتغير


forumhead_background


خلفية عناوين الأقسام الرئيسية


2512



...


المتغير



forumhead_border

لون الحدود للأقسام الرئيسية

...

المتغير


forumhead_color


لون الخط لعناوين أقسام المنتدى الفرعية


2518


...


المتغير


forumhead_font


نوع وحجم خط العناوين في أقسام المنتدى الفرعية


...


المتغير


forumicon_size


مقاس أيقونات أقسام المنتدى


2513


...


المتغير


foruminfo_background


لون خلفية جداول الاحصائيات ومعلومات الأقسام

2514



...


المتغير


foruminfo_border


لون حدود جداول الاحصائيات ومعلومات الأقسام

...


المتغير


foruminfo_header_background


خلفية رأس جداول احصائيات ومعلومات الأقسام


...


المتغير


foruminfo_header_border


حدود جدول رأس معلومات القسم


...


المتغير


foruminfo_header_color


لون الخط في رأس معلومات القسم


...


المتغير


foruminfo_header_font

حجم ونوع خط لرأس معلومات القسم

...


المتغير


forummenu_background

خلفية قائمة خيارات الموضوع والمنتدى

2515



...


المتغير


forummenu_border

حدود قائمة خيارات الموضوع والمنتدى

...


المتغير


forummenu_color


لون خط خيارات قائمة الموضوع والمنتدى

...


المتغير


forummenu_font


حجم ونوع خط قائمة خيارات الموضوع والمنتدى

...


المتغير


forumrow_background


لون خلفية أقسام المنتدى الفرعية

2516



...


المتغير


forumrow_firstentry_background


لون خلفية أقسام المنتدى الرئيسية في الصفحة الرئيسية

2517



...


المتغير


wgo_background


خلفية احصائيات المنتدى في الصفحة الرئيسية



...


المتغير


wgo_border


اطار احصائيات المنتدى

...


المتغير


wgoheader_background


لون خلفية رأس احصائيات المنتدى

...


المتغير


wgoheader_border


لون حدود رأس احصائيات المنتدى

...


المتغير


wgoheader_color

لون خط رأس احصائيات المنتدى

...


المتغير


wgoheader_font


حجم ونوع خط راس احصائيات المنتدى


...

نهاية الجزء الأول

بنوتة اخر روقان
30 Oct 2012, 01:44 PM
سلمت اناملك
على الموضوع المتألق
يعطيك الف عافيه وبارك الله فيك

بنت ابوى
12 Nov 2012, 06:14 PM
الله يعطيك العافية يا حلال المشاكل