فصل الأقسام وتأطيرها للجيل الرابع 4.0

[Mr.Gh0sT]

بسم الله الرحمن الرحيم
اسعد الله اوقاتكم بكل خير
منذ ان نزل الجيل الرابع ونحن نشاهد الاقسام مفصوله ولا طراء على بالي انه لازم تبي تعديل للقوالب حتى تقوم بالتاطير حتى طلب احد الاخوان من الطريقه وقمت بالتجربه ونجحت
طبعا التأطير بالـ css

 <div id="top">
  <div class="right"></div>
  <div class="left"></div>
  <div class="center"></div>
 </div>
   <div class="tright">
    <div class="tleft">
</div>
   </div>
 <div id="bottom">
  <div class="right"></div>
  <div class="left"></div>

 </div> 

وهذا كود css

#top {
    background-image: url(images_ho/images_23.jpg);
    background-repeat: repeat-x;
    height: 71px;
}
#top .right {
    background-image: url(images_ho/images_24.jpg);
    background-repeat: no-repeat;
    float: right;
    height: 71px;
    width: 475px;
}
#top .left {
    background-image: url(images_ho/images_22.jpg);
    background-repeat: no-repeat;
    float: left;
    height: 71px;
    width: 277px;
}
.r{
    background-image: url(images_ho/images_41.jpg);
    background-repeat: repeat-y;
    background-position: right;
    padding-right: 19px;
}
.l{
    background-image: url(images_ho/images_38.jpg);
    background-repeat: repeat-y;
    background-position: left;
    padding-left: 17px;
}

#bottom {
    background-image: url(images_ho/images_54.jpg);
    background-repeat: repeat-x;
    height: 35px;
}
#bottom .down_r{
    background-image: url(images_ho/images_55.jpg);
    background-repeat: no-repeat;
    float: right;
    height: 35px;
    width: 42px;
}
#bottom .down_l{
    background-image: url(images_ho/images_51.jpg);
    background-repeat: no-repeat;
    float: left;
    height: 35px;
    width: 46px;
} 

التاطير رباعي كما تلاحظون
التأطير جاهز اولا نقوم بتعديل القوالب حتى نقوم بالفصل قبل كل شي
نفتح قالب الفروم هومFORUMHOME ونبحث عن

{vb:raw forumhome_markread_script} 

ونقوم بحذفه
ثم نبحث عن

{vb:raw template_hook.forumhome_above_forums}
    <ol id="forums" class="floatcontainer">
        {vb:raw forumbits}
            </ol>
           {vb:raw template_hook.forumhome_below_forums} 

ونستبدله بالتالي

{vb:raw forumbits}
      {vb:raw forumhome_markread_script} 

الأن نحفظ القالب
الأن نفتح القالب forumhome_forumbit_level1_nopost ونضيف بأول القالب

<ol id="forums" class="floatcontainer"> 

ثم نبحث بنفس القالب عن

<vb:if condition="$childforumbits"> 

ونضيف اعلاه

{vb:raw template_hook.forumhome_above_forums}
        {vb:raw template_hook.forumhome_below_forums} 

وفي اخر القالب نضع

</ol> 

ن انتهينا من التعديل والفصل باقي لنا التأطير
اولا نضيف كود الـ css بأخر قالب vBulletin.css ثم نضيف التأطير العلوي وهو هذا الكود في اول قالب forumhome_forumbit_level1_nopost

 <div id="top">
  <div class="right"></div>
  <div class="left"></div>
 </div>
   <div class="r">
    <div class="l"> 

ثم نضيف التأطير السفلي اخر القالب وهو هذا الكود

 </div>
   </div>
 <div id="bottom">
  <div class="down_r"></div>
  <div class="down_l"></div>
 </div>
</div> 

ونشيك على شغلنا نلقاه تمام
واي سؤال انا حاضر
بالتوفيق

[H.M.S]

سهلتها علي ناس كتير

كل اللي هيعملوه انهم يعدلو على كلاسات كود css و يظبط معاهم بطريقه سهله

ما شاء الله عليك

اتمني لو تنقله لقسم دوره تصميم استايلات الجيل الرابع