الموضوع: [درس]وضع صورة للهيدر

السلام عليكم
سأشرح اليوم كيفية وضع صورة للهيدر .
أولا هناك طريقتين:
الأولى تعتمد على وضع الصورة كما هي باستخدام وسم الصورة.
و الثانية تعتمد على وضع خلفية للهيدر و التحكم بها من خلال ملفات الCSS.
سأحاول شرح الطريقتين بالتفصيل فالنتوكل على الله :
الطريقة الأولى :

إفتح ملف الــoverall_header.html بواسطة المفكرة أو برنامج الفرونت بيج و
أفضل برنامج الفرونت بيج لأن الأكواد فيه مرتبة و منسقة . ستجد هذا الملف
في مجلد template.
ابحث عن :

كود:

 <div id="site-description"> {SITE_LOGO_IMG}
<h1>{SITENAME}</h1> 

{SITE_DESCRIPTION}</p>
<p style="display: none;">{L_SKIP}</p> </div> <!--
IF S_DISPLAY_SEARCH and not S_IN_SEARCH --> <div
id="search-box"> <form action="{U_SEARCH}" method="post"
id="search"> <fieldset> <input name="keywords"
id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}"
class="inputbox search" value="<!-- IF
SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE
-->{L_SEARCH_MINI}"
onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';"
onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" />
 {L_SEARCH_ADV}
{S_SEARCH_HIDDEN_FIELDS} </fieldset> </form> </div>

استبدلها بـ :

كود:

[img]{T_THEME_PATH}/images/bg_header2.gif[/img]

حيث bg_header2.gif هي الصورة التي تريد وضعها .
ملاحظة: ستفقد شريط البحث .
و ستكون النتيجة هكذا:
[bigimg:3gl5q8t9]http://www.science.43i.net/add/header.gif[/bigimg:3gl5q8t9]
طبعا الصورة صغيرة و لذلك بقي الجانب الأيسر فارغا قليلا أما أنت فعليك
إختيار صورة كاملة يكون الطول فيها حوالي 970 بكسل.
الطريقة الثانية:
1- إفتح ملف الــoverall_header.html بواسطة المفكرة أو برنامج الفرونت
بيج و ابحث عن:

كود:

<div id="site-description"> {SITE_LOGO_IMG}
<h1>{SITENAME}</h1> 

{SITE_DESCRIPTION}</p>
<p style="display: none;">{L_SKIP}</p> </div>

و احذفها و ذلك للتخلص من اسم الموقع و الوصف .
2-إفتح ملف colours.css الموجود في مجلد theme إبحث عن:

كود:

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

عوضه بــ

كود:

.headerbar { background-color: #FFF; background-image:
url("{T_THEME_PATH}/images/bg_header2.gif");
background-repeat:no-repeat; color: #FFFFFF;
}

إستبدل bg_header2.gif باسم الصورة التي تريد وضعها بعدما تضعها طبعا في
مجلد iimages الموجود في مجلد theme
ستكون النتيجة هكذا :
[bigimg:3gl5q8t9]http://www.science.43i.net/add/header2.gif[/bigimg:3gl5q8t9]
تلاحظ أن الصورة لم تظهر بشكل كامل و عليه
إفتح ملف common.css و ابحث عن:

كود:

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

و استبدله بـ:

كود:

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

و غير 7% بما يناسبك.
ستكون النتيجة هكذا
[bigimg:3gl5q8t9]http://www.science.43i.net/add/header3.gif[/bigimg:3gl5q8t9]
و بهذا نكون قد إنتهينا أرجو أن تكونوا قد استفدتم