Adding logo at the top of the board index page - Adding border around board index

[Pepo]

طيب ركز معايا كويس عشان نطلع النتائج صح
1- اضافة البوردر هاتخلى عرض استايل المنتدى ستاتيك, يعنى مش هايبقة بالشكل المطلوب مع كل مقاسات الشاشات.
2- انسى كل التعديلات اللى فاتت عشان هانعيدها من الأول بشكل تانى
3- فى الأكواد اللى هاحطهالك فى روابط بتاعت صور, المفروض انك تبدلها بالصور اللى انت عايز تحطها.
لحد كده جميل؟ لو عايز تكمل؟ تابع الخطوات

1. افتح تمبليت الـ footer وانزل لأخره وضيف الكود التالى
   
   كود :

   </div><div id="shadow_footer"></div>
2. بدل محتوى تمبليت الـ header بالكود التالى
   
   كود :

       <a name="top" id="top"></a>
<div id="shadow">
    <div id="container">
        <div id="header">
            <table border="0" class="tbo" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" class="head_log_l"><a href="{$mybb->settings['bburl']}/index.php"><img src="http://pro-designations.info/forum/images/Corporate/head_left.gif" alt="{$mybb->settings['bbname']}" /></a></td>
    <td class="head_log_m">&nbsp;</td>
    <td class="head_log_r" align="right"><img src="http://pro-designations.info/forum/Corporate/images/head_right.gif" alt="" /></td>
  </tr></table><br />
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            <navigation>
            <br class="clear" />
   
   
3. ادخل على تعديل الثيم Theme وليس الـ template
   
4. داخل حقول الـ Body يوجد حقل اسمه Extra CSS Attributes استبدل محتواه بالتالى
   
   كود :

   text-align: center; /* IE 5 fix */
line-height: 1.6em;
margin: 0;
5. داخل حقول الـPage Container غير قيمة الحقل width الى القيمة
   940px
   واستبدل كل محتوى الحقل Extra CSS Attributes بالتالى
   
   كود :

   background: #fff;
margin-left: auto;
margin-right: auto;
margin: auto;
border: 1px solid #878787;
border-top: 0;
border-bottom: 0;
height: auto;
6. اذهب الى اسفل الصفحة فى الحقل Additional CSS لا تحذف ما ادخلناه سابقا لكن ضيف اليه التالى
   
   كود :

   .tbo{
width:940px;
background: url(http://pro-designations.info/forum/Corporate/images/tile_back.png) repeat-x;
}
#container #content {
  padding: 12px;
  padding-top: 5px;
  text-align: left;
}
div#shadow {
  position: relative;
  background: url(http://mybboard.net/assets/images/shadow.png) top left repeat-y;
  width: 980px;
  margin: auto auto;
  height: auto;
}
div#shadow_footer {
  background: url(http://mybboard.net/assets/images/shadow_footer.png) top left no-repeat;
  width: 980px;
height: 30px;
  margin: auto auto;
}

تم وان شاء الله تكون النتيجة كما نريدها.
بمناسبة الحديث عن فايرفوكس فهى مصممة جرافيك جيدة, لكنها ليست جيدة الى درجة كبيرة فى الـ CSS و الـ XHTML.