وضع قائمة جانبية في ستايل بروسيلفر “في جميع الصفحات”



السلام عليكم ورحمة الله وبركاته
————————————
في هذا ادرس سأشرح طريقة وضع قائمة جانبية لستايل بروسلفر prosilver بحيث تظهر في جميع صفحات المنتدى .
الملفات التي سيتم تعديلها:

  • overall_footer.html
  • overall_header.html
  • common.css


افتح ملف overall_footer.html وابحث عن:
كود:
<div id="page-footer">
أضف قبله :
كود PHP:
<div id="side">
<
div class="forabg">
<
div class="inner"><span class="corners-top"><span></span></span>
 <
ul>
             <
li class="header">
               <
dl class="icon">
                  <
dt>القائمة الأولى</dt>
               </
dl>
            </
li>
 </
ul>
   <
ul class="side_menu">
    <
li><a href="#">الرابط الأول</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
</
ul>
<
span class="corners-bottom"><span></span></span></div>
</
div>
<
div class="forabg">
<
div class="inner"><span class="corners-top"><span></span></span>
 <
ul>
             <
li class="header">
               <
dl class="icon">
                  <
dt>القائمة الثانية</dt>
               </
dl>
            </
li>
 </
ul>
   <
ul class="side_menu">
    <
li><a href="#">الرابط الأول</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
    <
li><a href="#">الرابط الثاني</a></li>
</
ul>
<
span class="corners-bottom"><span></span></span></div>
</
div>
</
div>
<
div style="clear:both"></div>
</
div
افتح ملف overall_header.html وابحث عن :

كود:
<div id="page-body">
أضف قبله:

كود:
<div id="wrapcontent">
افتح ملف common.css وابحث عن :
كود PHP:
#wrap {
    
padding0 20px;
    
min-width650px;

استبدله بـ:
كود PHP:
#wrap {
    
padding0 15px;
    
min-width950px;

ابحث عن :
كود PHP:
#page-body {
    
margin4px 0;
    
clearboth;

استبدله بـ:
كود PHP:
#page-body {
    
margin4px auto;
    
clearboth;
   
min-width:700px;
   
width:76%;
   
float:left;

ثم أضف في نهاية الملف:
كود PHP:
/*------------------------side bar -----------------------*/
#wrapcontent {
     
margin:auto;
    
width:100%;
}
#side {
     
float:right;
    
width:220px;
    
min-height:150px;
    
padding-top:72px;
    }
#side ul {
     
list-style-type:none;
}
ul.side_menu {
     list-
style-type:none;
    
width:100%;
    
margin:0 auto;
    
display:block;
    
background-color:#ffffff;
    
background-image:url("{T_THEME_PATH}/images/gradient.gif");
}
ul.side_menu li {
     
border-bottom:1px solid #00608F;
     
border-top:1px solid #FFFFFF;
    
display:block;
    
padding:5px 2px;
}
ul.side_menu li.header {
     
background:transparent;