{ سلسلة الدروس } الدرس 01: ملف system_redirect.html [الثيمات و القوالب]

عرب زووبس الصفحة الرئيسية

صفحة المنتدى الرئيسية » منتديات الدعم الفني » الثيمات و القوالب » { سلسلة الدروس } الدرس 01: ملف system_redirect.html

يتصفح المنتدى الآن: 1 زائر

أسفل الموضوع السابق الموضوع التالي إشترك لتكتب موضوع

Tarik

{ سلسلة الدروس } الدرس 01: ملف system_redirect.html

مشرف

اليوم أريد أن أقدم لكم سلسلة من الدروس

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

هذه السلسلة موجه بالخصوص للذين لديهم خبرة مع 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 != ''}><div><{$xoops_logdump}></div><{/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/8 12:04

birnet

رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html

عضو مميز

جزاك الله الجنة باذنه .. شرح قوي و مفيد وسلسلة انشاء يستفيد منها الكل

أرسلت بتاريخ: 2010/10/8 18:32

Tarik

رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html

مشرف

أعتذر عن التأخر في إعداد السلسلة و إن شاء الله في أقرب وقت ممكن أضع الدرس الثاني

أرسلت بتاريخ: 2010/10/9 9:46

amzian

رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html

عضو مميز

شكرا طارق درس راءع جزاك الله خير

أرسلت بتاريخ: 2010/10/9 9:49

Khalid YS

رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html

مشرف

شكرا لك على هذه السلسلة الرائعة
وبانتظار الدرس الثاني

أرسلت بتاريخ: 2010/10/9 12:47

هاني سلام

رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html

فريق الدعم الفني

شكرا حبيبى طارق دروسك ممتعة ومتميزة للغاية وكلها جديدة .. انت رائع حقا
ان شاء الله يتم نقلها للقسم التعليمى

أرسلت بتاريخ: 2010/10/9 16:02

____________________
السلام عليكم .. تعتبر زووبس من افضل المجلات لادارة محتوى المواقع .. ولكن يجب ان تتقنها او تعلم المزيد عنها قبل الشروع فى انشاء موقعك .. عليك اولا الذهاب الى القسم التعليمى ورابطة من من هنــــــــا ...