دليل الموزع

يمكنك تعديل وتخصيص تصميم موقع الويب الخاص بك عن طريق إضافة الصور والشعارات، أو تخصيص عناصر معينة من الموقع عبر بروتوكول نقل الملفات (إف تي بي)

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

يمكنك الدخول إلى موقع الويب الخاص بك عن طريق بروتوكول نقل الملفات باستخدام برنامج إدارة ملفات متخصص مثل فايلزيلا (https://filezilla-project.org) أو توتال كوماندر (https://www.ghisler.com)

ابحث عن بريد إلكتروني تأكيدي قادم من آي-بيلد-آب على عنوان البريد الإلكتروني الذي قدمته - ستجد بيانات الاعتماد لبروتوكول نقل الملفات (إف تي بي) الخاصة بك (إذا لم تعثر عليه، تواصل مع دعم العملاء على [email protected]). قم بإعداد اتصال بروتوكول نقل البيانات (إف تي بي) الخاص بك

إذا كنت لا تعلم كيفية إعداد عميل بروتوكول نقل الملفات الخاص بك، يرجى الرجوع إلى الوثائق/ملفات المساعدة الرسمية:

• FileZilla: http://wiki.filezilla-project.org/Documentation
• Total Commander: http://www.ghisler.com/faq.htm

أساسا، تتلخص عملية العمل مع عميل بروتوكول نقل الملفات الخاص بك على موقعك في الشروط الأساسية التالية:

• قم بفتح العميل،
• أدخل اسم المضيف لموقع الويب الخاص بك، واسم المستخدم وكلمة المرور،
• انقر فوق زر "توصيل" للوصول إلى محتويات دلائل الملقم الخاص بك

هناك مجلدان يمكن الوصول إليهما تحت الحساب الخاص بك:

• "التصميم" حيث يمكنك تخزين ملفات ووسائط صفحات الطرز المتراصة (سي إس إٍس) مثل الصور. يحتوي المجلد على ملفين logo.png و style.css>
  
  
  تحرير ملف style.css، يمكنك تغيير طريقة عرض الموقع، بما في ذلك أحجام الخطوط وألوان وصور الخلفية وما إلى ذلك. ويمكنك رفع المزيد من ملفات الوسائط وتغيير ملف logo.png لتخصيص الشعار على الموقع الخاص بك
• القوالب" التي تحتوي على قوالب لموقع الويب الخاص بك:
  
  

ملف "header.tpl" هو المسؤول عن العنوان الرأسي للصفحات الداخلية:

ملف "footer.tpl" هو المسؤول عن تذييل الصفحات الداخلية:

ملف "index.tpl" هو المسؤول عن الصفحة الرئيسية بشكل عام، بما في ذلك العنوان الرأسي وتذييل الصفح

ملف "meta.tpl" عبارة عن ملف خدمة للكلمات المفتاحية التعريفية (ميتا) وملفات السي إس إس

لتغيير مظهر موقع الويب الخاص بك تحتاج إلى إجراء تغييرات في الملفات التالية:

• Header.tpl
• Footer.tpl
• Index.tpl
• Styles.css
• Style_new.css

يرجى ملاحظة أن العنوان الرأسي وتذييل الصفحة مضمنين في الصفحة الرئيسية. لتعيين نفس العنوان الرأسي والتذييل على كافة صفحات الموقع تحتاج إلى تغيير الثلاث ملفات:

• header.tpl,
• footer.tpl, and
• index.tpl.

للحفاظ على القدرة على تعديل القائمة من لوحة الإدارة الخاصة بك، تحتاج إلى تضمين الملفات التالية:

• header.tpl,
• footer.tpl, and
• index.tpl.

العلامات التالية:

• {$M_MENU} - القائمة الرئيسية (في الجزء العلوي من الصفحة)
• {$B_MENU} - تذييل القائمة (في الجزء السفلي من الصفحة)

ضع تلك العلامات في المكان حيث ترغب في مشاهدة مخرج القائمة

إنشاء صورة بصيغة بي إن جي (بعرض 200 بكسل وبإرتفاع 70 بكسل) واستبدالها بالصورة الموجودة هي أسرع طريقة لتغيير الشعار على موقعك:

• افتح عميل بروتوكول نقل الملفات الخاص بك، ثم قم بإدخال معلومات الدخول إلى بروتوكول نقل الملفات، ثم قم بالاتصال بالملقم المثبت عليه موقعك الخاص
• حدد مكان الملف الذي يحتوي الشعار في المجلد المناسب. ثم افتح الدليل من على جهاز الكمبيوتر حيث يوجد ملف الشعار المخصص، بعد ذلك قم بإعادة تسميته إلى logo.png لتجنب تغيير مرجع ملف الشعار في القوالب
• ارفع الشعار المخصص الخاص بك على الملقم

إذا كنت بحاجة إلى المزيد من التخصيص مما توفره لك لوحة الإدارة، نوصيك باستخدام تسهيلات السي إس إس. سوف تساعدك التلميحات والنصائح التالية في تخصيص موقع الويب الخاص بك عن طريق السي إس إس

توضع الأنماط المذكورة أدناه في ملف new_style.css المتوفر عن طريق بروتوكول نقل الملفات. ويمكنك إضافة الأنماط الإضافية التي تحتاجها. يمكنك أيضا استخدام ملف style.css لإنشاء أنماط خاصة بك

الشعار/اللوجو

إنشاء صورة بصيغة بي إن جي (بعرض 200 بكسل وبإرتفاع 40 بكسل) واستبدالها بالصورة الموجودة هي أسرع طريقة لتغيير الشعار على موقعك:

• افتح عميل بروتوكول نقل الملفات الخاص بك، ثم قم بإدخال معلومات الدخول إلى بروتوكول نقل الملفات، ثم قم بالاتصال بالملقم المثبت عليه موقعك الخاص
• حدد مكان ملف الشعار على الملقم. ثم حدد مكان صورة من على جهاز الكمبيوتر الخاص بك، بعد ذلك قم بإعادة تسميته إلى logo.png (لتجنب تغيير مرجع ملف الشعار في القوالب )
• ارفع الشعار المخصص الخاص بك على الملقم

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

#logo, #main_nav li #logo {
   background: url(REMOTE_SERVER/logo.png) no-repeat scroll 0 0 transparent;
}

