حصرياً : شرح عمل هيدر ثابت لمنتداك
السلام عليكم و رحمة الله و بركاته
الحمد لله رب العالمين و الصلاة و السلام علي أشرف الخلق و المرسلين .. سيدنا محمد عليه أفضل الصلاة و السلام
أمــــا بعد ،،،
اليوم أعود لكم بدرس بسيط جداً عبارة عن إضافة لمسة جمالية لمنتداك ، إنها خاصية الـ Fixed Header أو الهيدر الثابت
تم طرح هذه الخاصية ضمن المميزات الحصرية لقالب كيبورد الإصدار 1.1 ، كما يمكنك الإطلاع على القالب من هنا :
حصرياً : قالب كيبورد الإصدار 1.1 بمميزات حصرية
1 - قم بإضافة هذا الكلاس إلى ملف الـ CSS الخاص بالتصميم
.fixed_header
{
background-image:url('../images/header_bg.png');
height: 79px;
width:100%;
position:absolute;
position:fixed;
}
أما إذا كنت لا تجيد التصميم و تريد تدرج لونى بسيط للهيدر فأضف الكلاس التالى
.fixed_header
{
background: #375E6A;
background: -moz-linear-gradient(top, #4B8091 0%, #375E6A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4B8091), color-stop(100%,#375E6A));
height: 79px;
width:100%;
position:absolute;
position:fixed;
border-bottom: 2px solid #000;
}
2 - قم بتحرير قالب الـ header إما عن طريق لوحة تحكم المدير من خلال
لوحة تحكم الإدارة » القوالب »
التصميم الخاص بموقعك » تحرير : header ، أو عن طريق برنامج Notepad++
3 - إبحث عن
أضف أسفلها مباشرة
<div style="position:fixed;left:0px;top:0px; z-index: 1000; width: 100%; height: 79px;" class="fixed_header">
ثم إبحث عن
أضف أسفلها مباشرة
ثم إضغط على
حفظ وإعادة تحميل
4 - قم بتصميم خلفية للهيدر بنفس الإرتفاع إذا كان لا يوجد خلفية مناسبة (
لا يهم عرض الخلفية ) ، أو قم بتعيين خلفية عبارة عن لون موحد أو تدرج ثابت
لعمل تدرج لونى عن طريق الـ CSS إنسخ الكود التالى
background: #000;
background: -moz-linear-gradient(top, #fff 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#000));
و أضفه بدلاً من مع تغيير "
------ " بكود اللون
هذه الخطوة لا ينصح بها كثيراً للمبتدئين
السطر الأول عبارة عن لون الخلفية المؤقت الذى سيظهر عند الإتصال البطىء و هو غير هام ، و أما السطرين الثانى و الثالث هو عبارة عن التدرج اللونى .. اللون الأبيض الذى يحمل الكود fff هو اللون العلوى للتدرج أما اللون الأسود الذى يحمل الكود 000 يمثل اللون السفلى للتدرج و يمكنك التعديل بكل سهولة و الصورة التالية توضح ما أقصده
الآن أنت لا تعرف كيف تقوم بعمل تدرج لون متناسق الألوان ، لذلك أنصحك بالإطلاع على موقع
Adobe Kuler
إنتهى ... و الآن أصبح لديك هيدر ثابت لمنتداك
نرجو منكم التقييم من خلال هذا الزر 
إذا عجبكم الدرس كما نرحب بأى إقتراح أو نقد بناء علي هذا الدرس
تفاصيل المرفقات : قالب الـ header مُعدل على التصميم الإفتراضى + الكلاس المطلوب إضافته فى ملف الـ CSS + الدرس فى ملف TXT
حجم الملف : 38.9 KB - نوع الملف : RAR
للسادة المصممين : يحذر تطبيق هذا الدرس على أى تصميم بدون ذكر حقوق النشر فى موضوع التصميم نفسه
[1]
حصرياً : شرح عمل هيدر ثابت لمنتداك
تحميل محتوى الموضوع
عرض نسخة صالحة للطباعة
أرسل هذا الموضوع إلى صديق