منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t14540
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

حصرياً : شرح عمل هيدر ثابت لمنتداك
ezzeldean 05-10-2013 02:04 صباحاً
حصرياً : شرح عمل هيدر ثابت لمنتداك

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
منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved