اليوم تقدم لكم جوملا العرب شرح تعريب قوالب ارتيستير في عشر خطوات فقط مع الشرح المصور بعدما شرحنا القوائم الرئيسية في البرنامج الرائع ارتيستير ندخل إلى جزء تعريب القالب كما طلب أعضاؤنا الكرام ...
في هذا
المقال سنشرح تعريب قالب ارتيستير فقط .. وهو في خطوات بسيطة تبدأ من تغيير
اتجاه القالب .. الى تغيير صور الايقونات وغيره في القالب ... مع الشرح
بالصور المرمزة بمكان التغيير بسم الله ..
قبل البداية
والدخول في التعريب نآسف لـاخر عرض الدرس بسبب الظروف الحالية التي نمر
بها مع الاستضافة وفي وقتنا الحالي وفترة الاختبارات .. فقط ادعو لنا ..
بعد
الانتهاء من تصميم القالب نضغط على زر تصدير ونحدد اسمه ونصدره الى المجلد
الذي نريده ويفضل تصديره كمجلد حتى يسهل التعديل ثم بعدها سنقوم بضغط الملف
..
حاول أن تجعل لقالبك اسم مميز وبارقام حتى تتعرف عليه بسهولة ان إختاره أحد عملاؤك او حتى لموقعك .
نبدا في التعريب
ندخل الى مجلد css في مجلد القالب ثم الى ملف template.css
أولا تغيير اتجاه القالب من اليمين الى اليسار
لتغيير
اتجاه القالب ندخل الى الدالة Body وهي التي تحتوي جميع الدوال الفرعية
للصفحة لذا عن تعديل اتجاهها سيتم تعديل اتجاه دوال باقي الصفحة .. لذا
نضيف اليها الامر Direction:rtl كما في الصورة ...
بعدما قمنا بنجاح بتعديل اتجاه الصفحة تتبقى بعض الفرعيات التي لا تتحكم فيها الامر direction:rtl .. مثل القوائم ..
ثانيا تعديل اتجاه القائمة المنسدلة "" من اليمين الى اليسار "" ..
نقوم بتعديل الامر float:left الى float:right ... في الدالة .art-menu li وللعلم اي دالة بها li تعني قائمة او الترقيم النقطي لموديل او قائمة او شيء يحتاج ترقيم في القالب .
بعدما قمنا بنجاح بتعديل مكان القائمة وجعل بدايتها من اليمين الى اليسار بدلا من اليسار الى اليمين ..
ثالثا ندخل الى محاذاة العناصر الفرعية للقائمة المنسدلة وجعل بدايتها من اليمين الىي اليسار بدلا من جعل القائمة المنسدلة تفتح لليسار نجعلها تفتح لليمين .. نستبدل الأمر left:0 بالامر right:0 في الدالة .art-menu ul
رابعا تبديل كل أوامر text-align:left وهي محاذاة الكتابة لليسار بالاوامر text-align:right وهي
محاذاة الكتابة الى اليمين .. في الصورة التالية نستخدم برنامج دريم ويفر
وايجاد واستبدال ... سيقوم بالاستبدال الكامل او ممكن استبدالها يدويا ...
نتوجه الآن الى تعديل اماكن الايقونات الجمالية ووضع محاذاتها حتى لا يحدث تداخل ...
خامسا تعديل ايقونة عنوان الموديلات " BlockHeaderIcon.Png " ...
لتعديل مكان صورة يجب التعديل في أمرين مهمين جدا جدا
الأول هو المحاذاة للكتابة padding ..
وهي المحاذاة للكتابة بعيدا عن بداية العنصر حتى نترك فراغ للايقونة ولا يحدث تداخل مع الكتابة ..
الثاني هو مكان الايقونة background-position ..
وهو مكان وضع الصور يمين او يسار او حتى يمين علوي او سفلي .. سنحدد كل شيء بالتفصيل ..
بالنسبة للمحاذاة padding وهي تحتوي على اربع ارقام متتالية يفرق بينها مسافة واحدة مثلا
padding: 10px 20px 25px 32px
وهنا تعني ترك مسافة لأعلى 10 بيكسل ..
وترك مسافة لليمين 20 بيكسل ..
وترك مسافة لأسفل 25 بيكسل ..
وترك مسافة لليسار 32 بيكسل ..
وترتيبها من اليسار الى اليمين في الامر padding هي :: اعلى يمين أسفل يسار "" إتجاه عقارب الساعة "
الآن الموضوع اتضح اليك .. وتستطيع تحديد محاذاة الكتابة بعيدا عن الايقونة ففي ايقونة عنوان الموديل " BlockHeaderIcon.Png "
المحاذاة padding: 0 0 0 32px ... وهي تعني محاذاة لأعلى ولأسفل ولليمين صفر ولليسار 32 بيكسل ..
لذا سنقوم بتغييرها الى محاذاة لليمين 32 بيكسل والباقي يكون محاذاته صفر فيكون الشكل كما بالصورة وهو
padding: 0 32px 0 0 .... وبهذا تكون الكتابة قد اخذت المحاذاة التامة بعيدا عن الايقونة وتركت لها المساحة .
أما الامر الثاني والمتبقي وهو جعل مكان الايقونة يستقر في الوضع الايمن بدلا من الايسر .. فيكون الامر
background-position: left top نحوله الى background-position: right top ... وللعلم الامر
background-position :: يأتي بعده مكانين لتحديد مكان الصورة او الايقونة
الأول هو المكان الافقي للايقونة والثاني هو المكان الرأسي للايقونة ...
شاهد الصورة التالية وغير مكان الخلفية ....
سادسا تغيير مكان ايقونات الترقيم .. ودوالها الاشهر هي ol, ul >>> li ul ...
سنغيير هنا نوع الخط ومكان الايقونة وهنا الأمر margin .. يعني المحاذاة الكاملة عن الحدود النهائية للموديل او المقال وليس محاذاة الكتابة فقط .. وتغييره نفس الامر بالنسبة للمحاذاة padding .. تابع الأسهم من أجل التغييرات .
سابعا تغيير مكان ايقونة المقال كما وضحنا من خلال الأمر padding ... ولاحظ وجود الامر padding-right وهو امر مختصر ومحدد ويعطي محاذاة لليمين فقط بالقيمة التي تحددها .. كما انه سيلزمك اضافة السطر
background-position: right center .. لأنه غير موجود في القالب ويجب وضعه حتى توضع الايقونة في المكان الايمن ... ضروري جدا ..
ثامنا محاذاة ايقونة الترقيم النقطي في المقالات تابع الصورة وعدل كما شرحنا ...
وبهذا نكون قد انتهينا من تعريب القالب وتحويله كاملا الى اليمين الى اليسار ... معرب 100% باذن الله ..
تاسعا نتوجه الآن لتعديل ملف index.php لتعديل سطر الحقوق والتصميم وغيره ...
قبل اي شيء نجعل ترميز الملف UTF-8 ... ثم نعدل السطر التالي كما في الصورة قبل وبعد ..
ثم نحفظ الملف بعدما انتهينا من وضع سطر الحقوق ... ولا تعدل فيه اذا كنت لا تعلم شيء في لغة html ...
عاشرا ندخل الى ملف templatedetails.xml وهو الملف الذي يحتوي معلومات القالب واوامر التنصيب ...
1- نضع اسم القالب :: name
2-تاريخ الانشاء :: creationdate
3- اصدار القالب :: version
4- الناشر او صاحب القالب :: auther
5- موقع صاحب القالب :: autherurl
6- وصف القالب :: description
بعدها نقوم بضغط مجلد القالب ... ونضغطه بالصيغة zip ...
ثم نتوجه للوحة الادارة في جوملا ... ونقوم برفع القالب ..
ان شاء الله يتم بنجاح .."" تثبيت قالب بنجاح "
واسفلها عبارة وصف القالب description في ملف templatedetails.xml
نسألكم الدعاء .... فلا تنسونا من صالح دعاءكم
لاحتراف تعريب القوالب الاخرى تابع كتاب تعريب القوالب الاصدار الابتدائي مع كافة تعاليم لغة ال css
تم بحمد الله وفضله ونعمته .. والله المستعان على ما تصفون .
0 التعليقات