~*¤ô§ô¤*~منتدى البوابة الذهبية~*¤ô§ô¤*~

~*¤ô§ô¤*~منتدى البوابة الذهبية نبحث عن التفوق~*¤ô§ô¤*~
 
الرئيسيةس .و .جالأعضاءالمجموعاتبحـثالتسجيلدخول

شاطر | 
 

 :: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور**

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
ماتركس
مشرف منتدى التصميم والجرافيكس
مشرف منتدى التصميم والجرافيكس
avatar

ذكر
عدد الرسائل : 289
العمر : 37
البلد : مصر
الوظيفة : طالب
عنوان منتداك : لايوجد
تاريخ التسجيل : 20/08/2007

بطاقة الشخصية
تنات:
100/100  (100/100)
تنات:
100/100  (100/100)

مُساهمةموضوع: :: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور**   الإثنين سبتمبر 24, 2007 5:16 am

:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور**


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

ملحوضة : اذا كان النت عندك بطيء فحمل الشرح كامل ومنسق بالصور من هذا الرابط لان الصور كثيرة وستواجه مشكلة في استعراض الموضوع
هذا الرابط:




بدايه افترض ان الجميع يعرف كيف يثبت ويتخدم السرفر المحلي وايضاَ كيف يثبت ويستخدم منتدي vb على سرفر محلي

وان كان هناك من لا يعرف فالشرح موجود في المنتدى

نبتدي اولاَ بتحديث القوالب كي تتوافق مع اصدار منتداك

من لوحة تحكم المشرف العام نختار
الأستايلات & القوالب

ومن القائمه نختار البحث عن تحديث للقوالب


سوف تلاحظ وجود القوالب التي تحتاج لتحديث تحت اسم الأستايل مع معلومات التحديث



ونلاحظ ان قالب FORUMDISPLAY يحتاج لتحديث حيث انه تم عمله للأصداره 3.5.0 ويحتاج لتحديث كي يعمل بتوافقيه مع 3.5.3
نضغط على تعديل القالب وراح يفتح لنا القالب بصفحه مستقله





نضغط على حفظ وينتهي تحديث القالب

ونحدث بقيه القوالب بنفس الطريقه

والأن نبتدي بتعديل الجرافيكس كي تتناسب وعرضها بالعربيه

كما تلاحظون الصور عند تغير اللغه بالمنتدي الاستايل يبتدي يعرض الصور من اليمين الي اليسار وهنا يتم عرض الأستايل بالمقلوب ويكون شكله غير منسق ولاينفع للعرض باللغه

العربيه لاحظ الصوره

الأستايل معروض باللغه الأنجليزيه


.


.

الأستايل معروض باللغه العربيه


.


للتعديل نستخدم برنامج الفوتوشوب او برنامج paint الموجود مع الويندوز

نذهب لمجلد الصور misc بمجلد الأستايل surge1


ونبتدي بتعديل الصور التاليه
cat_top_ls
cat_top_rs
footer_ls
footer_rs
ls_main_table_bottom
ls_main_table_btm
ls_main_table_top
rs_main_table_bottom
rs_main_table_btm
rs_main_table_top
surge_hdr_ls
surge_hdr_top

وهذي الصور اهي الي تحدد شكل الأستايل الرئيسي ونحتاج ان نغير اتجاهم من اليمين الي اليسار كي يتوافقون وعرض الأستايل باللغه العربيه

نفتح الصوره ببرنامج الفوتوشوب



1 - نختار Image من القائمه
2 - نختار Rotate Canvas لتغير اتجاه الصوره
3 - ومن ثم نختار Flip Canvase Horizontal لتغير اتجاه الصوره بشكل افقي من اليمين الي اليسار

وهذه النتيجه


الأن يتوافق عرض الصوره واللغه العربيه نكرر عمل تغير الأتجاه للصور الباقيه
وهذي النتيجه بعد تعديل كل الصور


.

توجد هناك بعض الملاحظات لازالت بالصفحه الرئيسيه




سنقوم بالعمل على تنسيق الصفحه الرئيسيه للأستايل وتعريب الأزره (وسوف تحصل لنا مشاكل مع الهيدر وسوف اشرح طريقه التعامل وحل هذي المشكله)


