كيفية أضافة عمود ثالث للمدونة

السلام عليكم وحمة الله ..

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

نبدأ بالشرح واتمنى ان يكون الشرح واضح ولكنه يحتاج الى تركيز قليلا ,,

نقوم اولا بتوسيع القالب و نعمل ctrl F’ ونبحث عن sidebar-wrapper في القالب

<br /> #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

ونضع هذه الاكواد تحتها مباشرة ..

ثم نقوم بالتغيير الكلمات المظللة في الكود الاول نبدلها بالكود التاني

left-sidebar-wrapper (this makes the css for this section unique) float: left# <br /><br />

نضيف هذا الكود تحت الكود الاتي

#main-wrapper {


margin-left: 25px;

االان نقوم بتغير القيم الموجودة لدينا بالقالب وبالارقام التالية ..

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 425px;
margin-left: 25px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper { width: 200px; float: left ; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }




نبحث عن الكود

<div id="'main-wrapper'">

ونضيف فوق مباشرة الكود التالي

div id='left-sidebar-wrapper'> <b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/"> </div><br /><br />

ثم نبدل الارقام التالية بالاتي ..

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


بهذا يتم اضافة عمود ثالث للمدونة وبدون اخطاء ان شاء الله ..

اتمنى ان اكون قد وفقت في الشرح واي سؤال عليها انا جاهز ..