المثال التالي يوضح كيفية تغيير عرض وارتفاع الشعار:

#logo, #main_nav li #logo {
   height: 100px; //change logoheight
   width: 250px; //change logo width
}

ملاحظة: نوصي باستخدام صور بصيغة بي إن جي بخلفية شفافة

رأس الصفحة

إنشاء صورة بصيغة بي إن جي (بعرض 1 بكسل وبإرتفاع 67 بكسل على الأقل) واستبدالها بالصورة الموجودة هي أسرع طريقة لتغيير خلفية رأس الصفحة على موقعك:

• افتح عميل بروتوكول نقل الملفات الخاص بك، ثم قم بإدخال معلومات الدخول إلى بروتوكول نقل الملفات، ثم قم بالاتصال بالملقم المثبت عليه موقعك الخاص
• حدد مكان ملف الخلفية على الملقم. ثم حدد مكان صورة الخلفية من على جهاز الكمبيوتر الخاص بك، بعد ذلك قم بإعادة تسميتها إلى top_bar_bg.png (لتجنب تغيير مرجع ملف الشعار في القوالب)
• ارفع الصورة الخاصة بك على الملقم

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

#header .top_bar {
   background: url(REMOTE_SERVER /top_bar_bg.png) repeat-x;
}

ملاحظة: يمكنك استخدام أي صيغة من صيغ الصور التالية: jpg أو png أو gif

المثال التالي يوضح كيفية تغيير عرض وارتفاع رأس الصفحة:

#header .top_bar {
height: 100px; //change header height
}
.wrap {
   width: 1004px; //change header width
   margin: 0 auto;
   position: relative;
}

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

#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

قائمة رأس الصفحة

لتخصيص مظهر قائمة رأس الصفحة، استخدم الأنماط التالية:

