Post by opencartArab » Fri Sep 17, 2010 1:05 am




بسم الله الرحمن الرحيم


=====================================================

في البداية أحب أوضح المتطلبات الأساسية للتعامل مع القوالب وهي:

يجب أن تكون لديك خلفية عن لغة
CSS
وهذا أهم ما في الموضوع

يجب أن تكون لديك خلفية عن برنامج تحرير الصور الفوتوشوب أو أي محرر صور مشابه للفوتوشوب

يجب أن تكون لديك خلفية عن لغات برمجة المواقع
php - html

بالنسبة للغة
html
هي الأهم لأن جميع ملفات القوالب عبارة عن ملفات بامتداد
.tpl

يعني تم عمل الملف باستخدام لغة
html

ومن ثم تم حفظ الملف بصيغة
.tpl

وهذا الامتداد هو اختصار لكلمة
template

ومعني هذه الكلمة باللغة العربية هو قالب
=====================================================

الان ننتقل لصلب الموضوع وسوف يكون الموضوع مقسم لثلاثة أجزاء كالتالي:

الجزء الأول طريقة تركيب القالب على المتجر

الجزء الثاني طريقة تعديل وتوافق اتجاه القالب مع المتجر

الجزء الثالث طريقة تصميم قالب

=====================================================

الجزء الأول

طريقة تركيب القالب على المتجر

يجب أولا معرفة مسار مجلد القوالب وهو على المسار التالي

catalog\view\theme

وبعد فتح هذا المسار سوف تجد مجلد واحد بإسم

default

[attachment=11]tpl_1.png[/attachment]

وهذا المجلد هو القالب الافتراضي للمتجر والذي يظهر دائما باللون الأزرق كما هو موضح في الصورة التالية

[attachment=10]tpl_2.png[/attachment]

وبعد أن عرفنا مسار مجلد القالب سوف نقوم بتركيب قالب مجاني من القوالب المجانية الموجودة في موقع اوبن كارت في قسم القوالب

والقالب المجاني الذي سنقوم بالعمل عليه موجود على الرابط التالي

http://www.opencart.com/index.php?route ... order=DESC

وبعد أن نقوم يتنزيل القالب على الجهاز سوف يكون على شكل ملف مضغوط ثم نقوم بفتح الضغط ونجد أنه يحتوي على مجلد واحد فقط بإسم

greenshop

نقوم بوضع هذا المجلد في مسار مجلد القوالب بجوار القالب الافتراضي

[attachment=9]tpl_3.png[/attachment]

وبعدها ننتقل إلى لوحة التحكم ثم نذهب الى الضبط ثم الاعدادات ثم المتجر ثم من خانة القالب او الاستايل سوف نجد القالب الجديد

[attachment=8]tpl_4.png[/attachment]

وبعد الحفظ نذهب إلى واجهة الموقع ونعمل تحديث للصفحة لكي يظهر القالب الجديد

[attachment=7]tpl_5.png[/attachment]

وهكذا نكون قد انتهينا من شرح طريقة التركيب

=====================================================

الجزء الثاني

طريقة تعديل وتوافق اتجاه القالب مع المتجر

لو نلاحظ أن القالب الذي قمنا بتركيبه يعمل فقط في اتجاه اليسار فقط وعند اختيار اللغة العربية أيضاً يعمل في اتجاه اليسار ويحتاج إلى تعديل الاتجاه لليمين

ولكي نقوم بذلك نقوم بفتح مجلد الهيدر الموجود على المسار

[attachment=6]tpl_6.png[/attachment]

ثم نبحث عن السطر

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
ونستبدله بالسطر التالي

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/<?php echo $mainstyle; ?>.css" />
ثم نحفظ

وللإصدار
1.5

ابحث عن السطر

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
واستبدله بالسطر

Code: Select all

<?php if ($direction == 'rtl') { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet-a.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<?php } ?>
ثم نحفظ

الان لو تلاحظ الموقع يعمل بشكل طبيعي للغة الانجليزية ولكن للغة العربية سوف تكون النتيجة كالصورة التالية
tpl_7.png

