تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css

Gx1Sniper · 8 سبتمبر 2011

السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
كما نعلم وشاهدنا ستايلات الجيل الرابع فقليل ماشاهدنا لها ستايل رباعي الاطراف
اي هيدر وفوتر واعمده جانبيه مرتبطه ببعضها
اليوم نشرح ان شاء الله تعالى تركيب ستايل رباعي الاطراف بخصائص css للجيل الرابع من المنتديات
وبسم الله
الدرس بسيط جدا ومحتاج تركيز بسيط
وعلى فكره طريقة التركيب هذي بامكانك استغلالها للجيل الثالث ايضا
توكلنا على الله
اولا بعد ماسوينا التصميم وانا سويت تصميم على عجل والذوق دمار لكن سويته علشان الدرس

نقطع الاستايل كالمعتاد
الهيدر
صوره يمين وصوره يسار وصورة وسط وصورة خلفيه تمدد
والفوتر نفس الهيدر
وعمود يمين وعمود يسار >ولا راح استطرد عاد بالطريقه كل واحد له طريقته بالتقطيع
الان بعد ماقطعنا نجي للتركيب
نفتح الدريم ويفر ونتجه لمنطقة body ونضيف اكوادنا الي هي اكواد الهتمل الي راح نضيفه بقالب الهيدر والفوتر
طبعا اول شي نبي نضيفه الهيدر
نبدا بخلفية الهيدر طبعا حتى نضع الصور التجميليه فوق الخلفيه
طريقة كتابة الكود
اولا نضيف اي دي ID والصور الي داخل الهيدر الي هي الصور التجميليه راح تكون كلاس class

وفي هالصوره راح اوضح اكثر بالالوان

نشوف اللون الاحمر هذا الاي دي للهيدر وانا اسميته up
اللون الازرق هذا الصور التجميليه للهيدر ونلاحظها كلاسات class
r يمين l يسار c وسط
اللون البرتقالي هذي الاعمده ونلاحظها ايضا كلاسات
وبعد مانخلص كاتبين كود الاعمده نغلق وسم div وطريقته
نضغط على الكيبورد شفت + حرف الدال يخرج علامة اكبر من > بعدين سلاش / وينغلق الوسم
نكرره مرتين وينغلق كامل الكود
اللون الاخضر كود الفوتر وطريقته نفس الهيدر بالضبط
وهذا شرح فلاشي لكتابة الكود وانا طبقت بالهيدر لاختصار المقطع

http://www.aboshdg.net/up/uploads/fi...1c9c4dc0df.swf

الحين خلصنا من كتابة كود الهيدر وبعده نكتب كود الاعمده وهو طبعا كلاسات مثل ماهو واضح بالصوره السابقه
والفوتر نفس الهيدر

وهذا الكود كامل لمن يريده

PHP:

<!--بداية الهيدر--> 
<div id="up"> 
<div class="r"></div> 
<div class="l"></div> 
<div class="c"></div> 
</div> 
<!--نهاية الهيدر--> 
<!--بداية الاعمده--> 
<div class="bl"> 
<div class="br"> 
<!--نهاية الاعمده--> 
<!--بداية الفوتر--> 
</div> 
</div> 
</div> 
<div id="do"> 
<div class="dr"></div> 
<div class="dl"></div> 
<div class="dc"></div> 
</div> 
<!--نهاية الفوتر-->

الان خلصنا الهتمل
باقي لنا خصائص css وهي بسيطه جدا

نضع المؤشر على الهيدر ونضغط على اضافة عنصر
وهذا شرح فلاشي لبداية خصائص css

http://www.aboshdg.net/up/uploads/fi...409ca5208e.swf

نلاحظ كيف وضعت المؤشر على الوسم حتى مانكتبه
ونلاحظ الخلفيه نعطيها اتجاه افقي repeat-x
ونلاحظ الصوره اليمنى نعطيها اتجاه لليمين واليسار لليسار والوسطى مانعطيها اتجاه وانما
نعطيها ميرجان يمين ويسار اوتو

PHP:

 	 			 margin-right: auto; 
    margin-left: auto;

ونضيف بعدها الاعمده وباختلاف بسيط بالنسبه للاتجاه سوف يصبح رأسي بدل الافقي ونستخدم البيدينق
وهذا شرح فلاشي للاعمده

http://www.aboshdg.net/up/uploads/fi...3ab3786a72.swf

نلاحظ الاتجاه واستخدام البيدينق وانا اخترت العمود الايسر والايمن يطبق مثل الايسر باختلاف اتجاه البيدينق والبوستنينق

وهذا كود خصائص css لاستفاده منه

PHP:

