~*¤ô§ô¤*~منتدى البوابة الذهبية~*¤ô§ô¤*~
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

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

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

 

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

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


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

بطاقة الشخصية
تنات:
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Left_bar_bleue100/100:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Empty_bar_bleue  (100/100)
تنات:
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Left_bar_bleue100/100:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Empty_bar_bleue  (100/100)

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

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


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

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




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

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

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

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

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

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

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


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

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



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


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

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

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

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

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

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


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


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


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


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

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

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

ونبتدي بتعديل الصور التاليه
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

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

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

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


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

وهذه النتيجه

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

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


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

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

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


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

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


وهذه هي اسماء الأزره وتجدونها بمجلد 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

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

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


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


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

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

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

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

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


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

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


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


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

بطاقة الشخصية
تنات:
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Left_bar_bleue100/100:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Empty_bar_bleue  (100/100)
تنات:
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Left_bar_bleue100/100:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** Empty_bar_bleue  (100/100)

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

size=16]ونعيد العمليه الي ان ننتهي من مسح الكلمه الموجوده بالأزرار مع مراعاه تنسيق الألوان بالمنطقه الي غطيناها بالسابق[/size]
:: طريقة تعريب الاستايلات الغربية :: **شرح مفصل بالصور** 18

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


كود 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 ونستخدم ترجمة ملف اللغه بالمنتدي

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



.

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

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

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

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

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

ولتنسيق الصفحه افتح قالب 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
 مواضيع مماثلة
-

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