tpl_7.png (227.33 KiB) Viewed 62590 times

وهذه نتيجة أننا قمنا بالتعديل على ملف الهيدر حيث أن ملف الهيدر الآن يبحث عن ملف الاستايل الذي يعمل على الاتجاه اليمين وهو غير موجود لذلك تظهر لنا هذه الصورة الأخيرة

ولكي نقوم بعمل ملف استايل يعمل باتجاه اليمين نذهب الى المجلد على المسار التالي
tpl_8.png

tpl_8.png (24.06 KiB) Viewed 62590 times

نلاحظ الآن أنه يوجد ملفين فقط والملف الأول

ie6.css

خاص لكي يتوافق السكربت مع متصفح انترنت اكسبلور 6 فقط وليس له علاقة باتجاه الموقع

والملف الثاني هو الذي يهمنا وهو خاص بواجهة الموقع لكي تعمل باتجاه اليسار

ويجب علينا الآن أن نقوم بنسخ نفس هذا المجلد الثاني ومن ثم نقوم بتسميته إلى

stylesheet-a.css

ضروري جداً اختيار هذا الإسم ولن يعمل في حالة اختيار اسم من عندك

كما في الصورة التالية
tpl_9.png

tpl_9.png (29.13 KiB) Viewed 62590 times

والان لو ذهبنا إلى الموقع واخترنا اللغة العربية سوف نلاحظ أن الموقع يعمل مع القالب ولكن مازال في اتجاه اليسار

وهنا يأتي دور العمل على لغة

CSS

وتعديل الاتجاه للملف

stylesheet-a.css


وهكذا نكون قد انتهينا من شرح طريقة تعديل وتوافق اتجاه القالب مع المتجر

ملاحظة هامة: بعض القوالب المجانية وأيضاً المدفوعة عند مشاهدة الملفات في الملف المضغوط تلاحظ وجود تعديلات على نفس ملفات سكربت المتجر

مثل هذا القالب

http://www.opencart.com/index.php?route ... order=DESC

وهذا بسبب أن الشخص الذي قام بعمل هذا القالب قد أخطأ ولم يستخدم الطريقة الصحيحة لعمل القوالب

لذلك أنصح وبشدة قبل تركيب أي قالب مشاهدة الملفات الموجودة في الملف المضغوط والتأكد فقط

أن الملف المضغوط يحتوي فقط على قالب وليس قالب مع تعديلات على نفس السكربت

وفي كل الأحوال القالب سوف يعمل باتباع خطوات التركيب المرفقة مع كل قالب ولكن سيسبب لك إزعاج عند الترقية

=====================================================

الجزء الثالث

طريقة تصميم قالب

الخطوات الذهبية لعمل قالب خاص هي كالتالي

أولاً : لا تحذف مجلد القالب الافتراضي

default

لأنه سيكون كمرجع أساسي في حالة نقص أي ملف في القالب الخاص الذي ستقوم بعمله
وأيضاً لكي لايتم استبدال الملفات عند الترقية
والأفضل دائماً عمل قالب منفصل في مجلد منفصل على مسار مجلد القوالب الذي ذكرناه سابقاً

catalog/view/theme

ثانياً : لا تقم بنسخ جميع محتويات القالب الافتراضي

default

إلى مجلد القالب الخاص بك لأن ذلك يستوجب عليك ترقية جميع الملفات عند صدور نسخة جديدة.

ثالثاً : قم بإنشاء مجلد جديد على مسار مجلد القوالب

catalog/view/theme

مثلا سوف نقوم بتسمية هذا المجلد إلى

arab
tpl_10.png

tpl_10.png (21.12 KiB) Viewed 62590 times

الان المجلد فارغ

نرجع إلى المجلد الافتراضي ونجد فيه ثلاثة مجلدات
tpl_11.png

tpl_11.png (20.71 KiB) Viewed 62590 times

وننسخ المجلدين بجميع محتوياتهم إلى مجلد القالب الخاص بنا

image

وهذا المجلد خاص بصور القالب

و

stylesheet

وهذا المجلد خاص بملفات الاستايل

