أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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

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



05-10-2013 02:04 صباحاً
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس :
تاريخ الميلاد : 13-7-1993
الدعوات : 10
قوة السمعة : 12687
موقعي : زيارة موقعي
حصرياً : شرح عمل هيدر ثابت لمنتداك

2lj0p4w

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

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

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

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

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

2ur5vd1

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

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 مرات التحميل :(60)
الحجم :(39.909) KB

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

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

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

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

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

look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
  07-10-2013 09:31 مساءً   [5]
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس :
تاريخ الميلاد : 13-7-1993
الدعوات : 10
قوة السمعة : 12687
موقعي : زيارة موقعي
شكراً لكم جزيلاً ،،،

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

look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
  09-10-2013 07:26 مساءً   [7]
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس :
تاريخ الميلاد : 13-7-1993
الدعوات : 10
قوة السمعة : 12687
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: محمد شرح أكثر من رررراائع وممتاز جديد,وحصري.
أخي أنا منتظر منك 3 إستايلات
البستان,المسافر,كيبورد.
بصراحة الثلاثة أتوقعهم أروع إستايلات للنسخة؟

شكراً لك أخى الكريم على رأيك و أتمنى أن أكون عند حسن ظنكم دائماً.
بخصوص القوالب التى تم ذكرها فسوف يتم طرح قالب البُستان الإصدار 1.2 اليوم أو غداً و به 4 إضافات حصرية ، أما قالب كيبورد الإصدار 1.2 و قالب المُسافر فسوف يتم طرحهما بعد العيد غالباً ، و شكراً للمره الثانية على رأيك القوالب smile

تحياتى ،،،

look/images/icons/i1.gif حصرياً : شرح عمل هيدر ثابت لمنتداك
  21-12-2014 02:36 مساءً   [8]
معلومات الكاتب ▼
تاريخ الإنضمام : 16-12-2014
رقم العضوية : 5815
المشاركات : 217
الدولة : الجزائر
الجنس :
قوة السمعة : 380
موقعي : زيارة موقعي
شرح رائع بارك الله فيك

رد جديد موضوع جديد



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

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









الساعة الآن 09:35 AM