بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته، وأسعد الله أوقاتكم بكل خير، أما بعد..
في هذا الدرس، سأشرح لكم طريقة تركيب الستايل على نسخة منتدى من الجيل الرابع
ولكن سأعتمد في شرحي، على الصور، لجميع الخطوات، لتكون واضحة، وسهلة أيضاً..
...
هل تتذكرون ستايل الانيمي؟
في موضوع تصميم ستايل متمدد للجيل الثالث
لتحميل الستايل، اضغط على الرابط التالي:
الستايل.zip
...
بعد التحميل، قم بفك الضغط عن الملف، وستجد مجلد الصور:
anime_msmmy قم بنسخه الى المجلد الرئيسي، للنسخة الرابعة لديك.
حسب شرحنا لطريقة التثبيت:
موضوع : 19 - تثبيت نسخة منتدى 4.0.1 [الجيل الرابع]
يكون اسم مجلد منتداك الرئيسي هو 401 الا اذا كنت قد اسميته اسماً آخر..
فلا مانع من ذلك، فقط قم بنسخ مجلد الصور anime_msmmy الى مجلد منتداك.
...
يعلم الجميع، ان في النسخة الجديدة 4.0.1 هناك ايقونات جديدة، ومجلدات جديدة..
لذلك، داخل مجلد النسخة الرابعة 4.0.1 والذي اسميته أنا عند التثبيت:
401 سنجد مجلد الستايل الافتراضي، وهو images كل ما علينا هو نسخ الصور والايقونات الجديدة من المجلدات:
buttons + gradients + misc + statusicon
الى المجلدات نفسها، في مجلد الستايل anime_msmmy
والطريقة سهلة، واليكم الشرح بالفيديو:
نسخ الايقونات.rar
...
كود الهيدر [header]
كود الفوتر [footer]كود PHP:
<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> </td>
<td width="82">
<img border="0" src="anime_msmmy/anime_msmmy_03.gif" width="82" height="96"></td>
<td> </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"> </td>
<td>
...كود PHP:
</td>
<td width="18" background="anime_msmmy/anime_msmmy_06.gif"> </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> </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>
كل ما عليك، أن تضع كود الهيدر، في أول سطر من الهيدر
وكود الفوتر، في آخر سطر من الفوتر، والطريقة كالتالي:
ثم
ثم
...
النتيجة:
الآن نأتي الى تأطير:
ولكن قبل ذلك، اليكم مود التأطير العلوي:
ايضاً كود التأطير السفلي:كود PHP:
<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> </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"> </td>
<td> </table>
...كود PHP:
</td>
<td background="anime_msmmy/e6ar_04.gif" width="23"> </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> </td>
<td width="41">
<img border="0" src="anime_msmmy/e6ar_09.gif" width="41" height="49"></td>
</tr>
</table>
الان سننشئ "متغيرات الاستبدال" والطريقة كالتالي:
ثم من القائمة المسندلة، نختار "متغيرات الاستبدال" كما في الصورة التالية:
ثم نضغط على [إضافة متغير استبدال جديد]
في خانة بحث عن النص نضع:
كود:<!--up-->
ثم نضع كود التأطير العلوي في خانة استبدال بنص:
ونضغط حفظ
ثم نكرر العملية مرة اخرى ولكن لنضع كود التأطير السفلي:
نضغط على [إضافة متغير استبدال جديد]
في خانة بحث عن النص نضع:
كود:<!--d-->
ثم نضع كود التأطير السفلي في خانة استبدال بنص:
...
الآن نكون أنشأنا متغيرات الاستبدال، وكما شرحنا سابقاً.. فائدة "متغيرات الاستبدال"
سهولة التعديل، واختصار الكود، اذا اردنا استخدامه في أكثر من منطقة.
...
نعود الآن الى قالب الهيدر header ونبحث عن السطر:
كود PHP:
<div class="above_body"> <!-- closing tag is in template navbar -->
نضع أعلاه وسم التأطير العلوي، وهو:
كود:<!--up-->
كما في الصورة التالية:
ثم نحفظ التعديلات
..
نعود مرة اخرى الى:
ثم من القائمة المسندلة، نختار (تعديل القوالب) كما في الصورة التالية:
...
ثم نقوم بتوسيع جميع القوالب:
الآن قم بتحويل اللغة في لوحة المفاتيح الى الانجليزية، واضغط على حرف N
لكي تصل بسرعة الى أول قالب يبدأ بحرف N وهو هدفنا النافبار navbar
الآن في قالب النافبار، ابحث عن السطر:
وضع أعلاه كود التأطير السفلي:كود PHP:
<!-- closing div for above_body -->
كود:<!--d-->
كما في الصورة التالية:
واليكم النتيجة التي حصلنا عليها:
...
الآن نريد تأطير الاحصائيات:
نذهب الى قالب الفروم هوم FORUMHOME ونبحث عن السطر:
كود PHP:
<div id="wgo" class="collapse wgo_block">
اسفله نضع وسم الاستبدال، للتأطير العلوي:
كود:<!--up-->
كما في الصورة التالية:
وفي نفس القالب، نبحث عن:
كود PHP:
</div>
<!-- end whats going on box -->
ضع اعلاها وسم التأطير السفلي:
كود:<!--d-->
كما في الصورة التالية:
ثم نضغط على زر حفظ لتكون النتيجة:
...
بقي علينا الآن، تأطير الأقسام:
نذهب الى قالب:
forumhome_forumbit_level1_nopost
نضع في بداية القالب وسم الاستبدال، للتأطير العلوي:
كود:<!--up-->
وفي نهاية القالب، وسم الاستبدال، للتأطير السفلي:
كود:<!--d-->
ثم نحفظ التعديل
النتيجة:
...
نأتي الآن الى تفعيل القائمة الجانبية
والطريقة كالتالي:
1- لوحة تحكم المنتدى.
2- الاعدادات.
3- الخيارات.
4- خيارات شريط المنتدى الجانبي والقطعة
...
الآن نعود الى لوحة تحكم المنتدى..
1- المنتديات والمراقبين.
2- إدارة القطع (الشريط الجانبي)
ثم
ثم
ثم
الآن كرر العملية اذا اردت ذلك.. لتكون النتيجة على سبيل المثال:
وستظهر النتيجة النهائية، كما في الصورة السابقة:
...
الان نعود من الصفحة الرئيسية، للوحة تحكم المنتدى، الى "التحكم بالستايلات"
ثم
ثم نختار المتغير
titleimage
الآن نصمم شعار بسيط، مثال:
ثم نضعه في مجلد ستايلنا، أينما نشاء، وأنا أخترت على سبيل المثال:
كود:
anime_msmmy/misc/msmmy_logo.gif
لاحظ أنه بامكانك تغيير مسار، ونوع الصورة:
النتيجة:
الآن نقوم باعطاء لون للخلفية، وذلك من خلال المتغير:
header_background
اما أن نضع نقطة التمدد، اذا كنا نستخدم خلفية متدرجة، او خلفية نقش، أو لون فقط، كما في الصورة التالية:
النتيجة:
الآن دور حدود الهيدر، ونستطيع التغيير والتعديل عليها من خالا المتغير:
header_border
لاحظ اللون الأزرق فقط
...
أما المتغير:
header_color
خاص بلون النص في الهيدر:
لاحظ العبارة: أهلا وسهلا بكـ
...
المتغير
header_font
يختص في نوع، وشكل، وحجم الخط في الهيدر، والخطوط البديلة، إن لم يكن الخط المحدد، متوفراً على جهاز الزائر:
...
المتغير
toplinks_input_login_backgroundColor
لون خلفية زر تسجيل الدخول كما في الصورة التالية:
..
المتغير
toplinks_form_input
خاص في لون النص، في خانة تسجيل الدخول، لاحظ اسم العضو:
...
المتغير
header_padding
التباعد أو المسافة أعلى و أسفل و يمين و يسار التولبار "شريط الازرار" في الهيدر:
النتيجة:
يفضل جعل القيمة 0px لكي لا يكون هناك اي تباعد بين التولبار، والتأطير.
...
ننتقل الآن الى
المتغير
navbar_background
خلفية النفبار
...
المتغير
navbar_background_notify
navbar_border
حدود النفبار
...
المتغير
navbar_font
...
المتغير
navbar_linkhover_color
لون تارجح الروابط عند مرور مؤشر الماوس
...
المتغير
navbar_popup_link_background
لون خلفية الروابط في القوائم المسندلة في اعلى الهيدر
...
المتغير
navbar_selected_popup_body_a_Color
لون النص في القوائم المسندلة
...
المتغير
navbar_tab_background
خلفية النافبار الوسطى وشريط وحدود القوائم المنسندلة
...
المتغير
navbar_tab_bevel
حفر الأزرار في النافبار ولون الخط
...
المتغير
navbar_tab_border
حجم الحفر ولون الحفر في النافبار
...
المتغير
navbar_tab_color
لون الخط في التولبار
...
المتغير
navbar_tab_font
...
المتغير
navbar_tab_selected_top_width
نسبة ارتفاع الزر النشط للاعلى في التولبار
...
المتغير
navbar_tab_size
عرض وارتفاع ازرار التولبار
...
navbarsearch_borderWidth
عرض الحد لمحرك البحث في التولبار
...
المتغير
navbarsearch_input_borderColor
لون الحد لمحرك البحث
...
المتغير
navbarsearch_input_borderColor
لون الحد السابق، وهو محرك البحث في التولبار...
...
المتغير
navbarsearch_padding
محاذات اطراف محرك البحث
...
المتغير
searchbox_size
حجم صندوق محرك البحث
متغيرات القوائم المسندلة
PopupMenus
...
المتغير
imodhilite_backgroundColor
خلفية القوائم المسندلة عند مرور الماوس
...
المتغير
popupmenu_background
خلفيه القوائم المسندلة في المنتدى
...
المتغير
popupmenu_border
حدود القوائم المسندلة
...
المتغير
popupmenu_border_radius
نسبة انحناءحدود مربع القوائم المسندلة
...
المتغير
popupmenu_font
نوع الخط في القوائم المسندلة
...
المتغير
popupmenu_padding
نسبة محاذاة الخط في القوائم المسندلة
...
Private_Messages
المتغير
pm_foldercontrols_total_border
اطار في نسبة الرسائل في الرسائل الخاصه
...
Forms + Forums
متغير
formrow_background
خلفية صندوق التحرير المتطور
...
متغير
formrow_border
...
متغير
input_borderColor
لون حدود محرك البحث في المدونة
...
المتغير
textedit_background
لون خلفية الكتابة
...
المتغير
forum_sidebar_background
خلفية القائمة الجانبية
...
المتغير
forum_sidebar_border
حدود القائمة الجانبية من حيث اللون والحجم والستايل...
...
متغير
forum_sidebar_content_background
خلفية محتوى القائمة الجانبية...
...
المتغير
forum_sidebar_content_border
حدود محتوى القائمة الجانبية
...
المتغير
forum_sidebar_content_separator_background
خلفية الخط الفاصل بين عناصر القائمة الجانبية
...
المتغير
forum_sidebar_content_separator_height
المسافة الفاصلة بين عناصر القائمة الجانبية...
...
متغير
forum_sidebar_contentlist_avatar_maxSize
مقاس الصور الرمزية في القائمة الجانبية
المتغير
forum_sidebar_header_color
لون خط العنوان والمحتوى للعنصر في القائمة الجانبية
...
المتغير
forum_sidebar_header_font
حجم ونوع خط العنوان للعنصر في القائمة الجانبية
...
المتغير
forum_sidebar_width
عرض القائمة الجانبية
...
المتغير
forumbits_aForum
لون الرابط والخط في رأس المنتدى
...
متغير
forumbits_border
حدود أقسام المنتدى السفلية
...
المتغير
forumbits_shadow_color
ظل اقسام المنتدى
"هذا الخيار لا يعمل على متصفح Internet Explorer"
المتغير
forumbits_text_color
الخط الصغير "وصف الأقسام" في المنتدى
المتغير
forumhead_background
خلفية عناوين الأقسام الرئيسية
...
المتغير
forumhead_border
لون الحدود للأقسام الرئيسية
...
المتغير
forumhead_color
لون الخط لعناوين أقسام المنتدى الفرعية
...
المتغير
forumhead_font
نوع وحجم خط العناوين في أقسام المنتدى الفرعية
......
المتغير
forumicon_size
مقاس أيقونات أقسام المنتدى
...
المتغير
foruminfo_background
لون خلفية جداول الاحصائيات ومعلومات الأقسام...
...
المتغير
foruminfo_border
لون حدود جداول الاحصائيات ومعلومات الأقسام...
...
المتغير
foruminfo_header_background
خلفية رأس جداول احصائيات ومعلومات الأقسام
المتغير
foruminfo_header_border
حدود جدول رأس معلومات القسم
المتغير
foruminfo_header_color
لون الخط في رأس معلومات القسم
المتغير
foruminfo_header_font
حجم ونوع خط لرأس معلومات القسم
...
المتغير
forummenu_background
خلفية قائمة خيارات الموضوع والمنتدى
...
المتغير
forummenu_border
حدود قائمة خيارات الموضوع والمنتدى
...
المتغير
forummenu_color
لون خط خيارات قائمة الموضوع والمنتدى
...
المتغير
forummenu_font
حجم ونوع خط قائمة خيارات الموضوع والمنتدى
...
المتغير
forumrow_background
لون خلفية أقسام المنتدى الفرعية
...
المتغير
forumrow_firstentry_background
لون خلفية أقسام المنتدى الرئيسية في الصفحة الرئيسية...
...
المتغير
wgo_background
خلفية احصائيات المنتدى في الصفحة الرئيسية
المتغير
wgo_border
اطار احصائيات المنتدى
...
المتغير
wgoheader_background
لون خلفية رأس احصائيات المنتدى
...
المتغير
wgoheader_border
لون حدود رأس احصائيات المنتدى...
...
المتغير
wgoheader_color
لون خط رأس احصائيات المنتدى
...
المتغير
wgoheader_font
حجم ونوع خط راس احصائيات المنتدى
نهاية الجزء الأول
المصدر: منتديات الطيب للجميع - من قسم: مدرسة التصميم],vm jwldl hsjhdg hg[dg hgvhfu - hg[.x hgH,g jwldl hsjhdg 4
المفضلات