ثم ننسخ فقط ملف الهيدر على المسار التالي

catalog/view/theme/default/template/common/header.tpl

إلى مسار القالب الخاص بنا

catalog/view/theme/arab/template/common/header.tpl

ثم نقوم بفتح ملف الهيدر الخاص بنا ونستبدل جميع الكلمات

default

إلى

arab
tpl_12.png

tpl_12.png (108.54 KiB) Viewed 62590 times

ثم نحفظ الملف بعد عمل التعديلات

رابعا : نذهب إلى لوحة التحكم ونختار القالب الخاص بنا

خامساً : نقوم بالتعديل على ملفين الاستايل

catalog/view/theme/arab/stylesheet/stylesheet-a.css

وهذا الملف خاص باللغة العربية

catalog/view/theme/arab/stylesheet/stylesheet.css

وهذا الملف خاص باللغة الانجليزية

ومن هذين الملفين يمكنك تعديل الخلفية والألوان والخطوط .. إلخ على حسب احتياجك

ويجب أن تكون لديك معرفة عن لغة

CSS

سادساً : فقط انسخ الملفات التي تريد التعديل عليها من مجلد

template

ولاحظ بأننا فقط نسخنا منه ملف الهيدر

catalog/view/theme/default/template/common/header.tpl

ولا تحتاج لنسخ غيره إلا في حالة عمل تعديلات خاصّة

سابعاً : اذا كنت قد قمت بتطبيق الخطوات السابقة وفي حالة اصدار نسخة جديدة وتريد ترقية القالب إلى النسخة الجديدة

قم بنسخ القالب الخاص بك كاملاً إلى النسخة الجديدة

ثم فقط قم بالمقارنة بين ملف الهيدر الخاص بك

catalog/view/theme/arab/template/common/header.tpl

مع ملف الهيدر لقالب النسخة الجديدة


وهكذا نكون قد انتهينا من شرح طريقة تصميم قالب

=====================================================

انتهى الموضوع وبالتوفيق للجميع

ويسعدني الرد على أي استفسار

ولا تنسونا من صالح دعائكم


[/size]

Attachments

tpl_6.png

tpl_6.png (35.74 KiB) Viewed 62590 times

tpl_5.png

tpl_5.png (488.27 KiB) Viewed 62590 times

tpl_4.png

tpl_4.png (26.07 KiB) Viewed 62590 times

tpl_3.png

tpl_3.png (24.85 KiB) Viewed 62590 times

tpl_2.png

tpl_2.png (183.37 KiB) Viewed 62590 times

tpl_1.png

tpl_1.png (46.69 KiB) Viewed 62590 times


https://www.opencartarab.com
التعليمات باللغة العربية موجودة على الرابط التالي
https://www.opencartarab.com/docs


Expert Member

Posts

Joined
Thu Apr 01, 2010 3:31 am

Post by bahrain » Sun Sep 26, 2010 5:39 pm

شكرا لك و في ميزان حسناتك ان شاء الله
جاري التجريب

New member

Posts

Joined
Wed Aug 11, 2010 5:33 pm

Post by bahrain » Sun Sep 26, 2010 5:43 pm

تم تعريب اول ستايل

http://www.cbahrain.net/cart/

New member

Posts

Joined
Wed Aug 11, 2010 5:33 pm

Post by opencartArab » Sun Sep 26, 2010 11:10 pm

bahrain wrote:شكرا لك و في ميزان حسناتك ان شاء الله
جاري التجريب
حظ موفق

https://www.opencartarab.com
التعليمات باللغة العربية موجودة على الرابط التالي
https://www.opencartarab.com/docs


Expert Member

Posts

Joined
Thu Apr 01, 2010 3:31 am

Post by lawz » Mon Sep 27, 2010 12:08 am

الله يجزاك ألف خير

جلعه الله في موازيين حسنات
وإن شاء الله يكون من العلم المنتع به يفيدك طول حياتك وبعد مماتك بعد عمر طويل يا رب

بارك الله فيك

New member

Posts

Joined
Fri Aug 27, 2010 10:58 am

Post by opencartArab » Mon Sep 27, 2010 4:12 am

