حصرياً : شرح عمل هيدر ثابت لمنتداك
حصرياً : شرح عمل هيدر ثابت لمنتداك السلام عليكم و رحمة الله و بركاته الحمد لله رب العالمين و الصلاة و السلام علي أش ..
تحميل محتوى الموضوع
عرض نسخة صالحة للطباعة
أرسل هذا الموضوع إلى صديق-
05-10-2013 02:04 صباحا
-
-
-
عضو سوبر ستار
-
معلومات الكاتب ▼تاريخ الإنضمام : 19-07-2009رقم العضوية : 11المشاركات : 4342الدولة : Egyptالجنس :
تاريخ الميلاد : 13-7-1993الدعوات : 10قوة السمعة : 12687موقعي : زيارة موقعيPBBoard Version : 3.0.1
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
السلام عليكم و رحمة الله و بركاته
الحمد لله رب العالمين و الصلاة و السلام علي أشرف الخلق و المرسلين .. سيدنا محمد عليه أفضل الصلاة و السلام
أمــــا بعد ،،،
اليوم أعود لكم بدرس بسيط جداً عبارة عن إضافة لمسة جمالية لمنتداك ، إنها خاصية الـ 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;
}
و سوف يتم شرح التفاصيل بخصوص التدرج اللون عن طريق ملف الـ CSS
قم بتعديل إرتفاع الهيدر بدلاً من 79px بما يتناسب إرتفاع الهيدر لديك
2 - قم بتحرير قالب الـ header إما عن طريق لوحة تحكم المدير من خلال
لوحة تحكم الإدارة » القوالب » التصميم الخاص بموقعك » تحرير : header ، أو عن طريق برنامج Notepad++
3 - إبحث عن
<div id="logostrip">
أضف أسفلها مباشرة
<div style="position:fixed;left:0px;top:0px; z-index: 1000; width: 100%; height: 79px;" class="fixed_header">
ثم إبحث عن
</div>
أضف أسفلها مباشرة
</div>
ثم إضغط على حفظ وإعادة تحميل
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));
و أضفه بدلاً من مع تغيير " ------ " بكود اللون
background: #------;
هذه الخطوة لا ينصح بها كثيراً للمبتدئين
السطر الأول عبارة عن لون الخلفية المؤقت الذى سيظهر عند الإتصال البطىء و هو غير هام ، و أما السطرين الثانى و الثالث هو عبارة عن التدرج اللونى .. اللون الأبيض الذى يحمل الكود fff هو اللون العلوى للتدرج أما اللون الأسود الذى يحمل الكود 000 يمثل اللون السفلى للتدرج و يمكنك التعديل بكل سهولة و الصورة التالية توضح ما أقصده
الآن أنت لا تعرف كيف تقوم بعمل تدرج لون متناسق الألوان ، لذلك أنصحك بالإطلاع على موقع Adobe Kuler
إنتهى ... و الآن أصبح لديك هيدر ثابت لمنتداك
نرجو منكم التقييم من خلال هذا الزر
إذا عجبكم الدرس كما نرحب بأى إقتراح أو نقد بناء علي هذا الدرس
تفاصيل المرفقات : قالب الـ header مُعدل على التصميم الإفتراضى + الكلاس المطلوب إضافته فى ملف الـ CSS + الدرس فى ملف TXT
حجم الملف : 38.9 KB - نوع الملف : RAR
للسادة المصممين : يحذر تطبيق هذا الدرس على أى تصميم بدون ذكر حقوق النشر فى موضوع التصميم نفسه
All Copyright Reserved to Ezz El Dean ™ | 2013 ©
و السلام عليكم و رحمة الله و بركاته ،،،
أخوكم عز الدين السيد - جمهورية مصر العربية
تم تحرير الموضوع بواسطة :ezzeldean
بتاريخ:05-10-2013 09:41 مساء
-
05-10-2013 02:11 صباحا
[1]
-
-
-
عضـو بـارز
-
معلومات الكاتب ▼تاريخ الإنضمام : 07-12-2010رقم العضوية : 1059المشاركات : 1339الدولة : أم الدنيا مصرالجنس :
تاريخ الميلاد : 23-5-1969الدعوات : 1قوة السمعة : 2893موقعي : زيارة موقعيPBBoard Version : غير محدد
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
-
05-10-2013 07:27 مساء
[2]
-
-
-
عضـو ستـار
-
معلومات الكاتب ▼تاريخ الإنضمام : 20-07-2009رقم العضوية : 18المشاركات : 2796الجنس :
تاريخ الميلاد : 1-10-1981الدعوات : 28قوة السمعة : 4978موقعي : زيارة موقعيPBBoard Version : 3.0.1
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
-
05-10-2013 07:31 مساء
[3]
-
-
-
عضـو ستـار
-
معلومات الكاتب ▼تاريخ الإنضمام : 01-12-2011رقم العضوية : 1947المشاركات : 2249الدولة : مصرالجنس :
قوة السمعة : 3463موقعي : زيارة موقعيPBBoard Version : 3.0.0
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
-
06-10-2013 12:04 مساء
[4]
-
-
-
عضـو نشيط
-
معلومات الكاتب ▼تاريخ الإنضمام : 22-07-2009رقم العضوية : 59المشاركات : 438الدولة : مِصْرالجنس :
قوة السمعة : 3107PBBoard Version : غير محدد
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
-
الله ينَوَّر
-
07-10-2013 09:31 مساء
[5]
-
-
-
عضو سوبر ستار
-
معلومات الكاتب ▼تاريخ الإنضمام : 19-07-2009رقم العضوية : 11المشاركات : 4342الدولة : Egyptالجنس :
تاريخ الميلاد : 13-7-1993الدعوات : 10قوة السمعة : 12687موقعي : زيارة موقعيPBBoard Version : 3.0.1
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
-
09-10-2013 05:09 مساء
[6]
-
-
-
عضـو متميز
-
معلومات الكاتب ▼تاريخ الإنضمام : 15-10-2012رقم العضوية : 2494المشاركات : 616الدولة : اليمنالجنس :
تاريخ الميلاد : 10-1-1998الدعوات : 19قوة السمعة : 2100موقعي : زيارة موقعيPBBoard Version : غير محدد
-
-
حصرياً : شرح عمل هيدر ثابت لمنتداك
| المواضيع المتشابهه | ||||
| عنوان الموضوع | الكاتب | الردود | الزوار | آخر رد |
| [مجابه] طلب عمل ايقونات المواقع الاجتماعية في الهيدر لاستايل AL-HAR |
islamov |
7 | 1208 | Mr King |
|
الكلمات الدلالية
|
| لا يوجد كلمات دلالية .. |
الساعة الآن 06:17 مساء