#main_nav li a {
   height: 40px;
   padding: 0px; //no indent between the items
   font: 10px/40px Arial, Helvetica, sans-serif; //set font size
   color: red; //red color of the menu items
   text-shadow: 0 1px 0 rgba(255,255,255,0.6);
   display: block;
}

للتخلص من الحدود في القائمة:

#main_nav li {
   height: 40px;
   border-right: none; //no borders In menu line
   float: left;
}

قائمة المستوى الثاني لرأس الصفحة

يوضح المثال التالي كيفية تخصيص مربع قائمة المستوى الثاني:

.sub-menu {
   background: #EFEFEF !important; //box beckground
   border: 1px solid #fff; //box border
   -webkit-border-radius: 8px; //box border radius
   -moz-border-radius: 8px; // box border radius
   border-radius: 8px; // box border radius
   position: relative;
   padding: 6px 0 !important;
}
.sub-menu: after {
   background: url(/media/img/submenu_ugol.png) no-repeat 0 0; //upper arrow
   position: absolute;
   width: 24px; //arrow width
   height: 13px; //arrow height
   top: -13px; //arrow top position
   left: 20px; //arrow left position
   margin-left: -12px;
}

لتعديل عنصر في قائمة المستوى الثاني، استخدم الكود البرمجي التالي:

#main_nav li a {
   height: 40px; //height od the ongle item
   padding: 0 28px;
   font: 16px/40px Arial, Helvetica, sans-serif;
   color: #000; //font colour
   text-shadow: 0 1px 0 rgba(255,255,255,0.6); //text-shadow
   display: block;
} Language toggle

تبديل اللغة

تغيير موضع عنصر التحكم في تبديل اللغة:

#header .lang_switch {
   float: right; //the box floats to the right
   margin: 5px 30px;
   padding-right: 175px; //shift on the right
}

تخصيص مظهر مربع اللغة الحالي:

#header .lang_switch li {
   background-color: #A0B0B6;
   background-image: -o-linear-gradient(top, #A0B0B6, #637881);
   background-repeat: repeat-x;
   border-radius: 4px;
   box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.298);
   display: block;
   position: relative;
}
#header .lang_switch a {
   background: url("/images/lang_arrow2.png") 95% 55% no-repeat transparent; //change    this image to change default arrows
   color: #FFFFFF;
   display: block;
   font-size: 12px;
   line-height: 1.8;
   margin: 3px 0px 0px;
   padding-left: 5px;
   padding-right: 20px;
   text-decoration: none;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.298);
}

Social icons

لتخصيص الأيقونات الاجتماعية المعروضة على موقع الويب الخاص بك، قم بإنشاء ثلاثة صور (بعرض 56 بكسل وارتفاع 58 بكسل) وارفعهم على الملقم عن طريق بروتوكول نقل الملفات. ثم قم بتعديل الأنماط كما هو موضح أدناه:

#header .social_icons_new .facebook {
   background: url(images/facebook.png);
}
#header .social_icons_new .twitter {
   background: url(images/twitter.png);
}
#header .social_icons_new .rss {
   background: url(images/rss.png);
}

لإخفاء المجموعة الاجتماعية، قم بتعديل النمط كما هو موضح أدناه:

#header .social_icons_new a {
   display:none; //hides the the social block
   float: left;
   width: 56px;
   height: 58px;
   background: url(images/sprite.png);
   margin: 0 5px;
}

التذييل

لتغيير لون خلفية منطقة تذييل الصفحة، قم بإنشاء صورة بصيغة بي إن جي واستبدلها بالصورة الموجودة:

• افتح عميل بروتوكول نقل الملفات الخاص بك، ثم قم بإدخال معلومات الدخول إلى بروتوكول نقل الملفات، ثم قم بالاتصال بالملقم المثبت عليه موقعك الخاص
• ... حدد مكان ملف الخلفية على الملقم. ثم حدد مكان صورة الخلفية من على جهاز الكمبيوتر الخاص بك، بعد ذلك قم بإعادة تسميتها إلى footer_pattern.png (لتجنب تغيير مرجع ملف الشعار في القوالب)
• ارفع الصورة الخاصة بك على الملقم

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

