حصرياً : شرح عمل هيدر ثابت لمنتداك

حصرياً : شرح عمل هيدر ثابت لمنتداك السلام عليكم و رحمة الله و بركاته الحمد لله رب العالمين و الصلاة و السلام علي أش ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


05-10-2013 02:04 صباحا
ezzeldean
عضو سوبر ستار
rating
العضو غائب العمل على الإصدار 1.1 من قالب Elites
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس : ذكر
تاريخ الميلاد : 13-7-1993
الدعوات : 10
يتابعهم : 1
يتابعونه : 3
قوة السمعة : 12627
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
حصرياً : شرح عمل هيدر ثابت لمنتداك

2lj0p4w

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

الحمد لله رب العالمين و الصلاة و السلام علي أشرف الخلق و المرسلين .. سيدنا محمد عليه أفضل الصلاة و السلام

أمــــا بعد ،،،

اليوم أعود لكم بدرس بسيط جداً عبارة عن إضافة لمسة جمالية لمنتداك ، إنها خاصية الـ Fixed Header أو الهيدر الثابت

تم طرح هذه الخاصية ضمن المميزات الحصرية لقالب كيبورد الإصدار 1.1 ، كما يمكنك الإطلاع على القالب من هنا : حصرياً : قالب كيبورد الإصدار 1.1 بمميزات حصرية

2ur5vd1

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 يمثل اللون السفلى للتدرج و يمكنك التعديل بكل سهولة و الصورة التالية توضح ما أقصده

wrgnk7

الآن أنت لا تعرف كيف تقوم بعمل تدرج لون متناسق الألوان ، لذلك أنصحك بالإطلاع على موقع Adobe Kuler

إنتهى ... و الآن أصبح لديك هيدر ثابت لمنتداك

نرجو منكم التقييم من خلال هذا الزر reputation إذا عجبكم الدرس كما نرحب بأى إقتراح أو نقد بناء علي هذا الدرس

تفاصيل المرفقات : قالب الـ header مُعدل على التصميم الإفتراضى + الكلاس المطلوب إضافته فى ملف الـ CSS + الدرس فى ملف TXT

حجم الملف : 38.9 KB - نوع الملف : RAR

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

All Copyright Reserved to Ezz El Dean ™ | 2013 ©

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

أخوكم عز الدين السيد - جمهورية مصر العربية wink_3
 
 
  Fixed Header.rar   تحميل rar مرات التحميل :(54)
الحجم :(39.909) KB



تم تحرير الموضوع بواسطة :ezzeldean
بتاريخ:05-10-2013 09:41 مساء


05-10-2013 02:11 صباحا
مشاهدة مشاركة منفردة [1]
m_rezk2000
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 07-12-2010
رقم العضوية : 1059
المشاركات : 1335
الدولة : أم الدنيا مصر
الجنس : ذكر
تاريخ الميلاد : 23-5-1969
الدعوات : 1
يتابعهم : 0
يتابعونه : 2
قوة السمعة : 2883
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
شرح رائع سلمت يداك وتستحق احلى تقييم

05-10-2013 07:27 مساء
مشاهدة مشاركة منفردة [2]
AHMED
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 20-07-2009
رقم العضوية : 18
المشاركات : 2796
الجنس : ذكر
تاريخ الميلاد : 1-10-1981
الدعوات : 25
يتابعهم : 0
يتابعونه : 2
قوة السمعة : 4978
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك

جزاك الله خيرا اخى عز الدين
شرح اكثر من رائع
بوركت اخى العزيز

05-10-2013 07:31 مساء
مشاهدة مشاركة منفردة [3]
ashraf
عضـو ستـار
rating
العضو غائب سبحان الله وبحمده سبحان الله العظيم
معلومات الكاتب ▼
تاريخ الإنضمام : 01-12-2011
رقم العضوية : 1947
المشاركات : 2249
الدولة : مصر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3463
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
704746reputation

06-10-2013 12:04 مساء
مشاهدة مشاركة منفردة [4]
كنتارو
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3107
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك

الله ينَوَّر yes


07-10-2013 09:31 مساء
مشاهدة مشاركة منفردة [5]
ezzeldean
عضو سوبر ستار
rating
العضو غائب العمل على الإصدار 1.1 من قالب Elites
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس : ذكر
تاريخ الميلاد : 13-7-1993
الدعوات : 10
يتابعهم : 1
يتابعونه : 3
قوة السمعة : 12627
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك

شكراً لكم جزيلاً ،،،


09-10-2013 05:09 مساء
مشاهدة مشاركة منفردة [6]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
شرح أكثر من رررراائع وممتاز جديد,وحصري.
أخي أنا منتظر منك 3 إستايلات 
البستان,المسافر,كيبورد.
بصراحة الثلاثة أتوقعهم أروع إستايلات للنسخة؟


الصفحة 1 من 2 < 1 2 > الأخيرة »

المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
[مجابه] طلب عمل ايقونات المواقع الاجتماعية في الهيدر لاستايل AL-HAR islamov
7 516 Mr King

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 03:28 مساء