منتدى شلة المحترفين

طريقك نحو الإحتراف
 
الرئيسيةالرئيسية  البوابةالبوابة  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  قائمة الاعضاءقائمة الاعضاء  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 [الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
.:: رئيس مجلس إدارة المنتدى ::.
.:: رئيس مجلس إدارة المنتدى ::.


دولتي : الجزائر
ذكر
مساهماتي : 1759
dsd : 11
إنضمامي : 29/12/2013

مُساهمةموضوع: [الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)    السبت فبراير 01, 2014 6:34 pm

₪ أدآة آلخنفسآء (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{






font: $bodyfont;




margin:0 auto;





text-align: right;





width:960px;






}
























• ثآلثآً : تغيير آتچآه آلقآئمة آلعلوية للمدونة :













آلقآئمة آلعلوية هي آلتي تحمل صفحآت آلمدونة مثل ( آلرئيسية – من نحن – آتصل پي .. إلخ ) ، لهذه آلقآئمة مسميآت مختلفة في گود آلقآلپ لذآ من آلأفضل آستخدآم أدآة firebugلتحديدهآ من أچل آچرآء آلتغييرآت عليهآ ، فگل مصمم وضع لهآ آسمآً من آختيآره ، وهذه پعض آلمسميآت أو لنقل آلأوآمر أفضل :














آلقوآئم تستخدم آلعنصر ul ولآپد لهآ من فقرآت پدآخلهآ ، وهذه آلفقرآت يرمز لهآ پـ li ، لذآ فإن گلمة ( من نحن – آتصل پنآ .. إلخ ) هي آلفقرآت ، أگثر آلقوآلپ يتم تغيير آتچآههآ لليمين من خلآل آلفقرآت li ، وپعض آلقوآلپ تضطر أن تغير آتچآه آلقآئمة ul لتگون في آليمين ، لذآ يچپ أن يقع آختيآرگ أولآً على آلأوآمر آلتي تحتوي على li أو آترگ آلمهمة لأدآة آلخنفسآء فهي ستقوم پذلگ پدقة .
هذه آلمرة سنستخدم خآصية 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;






}







آلنتيچة :




















طپعآً قد تچد قوآلپ لآ تحتوي على هذه آلأوآمر گمآ ذگرت وذلگ لأن مصمم آلقآلپ آختآر لهآ أسمآء أخرى ، فآلحل هو آستخدآم أدآة firebug آلخآص پمتصفح آلفآيرفوگس لإيچآد آلمرپع آلخآص پآلهيدر وآلخآص پآلغلآف آلخآرچي للقآلپ ، عندهآ لن توآچه مشآگل في آختلآف آلمسميآت .





آلآن آستطيع أن أقول لگ أنگ آنچزت 99% من خطوآت آلتعريپ وهي آلأهم پقي 
تعريپ آلگلمآت وپعض آلهوآمش وهذآ أمرهآ سهل چدآً .








آعتذر من آلچميع على آلتأخير في طرح آلدرووس
آتمنى إلتمآس آلعذر لي >.<
وآي آستفسآر آتمنى طرحه وإذآ گآن هنآگ فقره غير وآضحه لآ تتردد في آلسؤآل حتى أقوم پآلتعديل عليه





في أمآن آلله ورعآيته
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://shila-elmou7tarifin.forumth.com
بلمامون
.:: عضو مجلس إدارة المنتدى ::.
.:: عضو مجلس إدارة المنتدى ::.


دولتي : الجزائر
ذكر
مساهماتي : 436
dsd : 0
إنضمامي : 21/05/2014
عمري : 53

مُساهمةموضوع: _da3m_13   الإثنين يونيو 23, 2014 10:24 pm

موضوع رائع بوركت

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
[الدرس الثالث] دورة تعريب قوالب بلوجر (خطوات التعريب)
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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