#footer _int {
   background: url(REMOTE_SERVER / footer_pattern.png) repeat-x;
}

ملاحظة: يمكنك استخدام أي صيغة من صيغ الصور التالية لصورة الخلفية: jpg أو png أو gif

يوضح المثال التالي كيفية تغيير عرض وارتفاع منطقة تذييل الصفحة:

#footer_int .wrap {
   background: url(images/footer_shadow.png) no-repeat center top; //upper footer shadow
   padding: 22px 0;
}
.wrap {
   width: 1004px; //footer width
   margin: 0 auto;
   position: relative;
}

{t}If you want the footer area to fit the page width, include the following code:{/t} {literal}#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

القائمة تذييل الصفحة

يوصف كود السي إس إس الموضح أدناه منطقة قائمة تذييل الصفحة:

#footer_int #footer_nav li {
   float: left;
   height: 12px;
   border-left: 1px solid #6f657d; //devider on the left
   padding: 0 12px;
}

قاعدة السي إس إس لعنصر قائمة تذييل الصفحة:

#footer_int #footer_nav li a {
   color: #75727a; //item color
}

إنشاء زر للتطبيق

تخصيص زر "إنشاء تطبيق جديد":

.border-gradient-title .border-center {
   display: inline-block;
   z-index: 10;
   position: relative;
   margin: 0 auto;
   width: auto;
   background-color: #fff; //background image
   padding: 0 10px;
}
.btn_border {
   padding: 9px;
   padding-bottom: 12px;
   border: 1px solid #DFDFDF; //background image
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.btn_create_orange {
   font-size: 18px; //text color
   text-transform: uppercase;
   padding: 8px 20px 6px 13px;
   box-shadow: 0px 3px 0px #DB430D; //box shadow
   border: 0px;
   baclground: red; //box background
   -webkit-box-shadow: 0px 3px 0px #DB430D; //text shadow
}

إنشاء قالب موقع من الصفر

يمكنك إنشاء قالب لموقع الويب الخاص بك من الصفر. للتأكد من عمل كافة الوظائف مع قالبك المخصص، اتبع القواعد أدناه:

1. نحن نستخدم محرك سمارتي للعمل على القوالب، لذلك يجب إنشاء القالب الخاص بك بنمط سمارتي
2. للتأكد من القالب الخاص بك يعمل، قم برفع أربعة ملفات إلزامية إلى مجلد القوالب:
   • Index.tpl - الصفحة الرئيسية
   • Header.tpl - رأس الموقع
   • Footer.tpl - تذييل الموقع
   • Meta.tpl
   جميع الملفات الأخرى اختيارية. ولكن من المستحسن الحفاظ على بنية القالب، كما ذكر أعلاه
3. للحفاظ على القدرة على تعديل القائمة من لوحة الإدارة الخاصة بك، تحتاج إلى تضمين العلامات:
   • {$M_MENU} - القائمة الرئيسية (في الجزء العلوي من الصفحة)
   • {$B_MENU} - تذييل القائمة (في الجزء السفلي من الصفحة)
   to these files:
   • Header.tpl
   • Footer.tpl
   • Index.tpl
   ضع تلك العلامات في المكان حيث ترغب في مشاهدة مخرج القائمة
4. للحفاظ على القدرة على تبديل اللغات، قم بدمج هذا الكود في ملفي index.tpl وheader.tpl:
   
   {include file="common/reseller/lang_switch.tpl.php"}
   
   Localizations created in your Admin Panel will be used for your site.
5. للحفاظ على القدرة على تعديل إعدادات الفيسبوك وتويتر من لوحة الإدارة، استخدم المفاتيح التالية في الروابط:
   • #facebook#
   • #twitter#

الآن بت تعرف كيفية تخصيص واجهة الموزع الخاصة بك وإدارة قاعدة العملاء، ونشر التطبيقات لعملائك، وإدارة القوالب

كلما بنيت قاعدة متينة من العملاء واستمررت في تلبية احتياجات عملائك، كلما بنيت أساس متين ودائم لنجاح مستمر كموزع لخدمات آي-بيلد-آب