وهذه هي اسماء الأزره وتجدونها بمجلد misc بمجلد الأستايل:
surge_hdr_calendar
surge_hdr_cp
surge_hdr_faq
surge_hdr_home
surge_hdr_links
surge_hdr_members
surge_hdr_reg
surge_hdr_search

.

نفتح اي ازرار نختاره بالفوتوشوب ونختار زر اختيار المساحه rectangular marquee tool كما موضح بالصوره


.


نختار مساحه من الأزرار ونحاسب بأن نختار لون واحد من مساحه الأزرار وذلك كي يتناسق اللون

كما موضح بالصوره انا اخترت اللون الموجود بالوسط (1) وتلاحظون توجد عده اسهم بالرقم (2) تشير الي الوان غير متناسقه فلو كان اختيارنا للمنطقه يوجد به اي من هذي الألوان يمكن يغير تنسيق الألوان بالشكل النهائي لما ننتهي

.

1 نختار المنطقه ونحددها
2 نختار edit من القائمه
3 نختار copy او نستخدم Ctrl+c من الكيبورد



بعد نسخ المنطقه الي حددناها بالصوره من القائمه edit نستخدم paste او Ctrl+v من الكيبورد ونبتدي نغطي الكتابه الموجوده بالأزرار



[[color=#007700]td[color:223a=#007700:223a]>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ماتركس
مشرف منتدى التصميم والجرافيكس
مشرف منتدى التصميم والجرافيكس
avatar

ذكر
عدد الرسائل : 289
العمر : 37
البلد : مصر
الوظيفة : طالب
عنوان منتداك : لايوجد
تاريخ التسجيل : 20/08/2007

بطاقة الشخصية
تنات:
100/100  (100/100)
تنات:
100/100  (100/100)

مُساهمةموضوع: رد: :: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور**   الإثنين سبتمبر 24, 2007 5:17 am

size=16]ونعيد العمليه الي ان ننتهي من مسح الكلمه الموجوده بالأزرار مع مراعاه تنسيق الألوان بالمنطقه الي غطيناها بالسابق[/size]

وهذه هي الأزرار بعد الأنتهاء من تغطيه الكلمه الموجوده سابقاَ



ولكي نبتدي بالكتابه وتعريب الأزره يجب ان نختار اللون الألي للكتابه السابقه بواسطه اداه eyedropper tool

نختار eyedropper tool ونضغط على الكتابه الأصليه كي يتم اختيار اللون


بعد الأختيار تلاحظ ان اللون تغير في لوحة الأدوات الي نفس لون الكتابه الأصليه السابقه



والأن نختار الزر الي خلصنا من مسح الكتابه عنه سابفاَ وللبدء في الكتابه عليه نختار من القائمه image وثم mode ونختار RGB Color
كي نستطيع الكتابه على الزر


والأن نختار الزر الي خلصنا من مسح الكتابه عنه سابفاَ وللبدء في الكتابه عليه نختار من القائمه image وثم mode ونختار RGB Color
كي نستطيع الكتابه على الزرولنبدء بالكتابه على الزر

1 نختار اداه الكتابه T
2 نختار الخط والحجم والتأثيرات
3 نكتب على الزر الأسم بالعربي ونحفظ
4 ولتسريع عمليه تعريب الأزره بعد الكتابه وحفظ الأزرار نمسح ماكتبناه ونكتب اسم الأزرار الي بعده ونحفظ بأسم مع مراعاه الحفظ بصيغة gif
انتهينا من تعريب الأزره لكن هناك صادفنا مشكله واحده


كما تلاحظون بالصوره ان الأزرار الأصلي للرئيسيه والأسئله نوعاَ ما صغيره ولا تعطيك مساحه كافيه للكتابه بالعربيه
فقمت بأستبدالهم بأزره اكبر وهذ هي النتيجه

.

الأزار جيده لاكن مضغوطه بالمساحه المحدده لها بالأستايل
فماهو الحل
الحل هو تغير مساحه الخليه للأزرارين كي يتم عرضهم بالشكل الصحيح
نفتح قالب header وننسخ كل مافيه ونذهب الي برنامج frontpage ونضع الكود هناك

.

1 نختار خليه الرئيسيه او home
2 نغير المساحه من 61 الي 81

.

1 نختار خليه الأسئله او faq

2 نغير المساحه من 61 الي 81
ننسخ الكود من برنامج frontpage ونعيده الي قالب header ونحفظ الكود ونعاين



هذه هي النتيجه لكن للأسف ليست كما نريد فقد تم التغلب على مشكله الأزره لاكن توجد لدينا مشكله عدم تناسق الهيدر اين الحل
نعود مره اخري لبرنامج frontpage


نختار خليه الهيدر العلويه ونغير عرض الخليه الي ؟؟؟؟؟؟؟!!!!!!!
كيف لي ان اعرف الرقم الصحيح الي اغيره
احنا غيرنا عرض خليتين من 61 الي 81 اي 20 ضرب 2 = 40
نغير العرض من 531 الي 571


ونفس الشئ لخليه الخط الفاصل للهيدر
نغير عرض الخليه من 531 الي 571
وهذه هي النتيجه

.

انتهينا من تعريب الأزره بالصفحه الرئيسيه ونستخدم نفس الشرح لتعريب ازره المشاركات بالأستايل وهي موضوع جديد اقتباس مغلق الخ الخ
نبدء الأن بتصحيح بعض الملاحظات الي ذكرتها بالدرس السابق


في الصفحه الرئيسيه نحتاج ان نعدل كتابه ايونات المشاركات بالصفحه الرئيسيه مثل ماتلاحظون الكتابه باللغه الأنجليزيه ولا تتغير حتي وان استخدمنا اللغ العربيه بالمنتدي وذلك لأنه مصمم الأستايل وضع كتابه بدل الكود وملف
التعريب يعتمد على تعريب الكودات

نفتح قالب forumhome وننسخ الكود ونضعه ببرنامج frontpage

.

نلاحظ هنا الكود


كود PHP:
[color=#0000bb]<table border="0" align="center" cellpadding="10" cellspacing="0" style="border: 1px solid #12243E; background-color: #1E385C;"><tr> <td align="center" valign="middle" class="smallfont" ><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" align="middle" border="0" /> New posts &nbsp; &nbsp;<img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" align="middle" border="0" /> No new posts &nbsp;&nbsp;<img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" align="middle" border="0" /> A locked forum &nbsp;&nbsp;[color=#0000bb]td>[color=#0000bb]tr>[color=#0000bb]table>
[color:797b=#0000bb:797b]


كود PHP:
[color=#0000bb][center][size=4][font=Arial][/font][/size][/center]
[color:797b=#0000bb:797b]



هنا المصمم استخدم new posts بدل كود المشاركات الجديده


كود PHP:
[color=#0000bb]$vbphrase[contains_new_posts]" align="middle" border="0[color:797b=#dd0000:797b]" /> New posts





كود PHP:
[color=#0000bb][center][size=4][font=Arial][/font][/size][/center]
[color:797b=#0000bb:797b]


بدل كلمة new posts ونستخدم ترجمة ملف اللغه بالمنتدي

ونعمل بهذا الحل مع البقيه



.



[center]هنا انا استخدمت الحل الثاني
وهذه هي النتيجه


تنسيق عرض المنتديات بالصفحه الرئيسيه
كما تري فأن عرض المنتديات بالصفحه الرئيسيه غير منسق


ولتنسيق الصفحه افتح قالب forumhome_forumbit_level1_nopost
ابحث عن

[size=16]كود PHP:
[color=#0000bb]<tr align="center"><td class="thead">&nbsp;[color=#0000bb]td><td class="thead" width="100%" align="$stylevar">$vbphrase[forum][color=#0000bb]td><td class="thead" width="200">$vbphrase[last_post][color=#0000bb]td><td class="thead">$vbphrase[threads][color=#0000bb]td><td [color:797b=#007700:797b]class=[color:797b=#dd0000:797b]"thead"[color:797b=#007700:797b]>[color:797b=#0000bb:797b]$vbphrase[color:797b=#007700:797b][[color:797b=#0000bb:797b]posts[color:797b=#007700:797b]]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور**
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
~*¤ô§ô¤*~منتدى البوابة الذهبية~*¤ô§ô¤*~ :: ~*¤ô§ô¤*~قسم التصاميم والجرافيكس~*¤ô§ô¤*~ :: منتدى تطوير المواقع والمنتديات-
انتقل الى: