مجلة ‪mkportal

‫والحمد الله رب العالمین‬
‫و الصلاة و السلام على سیدنا محمد النبي الكريم و علي آله و صحبه‬
‫أجمعین‬
‫إھــــــــــداء..‬
‫إھــداء لكل شخـص يسعـي للتعلم و الأستـفادة..‬
‫إھــداء لكل من علمنـي حرفـً و ساعدني أن أصل الى مـأنا علیه..‬
‫ا‬
‫إھــداء لكل مستخـدم عربي يسعي لیصبح مطور..‬
‫إھـــــداء خـاص..‬

‫فهرس الدورة :‬
‫الدورة مقسمه لجزئین:‬
‫اولا:التعامل مع مجلة ‪ joomla‬بكل شىء فیھا ان شاء االله‬
‫وفھرسھا يشمل الأتى:‬
‫1-شرح تنصیب المجلة على موقعك او السیرفر المحلى‬
‫٢-شرح التعامل مع لوحة التحكم الخاصة بالمجلة‬
‫وينقسم ھذا الجزء لقسمین:‬
‫اولا:‬
‫-شرح كیفیة تركیب الاضافات والقوالب والملحقات الخاصة بالمجلة‬
‫-التعرف على الموديلات -القوالب-التمبلات-الكومبونینـت)مـاھى-اھمیتھـا-‬
‫كیفیة التحكم بھا(‬
‫ثانیا:‬
‫-شرح القوالب والثیمات الخاصة بجمله)تركیبھا-الخیارات وشرحھا-كیفیة‬
‫التعديل(‬
‫-بدءا من ھذا الجزء راح ننتقل لجزئیة التصمیم والتعديل على القوالب‬
‫يشمل ذلك:‬
‫-تعلم فنون تعريب القوالب‬
‫-تعلم فنون التعديل على الوان القالب باستخدام‪css‬‬
‫-تعلم فنون كیفیة تصمیم ھیدر+فوتر للقالب‬
‫-تعلم فنون تنظیم اماكن الموديلات فى القالب‬
‫٢‬
‫ٌطور‪MTWER.COM‬‬ ‫م‬
‫______________________________________________________‬
‫ثانیا: التعامل مع مجلة ‪mkportal‬‬
‫وفیھــــــــــــــــــــا راح نتعــــــــــــــــــــرف علــــــــــــــــــــى الأتــــــــــــــــــــى:‬
‫١-شرح لكیفیـة تركیـب+ التعامـل الـسريع مـع المجلـة مـن حیـث الأسـتخدام‬
‫٢-تعلــــــــــــــم فنــــــــــــــون تــــــــــــــصمیم أجــــــــــــــزاء المجلـــــــــــــ ـة‬
‫ـ‬ ‫ـ‬ ‫ـ‬ ‫ـ‬ ‫ـ‬
‫٣-تعلم كیفیة التعديل على بلوكات المجلة‬
‫وفى النھاية راح يكون فیه موضوع للنقاش للرد على استفسارات الاعضاء‬
‫فى كل درس يتم شرحه ، حتى نوصل المعلومة للمشترك فى الدورة بأقصى‬
‫درجة‬
‫ممكنة.‬
‫أيضً يطلب من كل متدرب أن يعمل على تطبیق دروس الدورة‬ ‫ا‬
‫وبالنھاية ارفاق الإستايل + صورة منه لما قام‬
‫بتطبیقه خلال الدورة لتقییم عمله،‬
‫كما يطلب ارفاق صور لكل خطوات الدورة وذلك بمواضیع النقاشات لكل درس.‬
‫تنبیه:// الدورة ھي مشاركة وتفاعل بین الأعضاء والمشاركین والمتلقین‬
‫لذلك احرص عزيزي المتلقي أن يكون ردك فعا ً مشاركً‬
‫ا‬ ‫لا‬
‫ولو بمعلومة إن لم يكن تطبیقً لیكون ردك مفیدً نافعا‬
‫ً‬ ‫ا‬ ‫ا‬
‫وتكون مساھمً بإلقاء الدورة بشكل أو بآخر.‬
‫ا‬
‫وفى النھاية أطلب منكم الدعاء لى‬
‫بأن يوفقنى االله فى دينى ودنیاى‬
‫وأن يرحمنا ويرحم المسلمین جمیعا الاحیاء‬
‫منھم والاموات‬
‫مع التحیة‬
‫أخوكم‪vista-design‬‬
‫وھذا واالله ولى التوفیق‬
‫٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫فھرس الوصول السريع للدروس:‬
‫متطلبات الدورة‬
‫]1‪ [joomla‬شرح تنصیب المجلة وتركیبھا على السیرفر المحلى أو موقعك‬
‫]2‪ [joomla‬شرح لوحة تحكم المجلة وتعريف للقوالب-الموديلات-الكومبونینت‬
‫]3‪ [joomla‬شرح القالب‪ template‬تعريفه-أجزائة البرمجیة-البوسشنات‬
‫]4‪ [joomla‬شرح تصمیم الھیدر والفوتر للقالب والتعديل علیه‬
‫]5‪ [joomla‬شرح ال‪ css‬الخاص بكل قالب وكیفیة التعديل علیه‬
‫]6‪ [joomla‬شرح تنظیم أماكن الموديلات+تعديل خطوط القالب لرؤية أوضح‬
‫]‪ [joomla final‬درس برمجة قالـب مجلـة جملـة بنفـسك مـن الـصفر )أقـوى درس فـى‬
‫الدورة(‬
‫]1‪ [mkportal‬شرح تركیب المجلة على السیرفر المحلى وتشغیلھا‬
‫]2‪ [mkportal‬درس تأطیر وتصمیم بلوكات المجلة‬
‫بسم االله الرحمن الرحیم‬
‫نبدأ انطلاقة الدورة راجیا من العلى القدير ان تتم على خیر‬
‫اولا: متطلبات الدورة:‬
‫1-السیرفر المحلى ،ويفضل ‪ appserv‬الاصدار ٩٫٥٫٢‬
‫للتحمیل:‬
‫اضغط ھـــنا رابط مباشر‬
‫2-مجــــلة‪joomla‬‬
‫اضغــــط ھـــنا‬
‫3-مجـــلة‪mkportal‬‬
‫اضغــــط ھــــنا‬
‫٤‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫5-برنامج الفوتوشوب ‪ photoshop csME‬الداعم للعربیة + الكیجن‬
‫للتحمیل برابط واحد فقط يدعم استكمال التحمیل:‬
‫اضغــط ھنـــا‬
‫الحجم: ٣٩٣ میجا‬
‫6-برنامج الفرونت بیج ٣٠٠٢ برابط واحد فقط يدعم استكمال التحمیل:‬
‫للتحمیل:‬
‫‪http://uploading.com/files/433Q5YNT/...part1.rar.html‬‬
‫‪http://uploading.com/files/W7GSIEB4/...part2.rar.html‬‬
‫‪http://uploading.com/files/4R4FXBKH/...part4.rar.html‬‬
‫‪http://uploading.com/files/G51ADMER/...part3.rar.html‬‬
‫السیريال :‬
‫‪http://uploading.com/files/SHED0RTX/key.rar.html‬‬
‫الحجم: ٠٠٣ میجابايت تقريبا‬
‫نرجو من الجمیع ان تكون جمیع ھذه الادوات متوفرة قبل البدء‬
‫مع التحیة‬
‫‪vista-design‬‬
‫٥‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]1‪[joomla‬شرح تنصیب المجلة وتركیبھا على السیرفر المحلى أو موقعك‬
‫نبدأ انطلاقة الدورة بأذن االله‬
‫اولا:شرح تنصیب مجلة جملة على سیرفرك المحلى:‬
‫١-بعد تركیب السیرفر المحلى(راجع ھذا الدرس لمعرفة طريقة تركیب السیرفر‬
‫المحلى,)قم‬
‫بعمل قاعدة بیانات جديده للمجلة من‪phpmyadmin‬‬
‫٢-ضع مجلد المجلة فى ملف‪www‬‬
‫٣-استدعى رابط المجلة من المتصفح بكتابة ‪ www.localhost.com/xxx‬حیث‬
‫‪xxx‬ھو اسم مجلد المجلة‬
‫٥-تابع طريقة تنصیب المجلة كالأتى:‬
‫٦‬
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
٧
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ملاحظه :خطوة كتابة بیانات ‪ ftp‬مھمه لو كان السیرفر على موقعك)ولیس‬
‫السیرفر المحلى )مفعل السیف مود‬
‫٨‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بعد انتھاء التركیب‬
‫قم بحذف مجلد التثبیت‪installation‬‬
‫وبھیك تكون ركبت المجلة‬
‫ويمكنك الدخول كالاتى:‬
‫الیوزر‪:admin‬‬
‫الباسورد :مثل ما حطیت‬
‫‪www.localhost/joomla/administrator‬‬
‫٩‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ملاحظه اخرى ذكرنى بھا احد المشاكل اللى واجھت الاعضاء‬
‫وھى وانت بتنصب المجلة قد تظھر لك ھذا الخطأ‬
‫اقتباس:‬
‫‪Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to‬‬
‫‪allocate 43 bytes) in‬‬
‫‪C:\AppServ\www\mnm\libraries\joomla\language\language.php on line‬‬
‫وسبب ذلك ان الذاكرة الافتراضیة للسیرفر غیر كافیة لتنصیب المجلةولحلھا‬
‫من قائمة ‪ start‬من الويندوز نختار ‪ appserv‬ثم نفتح ملف‪php.ini‬‬
‫شوف الصورة‬
‫بعدين انزل لحد ما تجد ھذه البیانات‬
‫وبدل الارقام كما بالصورة‬
‫٠١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثم بعد حفظ الملف‬
‫نروح نقوم باعادة تشغیل السیرفر لتتغیر الاعددات‬
‫شوف...‬
‫لايوجد تطبیق مطلوب فى ھذا الدرس‬
‫اخوكم‪vista-design‬‬
‫١١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]2‪[joomla‬شرح لوحة تحكم المجلة وتعريف للقوالب-الموديلات-الكومبونینت‬
‫فى ھذا الدرس راح نشرح لوحة تحكم المجلة والتعرف على وظیفة الاغراض‬
‫المھمة التى راح نستخدمھا فیما بعد‬
‫اولا:أشیاء لابد ان تعرفھا بخصوص تركیب الاضافات على المجلة:‬
‫-اى اضافة راح تضیفھا راح تثبتھا من مدير التثبیت‬
‫صوره:‬
‫-اى اضافة يجب ان تكون ملف مضغوط وبأمتداد ‪ zip‬ولیس‪rar‬‬
‫-اى اضافة راح تركبھا لابد ان يكون السیف مود مقفل حتى يتم رفعھا، واذا‬
‫كان السیف مودشغال على السیرفر‬
‫يجب تفعیل نظام ال ‪ftp‬فى المجلة وانا نوھت لھذه النقطه اثناء تنصیب‬
‫المجلة‬
‫٢١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثانیا:تعريف للاضافات الخاصة بالمجلة:‬
‫-الموديل= ‪module‬ھو عبارة عن اضافة برمجیة يتم تركیبھا على مجلة)مثل‬
‫الھاك فى المنتديات ( تعطیك خصائص‬
‫امكانیات مفیده للمجلة‬
‫مثال:موديل السلايد شو والذى يعرض لك صور اوتوماتیكا باستمرار )سوف‬
‫يشرح فى الفیديو فى نھاية الدرس)‬
‫مثال صوره لخیارات موديل الاحصائیات:‬
‫-القالب=‪template‬ھو عبارة عن أشكال)مثل استايل المنتدى( يتم تركیبھا‬
‫على المجلة لتغییر شكلھا‬
‫٣١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫مثال: قالب شركة ‪ joomlart‬المشھور( ‪ ja edenite‬سوف يشرح فى الفیديو‬
‫فى نھاية الدرس)‬
‫-الكومبونیت=ھو عبارة عن نظام برمجى مثل الموديل ولكن ذو خصائص‬
‫وخیارات تحكم اكبر‬
‫مثال: كومبونینت التعلیقات الذى يتم تركیبه لعمل تعلیقات على المقالات‬
‫ملاحظه: معظم الكومبونتات لابد من عمل قسم ‪ section‬وفرع ‪category‬‬
‫خاص بھا‬
‫لان الكومبونیت يمكنك من عمل قسم خاص بھذا الكومبونیت‬
‫مثل معرض الصور فھو كومبونینت لابد من عمل قسم وفرع حتى تندرج الصور‬
‫فیه )سوف يشرح فى الفیديو فى نھاية الدرس)‬
‫الحین بعد ما تعرفنھا على أھم الأشیاء فى لوحة التحكم‬
‫دعونا نتابع ھذا الفیديو ونشوف كیفیة تركیب كل اضافة مع مثال حى لھا‬
‫لتحمیل الفیديو:‬
‫اضغــــط ھـــــنا‬
‫رابط اخر على المیديا فاير من العضو الزابن مشكورا له‬
‫اضغــــــط ھــــــــنا‬
‫المطلوب من الاعضاء:‬
‫تركیب موديل السلايد شو المرفق ورؤية صوره لخیارات التحكم ومكانه على‬
‫رئیسیة المجلة‬
‫٤١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]3‪[joomla‬شرح القالب ‪ template‬تعريفه-أجزائة البرمجیة-البوسشنات‬
‫فى ھذا الدرس راح ننطلق خطوة بخطوة فى طريق تعلم تصمیم وتعديل‬
‫قوالب جملة مثل ما يحلو لك‬
‫أولا :تعريف القالب :بكل إختصار ھو الثیم اوالاستايل الذى يغیر الشكل العام‬
‫للمجلة‬
‫أجزائه:‬
‫اى قالب يتم تركیبه له الاجزاء الاتیه بالنسبة للخیارات فى لوحة التحكم:‬
‫لنرى الصوره:‬
‫٥١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫من الصورة أجزاء القالب ھى:‬
‫١-الأندكس=‪=index‬رئیسیة المجلة أو القالب‬
‫٢-ملفات ال =‪css‬الخاصة بألوان وخطوط القالب‬
‫٣-خیارات التعديل على القالب)الالوان المتاحه-العرض-خیارات أخرى(‬
‫بعد التعرف على أجزاء القالب خلونا نعرف نقط مھمه وھى:‬
‫١-يقسم القالب الى أجزاء او أماكن او نقول بوسشن ,‪ postion‬والتى يتم‬
‫استخدمھا فى اختیار مكان الموديل فى رئیسیة المجلة:‬
‫مثلا:أريد ان تكون القائمة الرئیسیة للمجلة على الیمین، فراح نختار‬
‫البوسشن يمین‪right‬‬
‫مثلا :أريد ان يكون موديل السلايد شو فى الفوتر، فراح نختار البوسشن‬
‫الفوتر ‪footer‬وھكذا.........‬
‫لذلك، اى قالب يتم برمجتھا من اى شركة ،يكون مدعوم بأماكن او بوسشنات‬
‫تتیح لك اختیار الاماكن بسھولة‬
‫نأخذ مثال عملى:‬
‫قالب ‪ perihelion‬من شركة‪rocket theme‬‬
‫شوف صورة القالب:‬
‫طبعا انا كاتب على الصورة بعض البوسشنات‬
‫٦١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫طب كیف راح اعرف ھالبوسشنات؟‬
‫بسیطة:الشركات المحترمه مثل ‪ rocket theme‬او ‪ joomlart‬تقوم بأرفاق‬
‫صوره بھا جمیع البوسشنات فى القالب,‬
‫فمثلا فى ھذا القالب ، لما تیجى تنزله‬
‫راح تجد معه مرفق ھالصورة:‬
‫وھذه ھى البوشنات كلھا‬
‫وطبعا راح تفیدك عندما تريد اختیار مكان لموديل ما ولیكن السلايد شو‬
‫شوف الخیارات البوشنات فى موديل السلايد شو:‬
‫٧١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الحین خلونا نعرف الأجزاء البرمجیة لھذه البوسشنات فى القالب‬
‫اضغط على ‪ edit html‬فوق على الیمین:‬
‫بعدين راح تجد السورس البرمجى للقالب‬
‫برمجیة القالب يتم تقسیمھا لاجزاء‬
‫خلونا نأخذ القالب من فوق لاسفل ونشوف أجزائه:‬
‫٨١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫١-الھیدر:‬
‫شوف :‬
‫بعدين ننزل شوف:‬
‫راح تجد الموديلز والبوسشن الخاص بھم‬
‫٩١‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بعدين ننزل للأخر راح تجد كود الفوتر:‬
‫طبعا أنا شرحت أجزاء القالب برمجیا ,حتى تستفاد منھا فى الاتى:‬
‫-1حذف او تعديل جزء من الموديل‬
‫-2لاحقا:راح تتعلم كیف تضیف ھیدر+فوتر بكیفك‬
‫الى ھنا انتھى الدرس‬
‫الموضوع مجرد تعريف‬
‫وأكید راح يكون فیه نقاش للرد على اى سؤال‬
‫تحیاتى‪vista-design‬‬
‫٠٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]4‪[joomla‬شرح تصمیم الھیدر والفوتر للقالب والتعدیل علیھ‬
‫فى ھذا الدرس راح نتعرف على كیفیة تصمیم الھیدر والفوتر على اى قالب‬
‫تريده‬
‫اولا: دعونا نشرح كیفیة تصمیم الھیدر والفوتر‬
‫نفتح الفوتوشوب ،بعدين نسوى عمل جديد بمقاسات ٧٧٧ عرض فى ٦٦٦‬
‫طول‬
‫وانا فى ھالمثال راح اصور الشاشة عندى، وراح أخذ الھیدر الخاص بالموقع‬
‫ھنا مطور‬
‫وراح اسحبه لاعلى صفحة العمل‬
‫وبعدين راح نبدأ بتقطیعه باداة التقطیع‬
‫لثلاثة قطع )شمال-وسط –يمین(‬
‫١٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ويفضل عند التقطیع ان تجعل مقاس الجزء الايسر=مقاس الجزء الايمن‬
‫بعد ما قطعنا‬
‫راح نحفظ الشغل‬
‫اضغط من فوق على‪save for web‬‬
‫بعدين نختار‪save‬‬
‫ونختار مثل الاتى:‬
‫بعد الحفظ، راح تجد تكون ملف صور به ثلاث صور‬
‫شوف,,,,,,,,‬
‫٢٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الحین تمام خلصنا من التصمیم، وطبعا الفوتر ھو نفس الموضوع‬
‫وقم بنسخ السورس الخاص بالقالب‪index.html‬‬
‫من لوحة تحكم المجلة كما شرحنا سابقا‬
‫‪template manageràedit indexàcopy‬‬
‫ملاحظه :راح اشتغل على قالب ‪ JA_Purity‬الذى يأتى مع المجلة جاھز‬
‫الحین افتح برنامج الفرونت بیج‪front page‬‬
‫ثم انتقل لخانة ال ‪code‬من اسفل‬
‫وقم بلصق السورس البرمجى للقالب‬
‫بعدين فى المنطقه المشاره قم بأضافة ثلاث جداول‬
‫شوف.........‬
‫٣٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الحین نرجع لخانة ‪ design‬من أسفل‬
‫ونقوم فى كل جدول بوضع الصورة الخاصة به‬
‫الجدول الايسر=الصورة الیسرى‬
‫الجدول الاوسط=الصورة الوسطى‬
‫الجدول الايمن=الصورة الیمنى‬
‫٤٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بحیث يكون الشكل النھائى ھكذا‬
‫الحین نركز فى الخطوات القادمة‬
‫اولا:عمل الصورة الوسطى كنقطة تمدد، حتى يتمدد الھیدر مع اى مقاس‬
‫شاشة‬
‫-1قف على الجدول الاوسط،ثم اضغط كلیك مرتین ، راح تفتح خانة’،‬
‫اختار ‪general‬من فوق وانسخ رابط الصورة الوسطى‬
‫٥٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الحین بعد نسخ رابط الصورة الوسطى، نقوم بحذف ھذه الصورة من جدولھا‬
‫ثم وأنت واقف على نفس الجدول الاوسط بعد ما حذفنا الصورة الوسطى‬
‫الخاصة به‬
‫نضغط كلیك يمین ونختار‪cell properties‬‬
‫٦٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بعدين نعلم بالاسفل ونقوم بلصق رابط الصورة‬
‫٧٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثانیا:بالنسبة للصورة الیسرى والیمنى، راح نجعلھا مقاساتھا‬
‫فى الخلیة حتى نساوى مقاس الصورة بمقاس الجدول‬
‫شوف,,,,,,,,‬
‫اضغط على الصورة الیسرى مرتین، ثم احفظ مقاسات الصورة فى بالك‬
‫ثم نضغط على الصورة كلیك يمین ونختار‪cell properties‬‬
‫ثم نلصق المقاسات فى الجداول الموضحه‬
‫٨٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثالثا :ازالة حدود الجداول الثلاثة......‬
‫قف بالماوس على اى جدول واضغط كلیك يمین واختار‪table properties‬‬
‫ثم سوى الخیارات المشارة كالاتى:‬
‫٩٢‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بھیك نكون انتھینا...............‬
‫الحین ارجع لخانة الكود ‪code‬من اسفل، ثم انسخ القالب واستبدله بدل اللى‬
‫فى لوحة التحكم وسوى حفظ‬
‫وفى النھاية راح تجد الشكل كالاتى على الرئیسیة‬
‫٠٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ملاحظه ھامه :/لازم تكون شغال على متصفح الانترنت اكسبلورر‬
‫ولیس متصفح اخر‬
‫لان الدرس القادم راح يكون خاص بكیفیة تعديل روابط الصور‬
‫حتى لو جینا نرفعھا على موقعنا تشتغل تمام‬
‫وبالمثل سوى الفوتر‬
‫الى ھنا ينتھى الدرس‬
‫المطلوب من الاعضاء:‬
‫تصمیم اى ھیدر ووضعه المثال صورة..........‬
‫١٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]5‪[joomla‬شرح ال ‪css‬الخاص بكل قالب وكیفیة التعديل علیه‬
‫دعونا ننطلق فى ھذا الدرس بالتكلم عن ‪ css‬بشىء بسیط‬
‫طبعا انا ماراح اعقد الموضوع واجعل الموضوع كله برمجة،لانى اعلم تماما‬
‫ان ال ‪css‬حتى تفھمه لازم تكون فاھمه بفكرة برمجیة ولیس تصمیم، لان ھذا‬
‫بیسھل ملیون مره سرعة التعديل على اى قالب‬
‫اولا ما معنى :‪css‬‬
‫ال ‪css‬تعنى ‪ Cascading Style Sheets‬اى بالعامى العربى الشكل الجمالى‬
‫للصفحة‬
‫واقصد بالشكل الجمالى)الوان-خطوط-حدود جداول-جداول وابعاد -‬
‫خلفیات......الخ(‬
‫لن اتكلم كثیر عن معناھا والاكثار من الكلام النظرى لان اللى يھمنى انك‬
‫تعرف شىء عملى‬
‫اولا: اى قالب عند تركیبه على جملة ، عندما تذھب لل ‪template manager‬‬
‫وتختار اى قالب‬
‫راح تجد فوق على الیسار‪edit css‬‬
‫فلنفرض اننا راح اشتغل على قالب ‪ ja purity‬مثل السابق‬
‫وخلونا نروح نشوف خیارات ال ‪css‬فیه‬
‫شوف....‬
‫٢٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الحین لما نفتح راح تجد ھالخیارات‬
‫وما يھمنا ھو‪template.css‬‬
‫لانه ھو التعديل الرئیسى للقالب‬
‫الحین بعد ما نفتح راح يظھر لنا الكود الخاص بالقالب‬
‫وانا راح اتكلم على عدة نقط مھمة راح تخلیك تفھم ال‪css‬‬
‫1-اى ملف ‪ css‬راح تجد بداخله انه مجزء لاجزاء، ويكون لھا عنوان،وكل جزء‬
‫يوجد كود ال ‪css‬الخاص به‬
‫مثال: شوف الصورة:‬
‫٣٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫راح تلاحظ انه فوق الخط المنقط يوجد عنوان اسمه‪header‬‬
‫ويقصد به انه ھذا الجزء خاص بالتعديل على منطقه الھیدر الخاصة بالقالب‬
‫ثانیا: توجد مصطلحات مھمه فى اى ملف ‪ css‬راح تقابله‬
‫منھا:‬
‫‪background‬الخلفیة‬
‫‪body‬الجسم‬
‫‪border‬حدود الجدول او البلوك‬
‫‪font-size‬حجم الخط‬
‫‪font-family‬نوعیة الخط‬
‫٤٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫نأخذ مثال :‬
‫ده كود الخلفیة فى اول ملف‪template.css‬‬
‫والمنطقة الخاصة به‬
‫راح تجدھا كالاتى:‬
‫٥٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثالثا: عندما تريد تغییر لون اى منقطة، فأنھا لكل لون رقم معین‬
‫ولتعرف الرقم يشیر لاى لون‬
‫افتح الفوتوشوب‬
‫بعدين اضغط على علامة اللون على الیسار‬
‫وشوف..........‬
‫٦٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫رابعا: اكواد ال ‪css‬تقسم لاجزاء كثیرة‬
‫مثلا راح تجد ان اول القالب يبدأ بسورس ال ‪body‬اى جسم القالب‬
‫٧٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫بعدين فیه‪header‬‬
‫بعدين فیه ‪ main navigation‬ويقصد به القوائم الرئیسیة‬
‫بعدين‪footer‬‬
‫وھكذا...........‬
‫طبعا لازم تجرب مره واتنین وعشرة لحد ما تبدأ تأخذ على الموضوع وتتأقلم‬
‫معاه‬
‫لانى زى ما قلت المفروص ان ال ‪css‬تشرح بلغة برمجة، ولیس بلغة تصمیم‬
‫حتى تسھل علیك اكتر‬
‫أتمنى تكون وصلت الفكرة‬
‫المطلوب من الاعضاء: وضع صورة لاى جزء من القالب قمت بتغییر اللون‬
‫الخاص به‬
‫سواء خلفیة حدود جدول اى شىء........الخ‬
‫تحیاتى‬
‫٨٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]6‪[joomla‬شرح تنظیم أماكن الموديلات+تعديل خطوط القالب لرؤية‬
‫أوضح‬
‫نستكمل معكم مشوار الدورة وھاقد اوشكنا ان ننجز العمل الذى بدأنا به‬
‫فى ھذا الدرس راح نتعرف على كیفیة تنظیم أماكن الموديلات للمجلة‬
‫أولا: نصیحة مھمه قد يغفل عنھا الكثیر جدااا>>>>>>>>>>>>>‬
‫عند رغبتك فى تركیب قالب على المجلة‬
‫يفضل ان تنصب المجلة+القالب معا بمجلد‪quick start‬‬
‫ما فھمت شىء‬
‫نفھمك ، عندما تنزل اى قالب من اى موقع اجنبى‬
‫راح تجد ان القالب به مجلدين‬
‫مجلد القالب‪template‬‬
‫مجلد اخر اسمه‪quick start‬‬
‫٩٣‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫مجلد ‪ quick start‬ھو عبارة عن مجلة جملة ، مدمج معھا القالب‬
‫بحیث عند تنصیب المجلة راح تجد القالب ركب اوتوماتیك دون تدخل منك‬
‫بدل من القالب الافتراضى‬
‫لكن ماالمیزة فى ذلك!!!‬
‫لھا میزة كبیرة، وھى انك بتنصیب ‪ quick start‬بدلا من تركیب القالب بعد‬
‫تنصیب المجلة، راح تجد ان ‪ positions‬اى اماكن الموديلات كلھا موجودة‬
‫على عكس عندما نركب القالب بعد تنصیب المجلة,‬
‫قد تجد بعض ھذه الاماكن غیر موجودة‬
‫٠٤‬
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
٤١
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ھذا مثال لاماكن الموديلات فى ھذا القالب‬
‫أعتقد بھیك وصلت المعلومة!!‬
‫ھذه كانت أھم نقطة حبیت أوضحھا بخصوص الموديلات‬
‫الحین ننتقل للنقطة الثانیة:‬
‫تغییر خطوط القالب حتى يتوافق مع لغتنا العربیة‬
‫اولا من ‪ template manager‬نروح ونختار قالبنا‬
‫بعدين نختار‪edit css‬‬
‫٢٤‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫ثم نختار‪template.css‬‬
‫راح نجد فى اول الكود ‪ font family‬تحت عنوان‪body‬‬
‫راح نغیره ، او حتى نضیف له خط‪tahoma‬‬
‫شوف......‬
‫٣٤‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫وھذه جملة جاھزة لو تحب تضیفھا‬
‫كود:‬
‫;‪font-family: "Tahoma", Arial, Tahoma, sans-serif‬‬
‫ال "" مفیدة حتى تعتمد ھذا الخط ھو الخط الرسمى للقالب‬
‫دعونا نشوف الفرق قبل وبعد اضافة خط‪tahoma‬‬
‫٤٤‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫قبل:‬
‫بعد:‬
‫شوفتوا الفرق:‬
‫أروع‬
‫بھیك يكون انتھى درسنا‬
‫ونرجو من الجمیع تطبیق الدرس‬
‫٥٤‬
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫]‪[joomla final‬درس برمجة قالب مجلة جملة بنفسك من الصفر‬
‫)أقوى درس فى الدورة(‬
‫بھذا الدرس الاخیر راح نختم اللقاء مع مجلتنا الرائعة , ‪ joomla‬وبعدھا ننتقل‬
‫لشرح مجلة‪mkportal‬‬
‫ھذا الدرس لم يشرح من قبل ، والدرس راح يكون لاول مره لاعضاء الدورة فقط‬
‫فھیا نبدأ طريق برمجة قوالب المجلة من ھنا>>>>>>>>>>‬
‫اولا: اذھب الى مجلد ‪ templates‬الخاص بالقوالب‬
‫ثم أنشأ ملف جديد وراح نسمیه ‪temp_mtwer‬‬
‫بداخل مجلد , ‪ temp_mtwer‬راح ننشأ ملفین:‬
‫-1ملف‪templatedetails.xml‬‬
‫-2ملف‪index.php‬‬
‫#صوره ١‬
‫٦٤‬
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
:‫ ثم ضع به الكود الأتى‬templatedetails.xml ‫١-افتح ملف‬
:‫كود‬
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>temp_mtwer</name>
<creationDate>31-01-2009</creationDate>
<author>Nettut Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>temp_mtwer</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
٤٧
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫٢-افتح ملف ‪ index.php‬ثم ضع به الكود الأتى:‬
‫كود:‬
‫0.1 ‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML‬‬
‫-1‪Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml‬‬
‫>"‪transitional.dtd‬‬
‫‪<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php‬‬
‫">? ;‪echo $this->language; ?>" lang="<?php echo $this->language‬‬
‫>‬
‫>‪<head‬‬
‫>/ "‪<jdoc:include type="head‬‬
‫>‪</head‬‬
‫اشرح الكود: اول عبارة ...‪ doctyype‬ھى عبارة مھمه جدا تستخدم فى اى‬
‫ملف اندكس بالذات‬
‫وفائدتھا انھا تحافظ على ابعاد التنسیق بالظبط مثل ما سويناھا فى ملف‪css‬‬
‫#########################‬
‫مثال نظرى للاطلاع فقط:‬
‫لو افترضنا ان عرض منطقة فى الصفحة الكلى = ٠٠٥‪px‬‬
‫ال٠٠٣ ‪px‬فى ال ‪css‬تقسم كالأتى:‬
‫)‪width content+padding(lt&rt)+border (lt+rt)+margin(lt+rt‬‬
‫لو وزعنا العرض الكلى ٠٠٥ على ھذه المناطق فراح تكون على سبیل المثال‬
‫كالاتى:‬
‫‪width content=400 px‬‬
‫‪padding=10 px‬‬
‫‪border=10 px‬‬
‫‪margin=5px‬‬
‫بھیك راح يكون الاجمالى ٠٠٥ بكسل‬
‫نأتى الان لفائدة جملتنا‬
‫فى بعض المتصفحات كالاكسبلورر القديم يتم اضافة قیمة زياده للمحاذاة‬
‫‪padding‬بدل ما تكون ٠١ راح تصیر مثلا ٥١‬
‫زيادة القیمة راخ تؤثر بالسلب على شكل الصفحة بالكامل‬
‫من ھنا جاءة فائدة الجملة ھذه حتى ما تستھبل اى متصفحات وتضیف اى‬
‫٨٤‬
MTWER.COM‫ٌطور‬‫م‬
______________________________________________________
‫قیمة على كیفھا‬
#######################
:‫نكمل شرح بقیة الكود‬
‫نأتى لجملة‬
PHP:‫كود‬
<jdoc:include type="head" />
title‫فھى مھمه لادراج ھیدر القالب حتى يظھر عنوان الصفحة‬
‫الان نكمل الشرح‬
‫ننطلق الأن لعمل القالب وتجمیله‬
:‫ الاتى‬index.php ‫الان راح نضیف للكود السابق فى صفحة‬
:‫كود‬
<jdoc:include type="component" />
‫ للصفحة بحیث راح يصبح الكود كاملا ھكذا‬body ‫ولكن فى‬
:‫كود‬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo
$this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
٤٩
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫الان نريد ان ننطلع على شكل قالبنا كشكل مبدئى اولى‬
‫ادلخ للوحة التحكم ثم ‪ template manager‬وراح تجد ان اسم القالب الخاص‬
‫بنا‬
‫بعدين اختاره واضغط على ‪ default‬حتى يصیر قالبنا ھو الأفتراضى‬
‫#صوره ٢‬
‫الحین نروح لمتصفحنا ونشوف شكل القالب‬
‫#صوره ٣‬
‫واو جمیل‬
‫٠٥‬
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
:‫لسه راح نسوى فیه شغل كثیر‬
‫الحین راح نتعلم كیف نضیف بوسشن للقالب‬
:‫ كان فیه الاتى‬xml ‫لو تتذكر كود‬
:‫كود‬
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
‫راح نحدد بوسشن ونخلیه يظھر‬
‫كیف؟‬
‫ ونضیف له بوسشن القائمة الیسرى والفوتر‬index.php ‫نفتح ملف‬
:‫كود‬
<jdoc:include type="modules" name="left" />
:‫كود‬
<jdoc:include type="modules" name="footer" />
:‫بحیث يصبح الكود كله كالاتى‬
:‫كود‬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
echo $this->language; ?>" lang="<?php echo $this->language; ?>"
>
<head>
٥١
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html>
‫من لوحة التحكم‬module manager ‫الحین لو رحنا ل‬
main menu‫راح نجد موديل اسمه‬
‫وھو كان مضاف سابقا‬
‫حتى يظھر القائمة الیسرى‬
٤ ‫#صوره‬
‫الحین نريد اظھار كود الفوتر على سبیل انه غیر موجود من قبل‬
٥٢
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫نروح ل ‪module manager‬ثم نختار ‪ new‬ثم نختار ال‪footer‬‬
‫#صوره ٥‬
‫نختار البوسشن‪footer‬‬
‫#صوره ٦‬
‫نروح نشوف وراح تجد الفوتر موجود‬
‫#صوره ٧‬
‫طبعا ھالاشیاء كانت موجوده لاننا نصبناھا لما اخترنا عبارة ‪install simple‬‬
‫٣٥‬
MTWER.COM‫ٌطور‬
‫م‬
______________________________________________________
‫واحنا بنصب المجلة‬data
‫نكمل ونضیف المزيد من البوسشن والموديلز‬
‫ بجانب الملفات السابقة‬css ‫الحین راح نستخدم ملف‬
‫كل جزء على حدا حتى‬index.php ‫لكن قبل ذلك نريد ان نحدد فى ملف ال‬
‫علیه‬css ‫ نحدد الجزء المراد الاختیار وتنفیذ ال‬css ‫فى كود‬
‫ لتحديد الجزء بأسم معین يمكننا‬id ‫ مع‬division ‫وراح نستحدم تنصیص‬
‫اختیاره لنعدل علیه‬
link‫ بالامر‬css ‫ولا ننسى ان نشیر لمكان ملف‬
‫ بھذه الصورة‬index.php ‫يعنى بعد ھذا التعديلات راح يصبح كود‬
:‫كود‬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
echo $this->language; ?>" lang="<?php echo $this->language; ?>"
>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/temp_mtwer/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" />
</div>
<div id="sidebar_left" class="float"><jdoc:include type="modules"
name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float"><jdoc:include type="modules"
name="right" /></div>
<div id="footer" class="clear"><jdoc:include type="modules"
name="footer" /></div>
٥٤
‫ٌطور‪MTWER.COM‬‬
‫م‬
‫______________________________________________________‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الحین فى داخل مجلد القالب ‪ temp_mtwer‬راح نسوى مجلد ونسمیه‪css‬‬
‫داخل ھذا المجلد نسوى ملف ونسمیه‪template.css‬‬
‫#صوره ٨‬
‫وراح نضیف له ھذا الكود الخاص بالتعديل على البوسشن والموديلات‬
‫كود:‬
‫{*‬
‫;0 :‪padding‬‬
‫;0:‪margin‬‬
‫}‬
‫{ ‪ul‬‬
‫;‪list-style:none‬‬
‫}‬
‫{ ‪.float‬‬
‫;‪float: left‬‬
‫}‬
‫{ ‪.clear‬‬
‫;‪clear: both‬‬
‫}‬
‫{ ‪#container‬‬
‫;‪width:960px‬‬
‫٥٥‬
MTWER.COM‫ٌطور‬
‫م‬