Re: المدخل لتعريب القوالب «
Reply #2 on: April 16, 2006, 07:46:21 PM »
الآن ننتقل إلى ملف css بعد الانتهاء من ملف index.php قم بحفظه و فتح ملف css
على النقيض من ملف index.php و الذى لم يكن بالضرورة فهم ما يجتويه واجباً , أؤكد أنه قبل الشروع فى تعديل ملف css يجب عليك الإحاطه بكامل محتوياته حتى تعلم جيداً ماذا تفعل و لا تتسبب فى ضياع مجهودك بسبب خطأ صغير
فى البداية يتكون ملف css من عدة فقرات قياسية , كل فقرة منها ترتبط بجزء من القالب
لذلك فعند تعاملك مع احدى الفقرات , انس بقية الملف و تعامل معها كأنها ملف منفصل و هكذا حتى تعدل على بقية الفقرات
مثلا , هذه تعتبر فقرة
Code:
div#header_r {
height: 90px;
background: url(../images/mw_header_blue_t_r.png) 100% 0 no-repeat;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}
لاحظ انها تبدأ بالقوس { و تنتهى ب { و هذا ما يساعدك عليه برنامج Notpad++
قام المطورون بوضع صيغه قياسية لما يجب أن تكون عليه تلك الفقرات , تجد شرحها هنا
http://www.joomlart.com/tutorials/templates_tutorial/understanding_mambo_css_in_5_minutes.htmlو هذا الرابط أيضاً
http://www.joomlaos.de/CSS_Guide.htmlحيث لا يمكن أن يخرج أى قالب عن هذه الأطر القياسية , و هذا هو سبب وجود العديد من القوالب لجملة أو لمامبو فى ما سبق
فمثلا إذا وجدت فى ملف css فقرة بعنوان a:mainlevel:link فهذا يعنى أنك ستتعامل مع القائمة الرئيسية أو أى قائمة للموقع
لنتقدم أكثر لندرك ماذا يجب تغييره حتى يتم تعريب القالب ,
أول الأوامر التى يجب ملاحظتها و هى من أهم الأوامر هى
Code:
float :
حيث يعمل هذا الأمر على التحكم فى محاذاه عنصر معين مثل القوائم و المحتوى و ما إلى ذلك
يتم وضع الأوامر left أو right أو center
فمثلاً و كما ستجد فى القوالب الغربية يكون الأمر
Code:
float : left;
فقم بتغيير كلمة left إلى right و لا تنس إضافة الفاصلة المنقوطة بعد كل أمر
ثانى الأوامر هو Code:
font-family:
من منا يكره الخط الذى يتم عرض المحتوى به فى القالب الافتراضى ؟
هذا لا لشىء إلا بسبب أن من يصنع القالب قد قام وضع الخط arial أو sans serif و هذا مناسب للانجليزية و لكن ليس لعين المستخدم العربى عند عرض لغته الأم ,
لذلك سوف تجد هذا الأمر
Code:
font-family: Arial, Helvetica, sans-serif;
فقم بتغييره إلى
Code:
font-family: Tahoma, Arial, Helvetica, sans-serif;
لاحظ اننا أضفنا خط تاهوما و هو الأفضل لعين المستخدم العربى و هو المستخدم فى المنتدى أيضا
و لاتقم بحذف بقية الخطوط الأخرى , حيث لا نضمن وجود خط Tahoma عند الجميع , من باب الاحتياط ليس أكثر
ثالث تلك الأوامر هو Code:
text-align:
و هو يختلف عن الأمر float : فى أن الأخير مهمته محاذاه العنصر مثل القائمة أو الموديل أو المحتوى , بينما الأول وظيفته محاذاة النص بداخل العنصر
أيضاً يقبل إضافة left أو right أو center
هذه الأوامر التى تتعلق بالتعريب ,
لاحظ جيداً أنه قد يتوجب عليك إضافتها لإحدى الفقرات , حيث قد لا تكون موجودة بالضرورة و تتعامل معها جملة على أنها يسار بشكل افتراضى و تذكر أنها تضاف فى سطر جديد بين بداية و نهاية الفقرة
توجد اوامر أخرى مثل
Code:
color:
و أمامه يوضع كود اللون بصيغة اتش تى ام ال
Code:
background:
إذا أردت وضع خلفية للنص مثل صورة أو لون و يقبل كود اللون أو رابط الصورة
Code:
padding:
هذا الأمر يدخل ضمن اوامر المحاذاه و لكن المحاذاه غير المطلقة , تعلم أنه عندما تكتب أمام أمر المحاذاه right فإنها ستجعل المحاذاه لأفصى اليمين , و لكنك لا تريد ذلك بالتحديد , فيمكنك جعل المحاذاه لليمين قليلا
و يوضع أمام هذا الأمر من واحد إلى 4 أوامر يتم الفصل بينها بمسافة عادية كل منها يكون على صورة رقم بجواره px حيث تمثل px عدد بكسلات الشاشة عند العرض
و بالطبع وجود أربعة أكواد لتنظيم المحاذاه أعلى و أسفل و يمينا و يساراً , باختصار استخدم هذا الأمر لتخصيص العنصر الذى تعمل عليه على ذوقك و كما تحب بعيداً عن الخيارات المطلقة
بهذا نكون قد أنهينا ما يتعلق بملف css مع ملاحظة أنه عند التعديل يجب عليك تعديل فقرة و التأكد من نتيجة عملك فوراً و بعدها تكمل لفقرة أخرى
لا يشترط أن تعمل على كل الفقرات , و لكن إذا فهمت ما فى الرابط الأخير , فستعرف جيداً أين الفقرات المطلوبة للتعديل
هذا ما يتعلق بتعريب القوالب , لاتنس أن تحزم الملفات بعد الانتهاء من العمل عليها و تجربتها فى ملف مضغوط و ترفعه
أخيراً أرجو أن يكون الشرح واضح و مؤدى للغرض و لا تنس