السلام عليكم و رحمة الله و بركاته
الحمد لله رب العالمين و الصلاة و السلام علي أشرف الخلق و المرسلين .. سيدنا محمد عليه أفضل الصلاة و السلام
أمــــا بعد ،،،
اليوم أعود لكم بدرس بسيط جداً عبارة عن إضافة لمسة جمالية لمنتداك ، إنها خاصية الـ Fixed Header أو الهيدر الثابت
تم طرح هذه الخاصية ضمن المميزات الحصرية لقالب كيبورد الإصدار 1.1 ، كما يمكنك الإطلاع على القالب من هنا : حصرياً : قالب كيبورد الإصدار 1.1 بمميزات حصرية
1 - قم بإضافة هذا الكلاس إلى ملف الـ CSS الخاص بالتصميم
CODE
.fixed_header
{
background-image:url('images/header_bg.png');
height: 79px;
width:100%;
position:absolute;
position:fixed;
}
هذا إذا كان لديك خلفية مناسبة للهيدر
أما إذا كنت لا تجيد التصميم و تريد تدرج لونى بسيط للهيدر فأضف الكلاس التالى
CODE
.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;
}
و سوف يتم شرح التفاصيل بخصوص التدرج اللون عن طريق ملف الـ CSS
قم بتعديل إرتفاع الهيدر بدلاً من 79px بما يتناسب إرتفاع الهيدر لديك
2 - قم بتحرير قالب الـ header إما عن طريق لوحة تحكم المدير من خلال
لوحة تحكم الإدارة » القوالب » التصميم الخاص بموقعك » تحرير : header ، أو عن طريق برنامج Notepad++
3 - إبحث عن
CODE
<div id="logostrip">
أضف أسفلها مباشرة
CODE
<div style="position:fixed;left:0px;top:0px; z-index: 1000; width: 100%; height: 79px;" class="fixed_header">
ثم إبحث عن
CODE
</div>
أضف أسفلها مباشرة
CODE
</div>
ثم إضغط على <a class="attribute-value">حفظ وإعادة تحميل</a>
4 - قم بتصميم خلفية للهيدر بنفس الإرتفاع إذا كان لا يوجد خلفية مناسبة ( لا يهم عرض الخلفية ) ، أو قم بتعيين خلفية عبارة عن لون موحد أو تدرج ثابت
لعمل تدرج لونى عن طريق الـ CSS إنسخ الكود التالى
CODE
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));
و أضفه بدلاً من مع تغيير " ------ " بكود اللون
CODE
background: #------;
هذه الخطوة لا ينصح بها كثيراً للمبتدئين
السطر الأول عبارة عن لون الخلفية المؤقت الذى سيظهر عند الإتصال البطىء و هو غير هام ، و أما السطرين الثانى و الثالث هو عبارة عن التدرج اللونى .. اللون الأبيض الذى يحمل الكود fff هو اللون العلوى للتدرج أما اللون الأسود الذى يحمل الكود 000 يمثل اللون السفلى للتدرج و يمكنك التعديل بكل سهولة و الصورة التالية توضح ما أقصده
الآن أنت لا تعرف كيف تقوم بعمل تدرج لون متناسق الألوان ، لذلك أنصحك بالإطلاع على موقع Adobe Kuler
إنتهى ... و الآن أصبح لديك هيدر ثابت لمنتداك
نرجو منكم التقييم من خلال هذا الزر إذا عجبكم الدرس كما نرحب بأى إقتراح أو نقد بناء علي هذا الدرس
تفاصيل المرفقات : قالب الـ header مُعدل على التصميم الإفتراضى + الكلاس المطلوب إضافته فى ملف الـ CSS + الدرس فى ملف TXT
حجم الملف : 38.9 KB - نوع الملف : RAR
للسادة المصممين : يحذر تطبيق هذا الدرس على أى تصميم بدون ذكر حقوق النشر فى موضوع التصميم نفسه
All Copyright Reserved to Ezz El Dean ™ | 2013 ©
و السلام عليكم و رحمة الله و بركاته ،،،
أخوكم عز الدين السيد - جمهورية مصر العربية