دورة تصميم استايل الجيل الرابع - الجزء الأول

[حلال المشاكل]

تصميم استايل 4

دورة تصميم استايل الجيل الرابع - الجزء الأول

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

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

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

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

...

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



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

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

الستايل.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]

<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> 

...

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

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




ثم



ثم




...

النتيجة:





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





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

<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> 

...

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





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





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





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

<!--up-->

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





ونضغط حفظ

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

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

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

<!--d-->

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





...

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

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

...

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

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

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

<!--up-->

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





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

..

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





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





...

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





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

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





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

<!-- closing div for above_body --> 

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

<!--d-->

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





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





...

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





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

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

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

<!--up-->

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





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

</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_link_color

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

...

المتغير

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_linkhover_color

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





...

المتغير

navbar_tab_selected_background

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

...

المتغير

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

[بنوتة اخر روقان]

سلمت اناملك
على الموضوع المتألق
يعطيك الف عافيه وبارك الله فيك

[بنت ابوى]

الله يعطيك العافية يا حلال المشاكل