lawz wrote:الله يجزاك ألف خير

جلعه الله في موازيين حسنات
وإن شاء الله يكون من العلم المنتع به يفيدك طول حياتك وبعد مماتك بعد عمر طويل يا رب

بارك الله فيك
الله يبارك بعمرك أخي الكريم

https://www.opencartarab.com
التعليمات باللغة العربية موجودة على الرابط التالي
https://www.opencartarab.com/docs


Expert Member

Posts

Joined
Thu Apr 01, 2010 3:31 am

Post by bahrain » Wed Oct 27, 2010 7:11 pm

اريد تطريقة تغير الالوان من لستايل شي
ما هي الكودات المطلوب تغيرها ؟

Attachments

Untitled-2.gif

Untitled-2.gif (94.58 KiB) Viewed 62189 times


New member

Posts

Joined
Wed Aug 11, 2010 5:33 pm

Post by bahrain » Sun Nov 14, 2010 6:22 pm

شكرا تم تعرفة طريقة التغير

New member

Posts

Joined
Wed Aug 11, 2010 5:33 pm

Post by advanc » Wed Jan 12, 2011 7:19 am

ياليت طريقة واضحة ومفصل فيها تغيير الالوان للاستايل الافتراضي + تغيير الخط

New member

Posts

Joined
Mon Jan 03, 2011 4:11 pm

Post by opencartArab » Mon Jan 17, 2011 12:34 am

advanc wrote:ياليت طريقة واضحة ومفصل فيها تغيير الالوان للاستايل الافتراضي + تغيير الخط


أخي الكريم لو تلاحظ أنا ذكرت ضروري تكون عندك معرفة في لغة
CSS
عشان تقدر تغير الألوان وحجم الخطوط
لأن ملف الاستايل شيت فيه أوامر كثير صعب تفصليها

وبالتوفيق لك


https://www.opencartarab.com
التعليمات باللغة العربية موجودة على الرابط التالي
https://www.opencartarab.com/docs


Expert Member

Posts

Joined
Thu Apr 01, 2010 3:31 am

Post by advanc » Tue Jan 18, 2011 4:02 am

opencartArab wrote:
advanc wrote:ياليت طريقة واضحة ومفصل فيها تغيير الالوان للاستايل الافتراضي + تغيير الخط


أخي الكريم لو تلاحظ أنا ذكرت ضروري تكون عندك معرفة في لغة
CSS
عشان تقدر تغير الألوان وحجم الخطوط
لأن ملف الاستايل شيت فيه أوامر كثير صعب تفصليها

وبالتوفيق لك


طيب لو ابغى فقط اغير العنواين مثل (( القائمة الرئيسية = العروض المميزة = أحدث المنتجات ))

لأني اشوفها بالقوالب انها تاخذ نوع واحد فقط يعني ماهو كل عنوان بخط بمعنى ثاني اعتقد انه امر واحد يغير جميع العناوين فياليت تدلنا

مع ملاحظة : ان نوع الخط المطلوب ليس من خطوط الوندوز فهل هذا مشكلة ايضا ام ليس له دخل
===================================================================
مع ني شفت هذا الرد


opencartArab wrote:

افتح الملف على المسار

catalog\view\theme\default\stylesheet\stylesheet-a.css

وابحث عن

Code: Select all

font-family: Tahoma, Geneva, sans-serif;
واستبدلها بالتالي

Code: Select all

font-family: Arial, Helvetica, sans-serif;
[/size]

New member

Posts

Joined
Mon Jan 03, 2011 4:11 pm

Post by Nourhana » Sun Mar 06, 2011 6:23 pm

معلش أخي الكريم، آخر حاجة أنا فقط أبحث عن كود تغيير الاتجاه، أنا أعرف تغيير الألوان واللخطوط لكن أبغي تغيير
الاتجاه كوده ايش. هل أبحث عن كل كلمة left وأحولها إلى right

شكر الله لك

Newbie

Posts

Joined
Sat Jan 22, 2011 8:39 pm

Post by AQUA2020 » Thu Mar 24, 2011 11:43 am