<!-- شرح أبوشدقcssبداية كود الـ--> 
<!--بداية الهيدر--> 
#up { 
    background-image: url(rbaei/images/rb_02.gif); 
    background-repeat: repeat-x; 
    height: 135px; 
} 
#up .r { 
    background-image: url(rbaei/images/rb_04.gif); 
    float: right; 
    height: 135px; 
    width: 300px; 
} 
#up .l { 
    background-image: url(rbaei/images/rb_01.gif); 
    float: left; 
    height: 135px; 
    width: 203px; 
} 
#up .c { 
    background-image: url(rbaei/images/rb_03.gif); 
    height: 135px; 
    width: 184px; 
    margin-right: auto; 
    margin-left: auto; 
} 
<!--نهاية الهيدر--> 
<!--بداية الاعمده--> 
.bl { 
    background-image: url(rbaei/images/rb_06.gif); 
    background-repeat: repeat-y; 
    background-position: left; 
    padding-left: 19px; 
} 
.br { 
    background-image: url(rbaei/images/rb_08.gif); 
    background-repeat: repeat-y; 
    background-position: right; 
    padding-right: 19px; 
} 
<!--نهاية الاعمده--> 
<!--بداية الفوتر--> 
#do { 
    background-image: url(rbaei/images/rb_12.gif); 
    background-repeat: repeat-x; 
    height: 36px; 
} 
#do .dr { 
    background-image: url(rbaei/images/rb_14.gif); 
    float: right; 
    height: 36px; 
    width: 300px; 
} 
#do .dl { 
    background-image: url(rbaei/images/rb_11.gif); 
    float: left; 
    height: 36px; 
    width: 180px; 
} 
#do .dc { 
    background-image: url(rbaei/images/rb_13.gif); 
    height: 36px; 
    width: 193px; 
    margin-right: auto; 
    margin-left: auto; 
} 
<!--نهاية الفوتر--> 
<!-- شرح ابوشدقcssنهاية كود الـ -->

الحين نجي للتركيب بالمنتدى ونكون انتهينا
اولا نقوم بوضع كود الـ css بقالبه المخصص
لوحة التحكم
التحكم بالاستايلات
البحث بالقوالب
نبحث عن القالب vbulletin.css ونختار الاستايل المطلوب ونضع باخره كود الـ css مع تغيير روابط الصور

PHP:

<!-- شرح أبوشدقcssبداية كود الـ--> 
<!--بداية الهيدر--> 
#up { 
    background-image: url(rbaei/images/rb_02.gif); 
    background-repeat: repeat-x; 
    height: 135px; 
} 
#up .r { 
    background-image: url(rbaei/images/rb_04.gif); 
    float: right; 
    height: 135px; 
    width: 300px; 
} 
#up .l { 
    background-image: url(rbaei/images/rb_01.gif); 
    float: left; 
    height: 135px; 
    width: 203px; 
} 
#up .c { 
    background-image: url(rbaei/images/rb_03.gif); 
    height: 135px; 
    width: 184px; 
    margin-right: auto; 
    margin-left: auto; 
} 
<!--نهاية الهيدر--> 
<!--بداية الاعمده--> 
.bl { 
    background-image: url(rbaei/images/rb_06.gif); 
    background-repeat: repeat-y; 
    background-position: left; 
    padding-left: 19px; 
} 
.br { 
    background-image: url(rbaei/images/rb_08.gif); 
    background-repeat: repeat-y; 
    background-position: right; 
    padding-right: 19px; 
} 
<!--نهاية الاعمده--> 
<!--بداية الفوتر--> 
#do { 
    background-image: url(rbaei/images/rb_12.gif); 
    background-repeat: repeat-x; 
    height: 36px; 
} 
#do .dr { 
    background-image: url(rbaei/images/rb_14.gif); 
    float: right; 
    height: 36px; 
    width: 300px; 
} 
#do .dl { 
    background-image: url(rbaei/images/rb_11.gif); 
    float: left; 
    height: 36px; 
    width: 180px; 
} 
#do .dc { 
    background-image: url(rbaei/images/rb_13.gif); 
    height: 36px; 
    width: 193px; 
    margin-right: auto; 
    margin-left: auto; 
} 
<!--نهاية الفوتر--> 
<!-- شرح ابوشدقcssنهاية كود الـ -->

ثم نقوم بالبحث عن القالب الهيدر header
ونضع باوله الكود التالي

PHP:

<!--بداية الهيدر--> 
<div id="up"> 
<div class="r"></div> 
<div class="l"></div> 
<div class="c"></div> 
</div> 
<!--نهاية الهيدر--> 
<!--بداية الاعمده--> 
<div class="bl"> 
<div class="br"> 

<!--نهاية الاعمده-->

وايضا اسفله نضع هذا الكود

PHP:

<br / 
<div class="body_wrapper">

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

الملون بالاخضر هذا فايدة الكود الاخير

نبحث عن الفوترfooter ونضيف باخره

PHP:

<!--بداية الفوتر--> 
</div> 
</div> 
</div> 
<div id="do"> 
<div class="dr"></div> 
<div class="dl"></div> 
<div class="dc"></div> 
</div> 
<!--نهاية الفوتر-->

ونشيك على عملنا نلقاه تمام وهذا تصوير فلاشي لشغلنا

http://www.aboshdg.net/up/uploads/fi...5c58866037.swf

الى هنا نكون انتهينا من تركيب الاستايل رباعي الاطراف بخصائص الـ css
وهذا عمل انساني لايخلوا من الخطأ والنسيان ومستعد لاستفساراتكم واسئلتكم بما يقدرني به الله تعالى
هذا الدرس حصري لمنتديات ابوشدhttp://www.aboshdg.com/vbق ومعهد ترايدنت

+--+منقول+--+

JetLi · 8 سبتمبر 2011

رد: تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css

احبك عديييل ، مشكور مشكور على الموضوع ، واتمنى تنزل موضوع عن الجيل الثالث 3.8.x لان الطلب عليه كثير معقد شوي

Gx1Sniper · 9 سبتمبر 2011

رد: تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css

مشكور اخوي على المرور الطيب

وباذن الله انزل شرح لنسخ 3.8

تقبل مروري

تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css

السلام عليكم ورحمة الله وبركاته اسعد الله اوقاتكم بكل خير كما نعلم وشاهدنا ستايلات الجيل الرابع فقليل ماشاهدنا لها ستايل رباعي الاطراف اي هيدر وفوتر واعمده...

Gx1Sniper

New Member

JetLi

New Member

Gx1Sniper

New Member