[درس متكامل] التعديلات الممكنة على هيدر البروسيلفر

السلام عليكم و رحمة الله و بركاته

هناك العديد من الدروس في مكتبة الدروس تتكلم حول عدة تعديلات ممكنة في هيدر البروسيلفر و رغبت في عمل درس متكامل يضم مجمل التعديلات التي يرغب العديد من المستخدمين بعملها في هيدر البروسيلفر، في الحقيقة وجدت http://www.phpbb.com/community/viewtopic.php?f=74&t=639205 و قد ضم معظم النقاط التي رغبت بسردها في هذا الدرس فاكتفيت بتعريبه و إن شاء الله أقوم بإضافة نقاط أخرى لهذا الدرس بحسب طلبات الأعضاء.

* هذا الدرس خاص بستايل بروسيلفر

* يفضل دائماً استخدام برنامج Notepad++ في التعديل على ملفات المنتدى.

* لا تنسَ بعد تطبيقك لأي من جزئيات الدرس أن تقوم دائماً بتحديث القوالب و الثيمات من لوحة التحكم الرئيسية =>الستايلات=>القوالبالثيمات=>بروسيلفر=>تحديث

تغيير صورة الهيدر

1) قم برفع الصورة إلى المجلد styles/prosilver/theme/images/

2) افتح الملف styles/prosilver/theme/common.css

ابحث عن:

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;

أضف بعده:

   height: 100px;

مع تغييير القيمة 100 إلى ارتفاع الصورة التي رفعتها

3) افتح الملف styles/prosilver/theme/colours.css

ابحث عن:

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

قم بتغيير bg_header.gif إلى اسم الصورة التي رفعتها

4) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن:

أضف قبله:

ملاحظة: الارتفاع هنا يجب أن يكون اقل بـ10 بكسل من ارتفاع الصورة الفعلي

ابحث عن:

{L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}
            
            
         
      

أضف بعده:

5) قم بتحديث القوالب و الثيمات لـ بروسيلفر

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

إزالة الـ Logo

1) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن و احذف:

{SITE_LOGO_IMG}

2) قم بتحديث القوالب لـ بروسيلفر

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

إزالة اسم و وصف الموقع

1) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن و احذف:

{SITENAME}
{SITE_DESCRIPTION}

أو قم بحذف السطر الثاني فقط في حال أردت حذف وصف الموقع و الإبقاء على اسم الموقع

2) قم بتحديث القوالب لـ بروسيلفر

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

إزالة صندوق البحث

1) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن و احذف:

2) قم بتحديث القوالب لـ بروسيلفر

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

إضافة صور عشوائية للهيدر

1) قم بإعداد مجموعة الصور التي تريد ظهورها عشوائياً في الهيدر و قم بتسميتها على النمط التالي:

 header_random_1.EXTENSION

مع استبدال كلمة EXTENSION بإمتداد الصور و الذي سيكون إما (gif, png, jpg) المهم أن تكون جميع الصور بنفس الامتداد!

2) ارفع جميع الصور إلى المجلد styles/prosilver/theme/images/

3) افتح الملف includes/functions.php

ابحث عن:

'T_STYLESHEET_NAME'      => $user->theme['theme_name'],

أضف بعده:

'RANDOM_HEADER'      => mt_rand(1, XXX),

استبدل XXX بعدد الصور التي قمت برفعها .. يعني لو اجمالي الصور المرفوعة هو ثلاث صور استبدل XXX بـ 3 و هكذا …

4) افتح الملف:

style.php

ابحث عن:

      '{S_USER_LANG}'            => $user['user_lang']

استبدله بـ :

      '{S_USER_LANG}'            => $user['user_lang'],
      '{RANDOM_HEADER}'      => mt_rand(1, XXX)

كما عملنا في الخطوة السابقة، استبدل XXX بعدد الصور التي قمت برفعها .. يعني لو اجمالي الصور المرفوعة هو ثلاث صور استبدل XXX بـ 3 و هكذا …

5) افتح الملف styles/prosilver/theme/colours.css

ابحث عن:

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}

استبدله بـ :

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.EXTENSION");
   color: #FFFFFF;
}

مع استبدال كلمة EXTENSION بإمتداد الصور و الذي سيكون إما (gif, png, jpg) كما قلنا في الخطوة الأولى

6) قم بتحديث الثيمات لـ بروسيلفر

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

استبدال أيقونة “تكبير النص” بصندوق البحث

1) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن:

{L_CHANGE_FONT_SIZE}

استبدله بـ :

2) افتح الملف styles/prosilver/theme/common.css

ابحث عن:

#search-box {
   color: #FFFFFF;
   position: relative;
   margin-top: 30px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

استبدله بـ :

#search-box {
  color: #FFFFFF;
  position: relative;
  display: block;
  text-align: right;
  white-space: nowrap; /* For Opera */
  line-height: 1em;
}

3) قم بتحديث القوالب و الثيمات لـ بروسيلفر.

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

إضافة أيقونة البحث للقائمة العلوية Navigation

1) افتح الملف styles/prosilver/template/overall_header.html

ابحث عن:

{L_FAQ}

أضف بعده:

{L_SEARCH}

2) قم بتحديث القوالب لـ بروسيلفر.

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

انتهى الدرس و الحمدلله 😛

مع تمنياتي للجميع بالتوفيق و لا تنسونا من دعوة صالحة في ظهر الغيب 🙂

تم اضافة الموضوع الاصلى بواسطة العضو Ghalebi