السلام عليكم

ما البرنامج اذي استخدمته لفتح ملفات التصميم
.css و .tpl

وشكراً

New member

Posts

Joined
Fri Mar 11, 2011 10:19 am

Post by Hosselo » Thu Mar 24, 2011 1:43 pm

AQUA2020 wrote:السلام عليكم

ما البرنامج اذي استخدمته لفتح ملفات التصميم
.css و .tpl

وشكراً
وعليكم السلام ورحمة الله
Notepad++ يمكن فتح الملفات بواسطة
لتحميل البرنامج
http://download.tuxfamily.org/notepadpl ... taller.exe

-- My personal website & online portfolio: http://www.hossam.org


User avatar
New member

Posts

Joined
Wed Dec 08, 2010 11:19 pm
Location - Damascus, Syria

Post by Hosselo » Thu Mar 24, 2011 1:57 pm

Nourhana wrote:معلش أخي الكريم، آخر حاجة أنا فقط أبحث عن كود تغيير الاتجاه، أنا أعرف تغيير الألوان واللخطوط لكن أبغي تغيير
الاتجاه كوده ايش. هل أبحث عن كل كلمة left وأحولها إلى right

شكر الله لك
قم بتطبيق الخطوات المذكورة في الدرس بصورة عكسية ;D
الكود هو

Code: Select all

	direction:ltr;
[/size]

-- My personal website & online portfolio: http://www.hossam.org


User avatar
New member

Posts

Joined
Wed Dec 08, 2010 11:19 pm
Location - Damascus, Syria

Post by SuperX » Wed Jul 20, 2011 9:51 am

يعطيك العافية ... بس عندي تعليق .. الموضوع ينقصه التوسع أكثر في تبويبة تصميم قالب جديد ;) يعني مافيه كتير توضيحات عن بناء تصميم من الألف للياء !
لكن ألف شكر مشرفنا :)

Newbie

Posts

Joined
Mon Jul 18, 2011 10:44 pm

Post by BON » Tue Aug 23, 2011 3:50 am

اخي الكريم اوبن كارت العرب

تم تنفيذ جميع خطوات تعديل الاتجاهات لأحد القوالب

وللأسف ماتغير الاتجاه نهائي

حسب خبرتي انه فيه شي ناقص نسويه في

راح ابحث واتأكد من الموضوع وكل شي ان شاء الله

ولو انت عندك الحل ياليت تفيدنا فيه

شكرا

BON
New member

Posts

Joined
Sun Jun 13, 2010 6:10 am

Post by opencartArab » Thu Aug 25, 2011 1:17 am

^ ^ ^

ممكن يكون القالب فيه تعديلات عن القالب الافتراضي وبالتالي يحتاج لمعرفة طريقة عمله ليتم تعديل الاتجاه



https://www.opencartarab.com
التعليمات باللغة العربية موجودة على الرابط التالي
https://www.opencartarab.com/docs


Expert Member

Posts

Joined
Thu Apr 01, 2010 3:31 am

Post by max4arab » Tue Jul 16, 2013 5:56 am

قمت بعمل الخطوات وتبقى الخطوة الاخير

http://forum.opencart.com/viewtopic.php ... 92#p139492
Nourhana wrote:معلش أخي الكريم، آخر حاجة أنا فقط أبحث عن كود تغيير الاتجاه، أنا أعرف تغيير الألوان واللخطوط لكن أبغي تغيير
الاتجاه كوده ايش. هل أبحث عن كل كلمة left وأحولها إلى right

وهذا القالب
http://www.opencart.com/index.php?route ... _id=450212

New member

Posts

Joined
Tue May 10, 2011 3:04 am

Post by jirjawi » Thu Sep 18, 2014 11:17 pm

انا عندي قالب انجليزي اضفت له اللغة العربية من لوحة التحكم
ثم طبقت الطريقة الثانية اللي شرحتها و لكن لم يتغير شيء عند التغيير للغة العربية
ايش المشكلة

Newbie

Posts

Joined
Mon Sep 08, 2014 5:19 pm
Who is online

Users browsing this forum: No registered users and 5 guests