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

[Gx1Sniper]

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

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

المصدر: :: vBspiders Professional Network ::

---

jv;df sjhdg vfhud hgh'vht ggksom 4>0 ,lht,r fh;,h] css

[JetLi]

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

[Gx1Sniper]

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

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

تقبل مروري