نشر بتاريخ :- 02-01-2014 من طرف :: assem
بلدي :
مساهماتي : 1116
التسجيل : 07/11/2013
عــمري : 28
مساهماتي : 1116
التسجيل : 07/11/2013
عــمري : 28
₪ أداة الخنفساء (firebug) للفايرفوكس للمساعدة في التعريب :
لقد شرحت هذه الأداة في تدوينات سابقة أرجو متابعتها لكي نبدأ التطبيق معاً :
لكي نقوم بالتعريب بشكل جيد هناك 5 مراحل في هذه الدورة لتعلم التعريب ، قمت بتقسيمها حتى يسهل فهمها وتكون كل مرحله منفصله لكي تتجاوزها إذا كانت لديك خلفية مسبقة عنها وهي كالتالي :
♥ المرحلة الأولى ـ تغيير اتجاه النص إلى الجهة اليمنى .
♥ المرحلة الثانية ـ تعريب الكلمات .
♥ المرحلة الثالثة تعديل الهوامش .
♥ المرحلة الرابعة : تغيير نوع الخط .
♥ المرحلة الخامسة والأخيرة : التعليقات ومشكلة الهوامش .
♥ المرحلة الثانية ـ تعريب الكلمات .
♥ المرحلة الثالثة تعديل الهوامش .
♥ المرحلة الرابعة : تغيير نوع الخط .
♥ المرحلة الخامسة والأخيرة : التعليقات ومشكلة الهوامش .
سنشرح كل خطوه بالتفصيل بإذن الله تعالى ..
-المرحلة الأولى ـ تغيير اتجاه النص إلى الجهة اليمنى :
هناك 3 خطوات فقط لتغير اتجاه النص في هذه المرحلة :
1 . تغيير اتجاه النص في العنوان الرئيسي لهيدر المدونة و الجزء الخاص بوصف المدونة ( #header-wrapper ) .
2 . تغيير اتجاه النصوص بشكل كامل عن طريق الغلاف الخارجي للمدونة (#Outer wrapper) .
3 . تغيير اتجاه القائمة العلوية للمدونة .
سنشرح كل خطوة بالتفصيل قدر الإمكان :
•أولاً : تغيير اتجاه النص في العنوان الرئيسي لهيدر المدونة :
سنستخدم الأمر ( text-align: right ) لتغيير اتجاه النص ، ما عليك سوى التوجه إلى :
" لوحة التحكم الرئيسية " ثم " تصميم " ثم " تحرير HTML ".
ثم نضع علامة عند مربع توسيع قوالب عناصر واجهة المستخدم ..
وبعد ذلك نضغط من لوحة المفاتيح على (ctrl + f ) لكي نستخدم محرك بحث خاص بالمتصفح ليساعدنا على البحث عن الأكواد ..
الآن ألصق في محرك البحث هذا الأمر :
#header {
ثم اضغط من لوحة المفاتيح على Enter ليتم البحث ، طبعاً عندما تقوم بلصق الأمر سيكون معكوس ، لذا لا تهتم لكون الرموز أصبحت معكوسة فهذا لن يعيق عملك ، ولا تنسى اختيار زر " أبرز الكل " في الشريط لكي تظهر لكل الأوامر مظلله بلون بنفسجي ، ستجد الكود التالي بعد الضغط على انتر :
اضغط على الصورة لتكبيرها
#header{color: $pagetitlecolor;text-align :right;}
• ثانياً : تغيير اتجاه النصوص بشكل كامل عن طريق الغلاف الخارجي للمدونة :
الغلاف الخارجي ( Outer wrapper # ) : هو الذي يضم كلاً من الهيدر (header) ومنطقة التدوينات (post) بما في ذلك التعليقات (comments) والقائمة الجانبية للمدونة (sidebar) والفوتر (footer) ، هذه صورة توضيحية :
يكفي أن نلصق كود خاصية محاذاة النص لجهة اليمين حتى تتحول النصوص في المدونة إلى اليمين ، والآن ابحث في قالبك عن :
Outer wrapper # لكي تقوم بلصق خاصية محاذاة النص لليمين كما هو موضح هنا باللون الأحمر :
Outer wrapper # لكي تقوم بلصق خاصية محاذاة النص لليمين كما هو موضح هنا باللون الأحمر :
#outer-wrapper{
font: $bodyfont;
margin:0 auto;
text-align: right;
width:960px;
margin:0 auto;
text-align: right;
width:960px;
}
• ثالثاً : تغيير اتجاه القائمة العلوية للمدونة :
القائمة العلوية هي التي تحمل صفحات المدونة مثل ( الرئيسية – من نحن – اتصل بي .. إلخ ) ، لهذه القائمة مسميات مختلفة في كود القالب لذا من الأفضل استخدام أداة firebugلتحديدها من أجل اجراء التغييرات عليها ، فكل مصمم وضع لها اسماً من اختياره ، وهذه بعض المسميات أو لنقل الأوامر أفضل :
القوائم تستخدم العنصر ul ولابد لها من فقرات بداخلها ، وهذه الفقرات يرمز لها بـ li ، لذا فإن كلمة ( من نحن – اتصل بنا .. إلخ ) هي الفقرات ، أكثر القوالب يتم تغيير اتجاهها لليمين من خلال الفقرات li ، وبعض القوالب تضطر أن تغير اتجاه القائمة ul لتكون في اليمين ، لذا يجب أن يقع اختيارك أولاً على الأوامر التي تحتوي على li أو اترك المهمة لأداة الخنفساء فهي ستقوم بذلك بدقة .
هذه المرة سنستخدم خاصية float لأننا كما ذكرنا القوائم نستخدم معها دائماً خاصية التعويم ، وليس خاصية محاذاة النص كما كنا نفعل بالسابق .
هذه المرة سنستخدم خاصية float لأننا كما ذكرنا القوائم نستخدم معها دائماً خاصية التعويم ، وليس خاصية محاذاة النص كما كنا نفعل بالسابق .
الآن ابحث عن هذا الأمر في القالب crosscol .PageList li, .footer .PageList li (طبعاً أخذت الأمر بمساعدة الخنفساء) ثم من float غير القيمة left واستبدلها بـ right :
.crosscol .PageList li, .footer .PageList li{
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin:0;
padding:0.75em;
float: right;
list-style: none outside none;
margin:0;
padding:0.75em;
}
النتيجة :
طبعاً قد تجد قوالب لا تحتوي على هذه الأوامر كما ذكرت وذلك لأن مصمم القالب اختار لها أسماء أخرى ، فالحل هو استخدام أداة firebug الخاص بمتصفح الفايرفوكس لإيجاد المربع الخاص بالهيدر والخاص بالغلاف الخارجي للقالب ، عندها لن تواجه مشاكل في اختلاف المسميات .
الآن استطيع أن أقول لك أنك انجزت 99% من خطوات التعريب وهي الأهم بقي
تعريب الكلمات وبعض الهوامش وهذا أمرها سهل جداً .
تعريب الكلمات وبعض الهوامش وهذا أمرها سهل جداً .
اعتذر من الجميع على التأخير في طرح الدرووس
اتمنى إلتماس العذر لي >.<
واي استفسار اتمنى طرحه وإذا كان هناك فقره غير واضحه لا تتردد في السؤال حتى أقوم بالتعديل عليه
اتمنى إلتماس العذر لي >.<
واي استفسار اتمنى طرحه وإذا كان هناك فقره غير واضحه لا تتردد في السؤال حتى أقوم بالتعديل عليه
في أمان الله ورعايته
الردود
رد: [الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)
الخميس 02 يناير 2014, 7:16 pmMṜ MĒMŌ
الخميس 02 يناير 2014, 7:17 pm
الخميس 02 يناير 2014, 7:21 pm
شكرا لك على الشرح الرائع
واصل ابداعك يا ورد
واصل ابداعك يا ورد
الخميس 02 يناير 2014, 7:38 pm
شكرا جزيلا لمرورك العطرانور زياية كتب:
الخميس 02 يناير 2014, 8:31 pm
الخميس 02 يناير 2014, 8:42 pm
و عليـكم السلام و رحمةة الله و بركاته
يعطيك العافيةة اخي عالموضووع
شرح و طرح رائعع حقا
لا عدمناك يا رب
يعطيك العافيةة اخي عالموضووع
شرح و طرح رائعع حقا
لا عدمناك يا رب
الأحد 28 سبتمبر 2014, 12:56 am
شكراااااااا ع الموضوووع الراائع
سلمت يداك
سلمت يداك
الأحد 28 سبتمبر 2014, 9:11 am
شرح اكثر من رائع
يسلمو اخي
يسلمو اخي
السبت 25 أكتوبر 2014, 10:23 pm
سلمت يداك اخي
وشكرا لك
وشكرا لك
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى