إغلاق


اضغط هنا لتنزيل آخر إصدارة من زووبس





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



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



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

انقر لمشاهدة الصورة الأصلية في نافذة جديدة


اليوم أريد أن أقدم لكم سلسلة من الدروس
انقر لمشاهدة الصورة الأصلية في نافذة جديدة


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

هذه السلسلة موجه بالخصوص للذين لديهم خبرة مع 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

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#2
جزاك الله الجنة باذنه .. شرح قوي و مفيد وسلسلة انشاء يستفيد منها الكل

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#3
أعتذر عن التأخر في إعداد السلسلة و إن شاء الله في أقرب وقت ممكن أضع الدرس الثاني

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#4
شكرا طارق درس راءع جزاك الله خير

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#5
شكرا لك على هذه السلسلة الرائعة
وبانتظار الدرس الثاني

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#6
شكرا حبيبى طارق دروسك ممتعة ومتميزة للغاية وكلها جديدة .. انت رائع حقا
ان شاء الله يتم نقلها للقسم التعليمى

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#7
نشكر الاستاذ طارق على دروسة الرائعة والعمل على اغناء مكتبة دروس عرب زووبس بدروسة القيمة
تم اضافة الدرس للقسم التعليمى

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


زائر
رد: { سلسلة الدروس } الدرس 01: ملف system_redirect.html
#8
شكرا لك أخ طارق درس رائعـ و مفيد

طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى







يمكنك قراءة موضوع.
لا يمكنك إضافة موضوع جديد.
لا يمكنك الرد على المشاركات.
لا يمكنك تحرير مشاركاتك.
لا يمكنك حذف مشاركاتك.
لا يمكنك إضافة إستفتاء جديد.
يمكنك التصويت في الإستفتاءات.
لا يمكنك إرفاق ملفات في مشاركاتك.
لا يمكنك المشاركة بدون موافقة المشرف.
You cannot use topic type.
You cannot use HTML syntax.
You cannot use signature.

[بحث متقدم]



موقع الدعم العربي لنظام إدارة المحتوى زووبس


مواقع صديقة: رياض القرآن ، خلفيات شاشة ، المجلة السعودية للسيارات ، أهرام العلمية ، ابن مصر ، برامج عربية و معربة ، ماسنجر شبوة.نت ، ضفاف ، العاب