اليوم أريد أن أقدم لكم سلسلة من الدروس
هدف هذه السلسلة هو تعديل المواقع في مستوى آخر
فالذي يريد تغيير شكل موقعه
يظن أنه محصور بملفات الثيم
بينما زووبس توفر لك وسيلة أخرى
لتصميم موقع حسب حاجياتك و ذلك عن طريق تعديل التومبلاتات
هذه السلسلة موجه بالخصوص للذين لديهم خبرة مع html/css
و عامة لكل من يريد موقع أكثر تفردا
و للذين ليست لهم خبرة مع اللغتين
أنصحهم و بشدة بتعلمهما
لبسساطتهما و لكونهما ستعطيانك سلطة أكبر على زووبس
http://ar.html.net
لذا في كل درس سيتم وضع تومبلات واحد تحت المجهر
حيث سيتم شرح مكوناته و أكواد السمارتي المستعملة به
و كيفية تحسينه و بعض الإضافات الممكنة إليه
الفهرست
مقدمة : كيفية التعديل على التومبلات
الدرس 01: ملف system_redirect.html
الدرس 01: ملف system_redirect.html
ستجدون هذا الملف في modules/system/templates
خدوا منه نسخة و ضعوه في /modules/system/ثيم موقعك/themes
الآن كل التغييرات التي سنقوم بها ستكون على الموجود في /modules/system/ثيم موقعك/themes
محتواه هو
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="Refresh" content="<{$time}>; url=<{$url}>" />
<meta name="generator" content="Bluefish 2.0.0" />
<link rel="shortcut icon" type="image/ico" href="<{$xoops_url}>/favicon.ico" />
<title><{$xoops_sitename}></title>
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" />
</head>
<body>
<div style="text-align:center; background-color: #EBEBEB; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight : bold;">
<h4><{$message}></h4>
<p><{$lang_ifnotreload}></p>
</div>
<{if $xoops_logdump != ''}><div><{$xoops_logdump}></div><{/if}>
</body>
</html>
شرح أكواد سمارتي :
- أكواد السمارتي : <{xoops_charset}> <{$time}> <{$url$}> خاصة بإعدادات التنقل بين الصفحات و الوقت اللازم، لذا لا حاجة لنا بها
- كود <{xoops_url$}> يعني رابط الموقع
- كود <{xoops_sitename$}> يعني إسم الموقع
- كود <{xoops_themecss$}> يعطي رابط ملف الستايل style.css
- كود <{message$}> يظهر جملة حسب سياق الإنتقال (لقد تم تسجيل خروجك،تم تعديل القسم بنجاح ...)
- كود <{lang_ifnotreload$}> يظهر جملة "اذا لم يتم تحويلك يرجى الضغط هنا"
- كود <{if $xoops_logdump != ''}><{$xoops_logdump}> <{/if}> خا بإظهار الأخطاء في حالة تفعيلها
تغيير تصميم الصفحة :لتغيير تصميم الصفحة سنستعمل هذا السطر
<div style="text-align:center; background-color: #EBEBEB; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight : bold;">
و نحذف ما هو موجود مكان النقط "....."=style ليصبح
<div style="">
ثم سنضيف خياراتنا الخاصة بدل التي حذفناها
- الخاصية " ;margin:1px " تتحكم بمسافة الهامش
- الخاصية " ;text-align:center " تتحكم بمحاذاة النص، يكفي استبدال center ب right أو left
- الخاصية " ;background-color: #EBEBEB " تتحكم بلون خلفية المستطيل، يكفي استبدال EBEBEB# بكود من هنا
- الخاصية " ;color: #000000 " تتحكم بلون النص، يكفي استبدال EBEBEB# بكود من هنا
- الخاصية " ;border: 1px solid #AAAAAA " تتحكم بحدود المستطيل حيث 1px يمثل السمك،
و solid نوع الخط يعني صلب و يمكن أن يكون منقط dotted، وAAAAAA# تعني اللون
بالنسبة للمبتدئين ب css أنصحهم فقط بتغيير القيم ليفهموا بالضبط عملها إضافة صورة التحميل :لإضافة صورة التنقل مثل هاته  تجب إضافة هذا السطر
<br /><img src="<{xoImgUrl icons/loading.gif}>" alt="<{$message}>"/>
بعد
<h4><{$message}></h4>
و يمكنكم الحصول على الصورة من هذا الموقع حسب رغبتكم http://ajaxload.infoو وضعها في المجلد icons في الثيم يجدر الإنتباه أن الموقع يعمل بنفس نظام الألوان ل css يعني يجب وضع كود من هنا
قريبا الدرس 02: ملف system_siteclosed.html
التاريخ : 2010/10/9
القسم : دروس الهاكات
رابط هذا الدرس : http://www.arabxoops.com/modules/xfsection/article.php?articleid=182
| 