abohmam
02-10-2011, 12:46 AM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
حصريا شرح تعريب قوالب ارتيستير باحترافية في خطوات بسيطة
http://www.abc4web.net/vb/imgcache2011/12314.abc4web.jpg
اليوم تقدم لكم جوملا العرب شرح تعريب قوالب ارتيستير في عشر خطوات فقط مع الشرح المصور بعدما شرحنا القوائم الرئيسية في البرنامج الرائع ارتيستير ندخل إلى جزء تعريب القالب كما طلب أعضاؤنا الكرام ...
في هذا المقال سنشرح تعريب قالب ارتيستير فقط .. وهو في خطوات بسيطة تبدأ من تغيير اتجاه القالب .. الى تغيير صور الايقونات وغيره في القالب ... مع الشرح بالصور المرمزة بمكان التغيير بسم الله ..
قبل البداية والدخول في التعريب نآسف لـاخر عرض الدرس بسبب الظروف الحالية التي نمر بها مع الاستضافة وفي وقتنا الحالي وفترة الاختبارات .. فقط ادعو لنا ..
بعد الانتهاء من تصميم القالب نضغط على زر تصدير ونحدد اسمه ونصدره الى المجلد الذي نريده ويفضل تصديره كمجلد حتى يسهل التعديل ثم بعدها سنقوم بضغط الملف ..
حاول أن تجعل لقالبك اسم مميز وبارقام حتى تتعرف عليه بسهولة ان إختاره أحد عملاؤك او حتى لموقعك .
http://www.abc4web.net/vb/imgcache2011/12315.abc4web.jpg
نبدا في التعريب
ندخل الى مجلد css في مجلد القالب ثم الى ملف template.css
أولا تغيير اتجاه القالب من اليمين الى اليسار
لتغيير اتجاه القالب ندخل الى الدالة Body وهي التي تحتوي جميع الدوال الفرعية للصفحة لذا عن تعديل اتجاهها سيتم تعديل اتجاه دوال باقي الصفحة .. لذا نضيف اليها الامر Direction:rtl كما في الصورة ...
http://www.abc4web.net/vb/imgcache2011/12316.abc4web.jpg
بعدما قمنا بنجاح بتعديل اتجاه الصفحة تتبقى بعض الفرعيات التي لا تتحكم فيها الامر direction:rtl .. مثل القوائم ..
ثانيا تعديل اتجاه القائمة المنسدلة "" من اليمين الى اليسار "" ..
نقوم بتعديل الامر float:left الى float:right ... في الدالة .art-menu li وللعلم اي دالة بها li تعني قائمة او الترقيم النقطي لموديل او قائمة او شيء يحتاج ترقيم في القالب .
http://www.abc4web.net/vb/imgcache2011/12317.abc4web.jpg
بعدما قمنا بنجاح بتعديل مكان القائمة وجعل بدايتها من اليمين الى اليسار بدلا من اليسار الى اليمين ..
ثالثا ندخل الى محاذاة العناصر الفرعية للقائمة المنسدلة وجعل بدايتها من اليمين الىي اليسار بدلا من جعل القائمة المنسدلة تفتح لليسار نجعلها تفتح لليمين .. نستبدل الأمر left:0 بالامر right:0 في الدالة .art-menu ul
http://www.abc4web.net/vb/imgcache2011/12318.abc4web.jpg
رابعا تبديل كل أوامر text-align:left وهي محاذاة الكتابة لليسار بالاوامر text-align:right وهي محاذاة الكتابة الى اليمين .. في الصورة التالية نستخدم برنامج دريم ويفر وايجاد واستبدال ... سيقوم بالاستبدال الكامل او ممكن استبدالها يدويا ...
http://www.abc4web.net/vb/imgcache2011/12319.abc4web.jpg
نتوجه الآن الى تعديل اماكن الايقونات الجمالية ووضع محاذاتها حتى لا يحدث تداخل ...
خامسا تعديل ايقونة عنوان الموديلات " 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 :: يأتي بعده مكانين لتحديد مكان الصورة او الايقونة
الأول هو المكان الافقي للايقونة والثاني هو المكان الرأسي للايقونة ...
شاهد الصورة التالية وغير مكان الخلفية ....
http://www.abc4web.net/vb/imgcache2011/12320.abc4web.jpg
سادسا تغيير مكان ايقونات الترقيم .. ودوالها الاشهر هي ol, ul >>> li ul ...
سنغيير هنا نوع الخط ومكان الايقونة وهنا الأمر margin .. يعني المحاذاة الكاملة عن الحدود النهائية للموديل او المقال وليس محاذاة الكتابة فقط .. وتغييره نفس الامر بالنسبة للمحاذاة padding .. تابع الأسهم من أجل التغييرات .
http://www.abc4web.net/vb/imgcache2011/12321.abc4web.jpg
سابعا تغيير مكان ايقونة المقال كما وضحنا من خلال الأمر padding ... ولاحظ وجود الامر padding-right وهو امر مختصر ومحدد ويعطي محاذاة لليمين فقط بالقيمة التي تحددها .. كما انه سيلزمك اضافة السطر
background-position: right center .. لأنه غير موجود في القالب ويجب وضعه حتى توضع الايقونة في المكان الايمن ... ضروري جدا ..
http://www.abc4web.net/vb/imgcache2011/12322.abc4web.jpg
ثامنا محاذاة ايقونة الترقيم النقطي في المقالات تابع الصورة وعدل كما شرحنا ...
http://www.abc4web.net/vb/imgcache2011/12323.abc4web.jpg
وبهذا نكون قد انتهينا من تعريب القالب وتحويله كاملا الى اليمين الى اليسار ... معرب 100% باذن الله ..
تاسعا نتوجه الآن لتعديل ملف index.php لتعديل سطر الحقوق والتصميم وغيره ...
قبل اي شيء نجعل ترميز الملف UTF-8 ... ثم نعدل السطر التالي كما في الصورة قبل وبعد ..
http://www.abc4web.net/vb/imgcache2011/12324.abc4web.jpg
ثم نحفظ الملف بعدما انتهينا من وضع سطر الحقوق ... ولا تعدل فيه اذا كنت لا تعلم شيء في لغة html ...
عاشرا ندخل الى ملف templatedetails.xml وهو الملف الذي يحتوي معلومات القالب واوامر التنصيب ...
1- نضع اسم القالب :: name
2-تاريخ الانشاء :: creationdate
3- اصدار القالب :: version
4- الناشر او صاحب القالب :: auther
5- موقع صاحب القالب :: autherurl
6- وصف القالب :: description
http://www.abc4web.net/vb/imgcache2011/12325.abc4web.jpg
بعدها نقوم بضغط مجلد القالب ... ونضغطه بالصيغة zip ...
ثم نتوجه للوحة الادارة في جوملا ... ونقوم برفع القالب ..
ان شاء الله يتم بنجاح .."" تثبيت قالب بنجاح "
واسفلها عبارة وصف القالب description في ملف templatedetails.xml
http://www.abc4web.net/vb/imgcache2011/12326.abc4web.jpg
نسألكم الدعاء .... فلا تنسونا من صالح دعاءكم
نقلا عن جوملا العرب
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
حصريا شرح تعريب قوالب ارتيستير باحترافية في خطوات بسيطة
http://www.abc4web.net/vb/imgcache2011/12314.abc4web.jpg
اليوم تقدم لكم جوملا العرب شرح تعريب قوالب ارتيستير في عشر خطوات فقط مع الشرح المصور بعدما شرحنا القوائم الرئيسية في البرنامج الرائع ارتيستير ندخل إلى جزء تعريب القالب كما طلب أعضاؤنا الكرام ...
في هذا المقال سنشرح تعريب قالب ارتيستير فقط .. وهو في خطوات بسيطة تبدأ من تغيير اتجاه القالب .. الى تغيير صور الايقونات وغيره في القالب ... مع الشرح بالصور المرمزة بمكان التغيير بسم الله ..
قبل البداية والدخول في التعريب نآسف لـاخر عرض الدرس بسبب الظروف الحالية التي نمر بها مع الاستضافة وفي وقتنا الحالي وفترة الاختبارات .. فقط ادعو لنا ..
بعد الانتهاء من تصميم القالب نضغط على زر تصدير ونحدد اسمه ونصدره الى المجلد الذي نريده ويفضل تصديره كمجلد حتى يسهل التعديل ثم بعدها سنقوم بضغط الملف ..
حاول أن تجعل لقالبك اسم مميز وبارقام حتى تتعرف عليه بسهولة ان إختاره أحد عملاؤك او حتى لموقعك .
http://www.abc4web.net/vb/imgcache2011/12315.abc4web.jpg
نبدا في التعريب
ندخل الى مجلد css في مجلد القالب ثم الى ملف template.css
أولا تغيير اتجاه القالب من اليمين الى اليسار
لتغيير اتجاه القالب ندخل الى الدالة Body وهي التي تحتوي جميع الدوال الفرعية للصفحة لذا عن تعديل اتجاهها سيتم تعديل اتجاه دوال باقي الصفحة .. لذا نضيف اليها الامر Direction:rtl كما في الصورة ...
http://www.abc4web.net/vb/imgcache2011/12316.abc4web.jpg
بعدما قمنا بنجاح بتعديل اتجاه الصفحة تتبقى بعض الفرعيات التي لا تتحكم فيها الامر direction:rtl .. مثل القوائم ..
ثانيا تعديل اتجاه القائمة المنسدلة "" من اليمين الى اليسار "" ..
نقوم بتعديل الامر float:left الى float:right ... في الدالة .art-menu li وللعلم اي دالة بها li تعني قائمة او الترقيم النقطي لموديل او قائمة او شيء يحتاج ترقيم في القالب .
http://www.abc4web.net/vb/imgcache2011/12317.abc4web.jpg
بعدما قمنا بنجاح بتعديل مكان القائمة وجعل بدايتها من اليمين الى اليسار بدلا من اليسار الى اليمين ..
ثالثا ندخل الى محاذاة العناصر الفرعية للقائمة المنسدلة وجعل بدايتها من اليمين الىي اليسار بدلا من جعل القائمة المنسدلة تفتح لليسار نجعلها تفتح لليمين .. نستبدل الأمر left:0 بالامر right:0 في الدالة .art-menu ul
http://www.abc4web.net/vb/imgcache2011/12318.abc4web.jpg
رابعا تبديل كل أوامر text-align:left وهي محاذاة الكتابة لليسار بالاوامر text-align:right وهي محاذاة الكتابة الى اليمين .. في الصورة التالية نستخدم برنامج دريم ويفر وايجاد واستبدال ... سيقوم بالاستبدال الكامل او ممكن استبدالها يدويا ...
http://www.abc4web.net/vb/imgcache2011/12319.abc4web.jpg
نتوجه الآن الى تعديل اماكن الايقونات الجمالية ووضع محاذاتها حتى لا يحدث تداخل ...
خامسا تعديل ايقونة عنوان الموديلات " 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 :: يأتي بعده مكانين لتحديد مكان الصورة او الايقونة
الأول هو المكان الافقي للايقونة والثاني هو المكان الرأسي للايقونة ...
شاهد الصورة التالية وغير مكان الخلفية ....
http://www.abc4web.net/vb/imgcache2011/12320.abc4web.jpg
سادسا تغيير مكان ايقونات الترقيم .. ودوالها الاشهر هي ol, ul >>> li ul ...
سنغيير هنا نوع الخط ومكان الايقونة وهنا الأمر margin .. يعني المحاذاة الكاملة عن الحدود النهائية للموديل او المقال وليس محاذاة الكتابة فقط .. وتغييره نفس الامر بالنسبة للمحاذاة padding .. تابع الأسهم من أجل التغييرات .
http://www.abc4web.net/vb/imgcache2011/12321.abc4web.jpg
سابعا تغيير مكان ايقونة المقال كما وضحنا من خلال الأمر padding ... ولاحظ وجود الامر padding-right وهو امر مختصر ومحدد ويعطي محاذاة لليمين فقط بالقيمة التي تحددها .. كما انه سيلزمك اضافة السطر
background-position: right center .. لأنه غير موجود في القالب ويجب وضعه حتى توضع الايقونة في المكان الايمن ... ضروري جدا ..
http://www.abc4web.net/vb/imgcache2011/12322.abc4web.jpg
ثامنا محاذاة ايقونة الترقيم النقطي في المقالات تابع الصورة وعدل كما شرحنا ...
http://www.abc4web.net/vb/imgcache2011/12323.abc4web.jpg
وبهذا نكون قد انتهينا من تعريب القالب وتحويله كاملا الى اليمين الى اليسار ... معرب 100% باذن الله ..
تاسعا نتوجه الآن لتعديل ملف index.php لتعديل سطر الحقوق والتصميم وغيره ...
قبل اي شيء نجعل ترميز الملف UTF-8 ... ثم نعدل السطر التالي كما في الصورة قبل وبعد ..
http://www.abc4web.net/vb/imgcache2011/12324.abc4web.jpg
ثم نحفظ الملف بعدما انتهينا من وضع سطر الحقوق ... ولا تعدل فيه اذا كنت لا تعلم شيء في لغة html ...
عاشرا ندخل الى ملف templatedetails.xml وهو الملف الذي يحتوي معلومات القالب واوامر التنصيب ...
1- نضع اسم القالب :: name
2-تاريخ الانشاء :: creationdate
3- اصدار القالب :: version
4- الناشر او صاحب القالب :: auther
5- موقع صاحب القالب :: autherurl
6- وصف القالب :: description
http://www.abc4web.net/vb/imgcache2011/12325.abc4web.jpg
بعدها نقوم بضغط مجلد القالب ... ونضغطه بالصيغة zip ...
ثم نتوجه للوحة الادارة في جوملا ... ونقوم برفع القالب ..
ان شاء الله يتم بنجاح .."" تثبيت قالب بنجاح "
واسفلها عبارة وصف القالب description في ملف templatedetails.xml
http://www.abc4web.net/vb/imgcache2011/12326.abc4web.jpg
نسألكم الدعاء .... فلا تنسونا من صالح دعاءكم
نقلا عن جوملا العرب
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.