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

منتدى شروحات ودروس منتديات PBBoard

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

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

05-10-2013 02:04 صباحاً

ezzeldean

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

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

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

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

اليوم أعود لكم بدرس بسيط جداً عبارة عن إضافة لمسة جمالية لمنتداك ، إنها خاصية الـ 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;<br />
	background:&nbsp; -moz-linear-gradient(top, #fff 0%, #000 100%);<br />
	background:&nbsp; -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#000));<br />

و أضفه بدلاً من مع تغيير " ------ " بكود اللون

CODE

background: #------;<br />

هذه الخطوة لا ينصح بها كثيراً للمبتدئين

السطر الأول عبارة عن لون الخلفية المؤقت الذى سيظهر عند الإتصال البطىء و هو غير هام ، و أما السطرين الثانى و الثالث هو عبارة عن التدرج اللونى .. اللون الأبيض الذى يحمل الكود 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 مساءً

Fixed Header.rar تحميل rar مرات التحميل :(60)
الحجم :(39.909) KB

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

05-10-2013 02:11 صباحاً [1]

m_rezk2000

شرح رائع سلمت يداك وتستحق احلى تقييم

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

05-10-2013 07:27 مساءً [2]

AHMED

جزاك الله خيرا اخى عز الدين

شرح اكثر من رائع

بوركت اخى العزيز

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

05-10-2013 07:31 مساءً [3]

ashraf

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

06-10-2013 12:04 مساءً [4]

كنتارو

الله ينَوَّر

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

07-10-2013 09:31 مساءً [5]

ezzeldean

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

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

09-10-2013 05:09 مساءً [6]

محمد

شرح أكثر من رررراائع وممتاز جديد,وحصري.

أخي أنا منتظر منك 3 إستايلات

البستان,المسافر,كيبورد.

بصراحة الثلاثة أتوقعهم أروع إستايلات للنسخة؟

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

09-10-2013 07:26 مساءً [7]

ezzeldean

المشاركة الأصلية كتبت بواسطة: محمد شرح أكثر من رررراائع وممتاز جديد,وحصري.

أخي أنا منتظر منك 3 إستايلات

البستان,المسافر,كيبورد.

بصراحة الثلاثة أتوقعهم أروع إستايلات للنسخة؟

شكراً لك أخى الكريم على رأيك و أتمنى أن أكون عند حسن ظنكم دائماً.

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

تحياتى ،،،

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

21-12-2014 02:36 مساءً [8]

سناء

شرح رائع بارك الله فيك

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

الكلمات الدلالية

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

« رايكم باستايل منتديات الكردى نت | فيرفوكس يسهل لك التصميم »

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