ادخل لوحة الادارة ثم ضع الكود التالى فى ورقة التصميم css

الكود:


 
/**تم التعديل بواسطة وهبة الساحر
#cnmumes1, #cnmumes2, .slider_specialoffer_content, .linklist, .panel,.forabg, .block {width: 1060px;}
**/
#content-container #container {
    margin-left: 0;
    margin-right: 0;
}

 
 
#left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 1px;
    vertical-align: top;
}
#left th{vertical-align:middle}
#left .double{border-left:0}
#left ul,#left th{padding:10px 10px 10px 30px;margin:0}

.forabg > h2 {
    color: #fff;
    font-size: 13px;
}
 
.main-content .table {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor #333 #333;
    border-image: none;
    border-radius: 5px;
    border-style: none dashed dashed;
    border-width: medium 1px 1px;
    width: 100%;
}
#left li {
    border-bottom: 1px dashed #ccc;
    counter-increment: Zzindex;
    height: 19px;
    line-height: 19px;
    list-style-type: none;
    padding-bottom: 20px;
    position: relative;
    width: 100%;
}
 
#left li::before {
    background: #ebebeb none repeat scroll 0 0;
    border-radius: 2px;
    color: #fff;
    content: counter(Zzindex, decimal);
    display: block;
    font-size: 11px;
    height: 17px;
    line-height: 16px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: 1px;
    width: 16px;
    z-index: 10;
}
#left li::after {
    background: #ebebeb none repeat scroll 0 0;
    content: " ";
    display: block;
    height: 6px;
    position: absolute;
    right: 8px;
    top: 6px;
    transform: rotate(45deg);
    width: 6px;
}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
#left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:92%;left:0;top:0}
#left #recent_topics a {
    width: 92%;
}
 
#left .lastRight {
    left: auto;
    position: absolute;
    right: 20px;
    text-align: right;
    top: 0;}
#content-container #container {
    margin-right: 0 !important ;
}

ادخل على القوالب والتومبلايت وابحث عن قالب index_body ثم ابحث عن الفقرة التالية

الكود:

{CHATBOX_TOP}

ثم ضع هذا الرمز اعلاها مباشرة

الكود:


<div id="{ID_LEFT}" class="main">
  <div class="main-head">
      <div class="page-title">
      </div>
  </div>
  <div class="main-content">
      <table cellspacing="0" class="table">
        <tbody class="statused">           
            <tr>             
              <!-- BEGIN giefmod_index1 -->
              {giefmod_index1.MODVAR}                               
              <!-- END giefmod_index1 -->
            </tr>
        </tbody>
      </table>
  </div> 

</div>

ادخل الى القوالب والتومبلايت ثم ادخل على البوابة وابحث عن القوالب التالية
mod_recent_topics

الكود:

 
<!-- BEGIN classical_row -->
<!-- <tr> -->
  <th class="forabg">
      <h2>المشاركات الجديدة</h2>
  </th>
<th class="forabg">
      <h2>المواضيع الاكثر نشاط</h2>
  </th>
  <th class="forabg">
      <h2>المواضيع الاكثر شعبية</h2>
  </th>
</tr>
<tr>
  <td class="double">
      <ul id="recent_topics">
        <!-- BEGIN recent_topic_row -->
        <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
        </li>
        <!-- END recent_topic_row -->
      </ul>
  </td>
<!-- </tr> -->
<!-- END classical_row -->

mod_most_viewed_topics

الكود:

 
<!--<tr>-->
  <td>
      <ul id="viewed_topics" class="half">     
      <!-- BEGIN TOPIC -->     
        <li>
            <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
        </li>     
      <!-- END TOPIC -->
      </ul>
  </td>
</tr>

mod_most_active_topics

الكود:

 
<td>
  <ul id="active_topics" class="half">
      <!-- BEGIN TOPIC -->
      <li>
        <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
      </li>
      <!-- END TOPIC -->
  </ul>
</td>

ثم قم بأستبدلهم جميعا بالقوالب التى اضعها هنا
ثم ادخل على العناصر المستقلة على الرئيسية
وقم بعمل الاعدادت التالية

https://i.servimg.com/u/f12/19/08/62/30/ocia_a10.png