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

[MGadAllah]

ياااااااا بيبوووووووووو يااا جاااااااااممممممممممدددددددددددددد
اتحلت يا معلم واللوجو بقى 100 100
خودلك بصه


100 100
وعلى فكرة موضوع الأكسس بتاع الكنترول بانيل بيحصل من كمبيوتر الشغل بس
بس فى البيت الدنيا تمام والحمد لله
الف شكر يا باشا
ممكن بقه لما تفضى نبقى نخوش فى موضوع البوردر اللى حولاين البورد اندكس
ده كان لوجو جملى أوى يا جماعه
هاهاهاهاهاها
على فكرة يا ريت تبقى تحط الرد ده فى المنتدى الإنجليزى علشان ولاد اللذينه دول يعرفوا إن إحنا مش أى كلام
لحسن فاير فوكس نفسها مش عارفه الحل
جزاك الله عنا كل خير
محمد

[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.

[MGadAllah]

لا بص موضوع إن هو يبقى ثابت و ما يتناسبش مع مختلف مقاسات الشاشات ده موضوع مستحيل لحسن يبقى اكنك يا ابوزيد ما غازيت
انا كل اللى بقصده الخط اللى بيحيط بالفورم، انا بقدر أغير لون الخلفية بتاعت البوردر بس كنت باسأل لوكان ينفع إن إحنا نخلى صور متكرره بدل خط ثابت زى اللى موجود دلوقتى.
طب هل ينفع إن إحنا نعمل البوردر و نستعمل صور متكرره
أنا باقصد زى الصور دى:

















أنا هاجرب اللى أنت قلت عليه فوق و أقولك على النتيجه يا بيمبو

[Pepo]

ماظنش ينفع

[MGadAllah]

طيب بص أنا عملت إللى إنت قلت عليه
الفوتر إتزبط تمام
واليمين والشمال إتزبط
بس الهايدر مش مزبوط خالص
وكمان الفورم مش كوله باين لما يكون الشاشة زبطها 600*800 زى الفورم هنا مثلاً

طب اقولك حاجة ينفع نخليها زى ما كانت بس نخلى البوردر ده موجود فى اليمين والشمال بس أنا بقصد صورة متكرره فى اليمين من فوق لتحت ومتكررة فى الشمال من فوق لتحت والبورد إندكس مانخليش ليه بوردر من فو أو من تحت ، أقصد يعنى نخليه زى الأول. لكن فى نفس الوقت نخلى اللوجو زى ما إحنا عملناه.
عشان أتاكد انك فهمت قصدى:
- نخلى اللوجو زى ما انت عملته بالزبط 3 صور
- نخلى البوردر اللى انت عملته فى اليمين والشمال بس ونحذف البوردر اللى فوق واللى تحت
وانا رجعت الفورم زى الأول واللوجو دلوقتى مزبوط زى ما انت عملته
وبرضه خدلك بصه كده عشان تشوف انا واقف لحد فين
وكمان قولى اذا كان كده شكله تمام واللا فعلان محتاجين موضوع البوردرز من اليمين والشمال ده
شكراً

[Pepo]

1- اضافة البوردر هاتخلى عرض استايل المنتدى ستاتيك, يعنى مش هايبقة بالشكل المطلوب مع كل مقاسات الشاشات.

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

كود :

<div id="shadow_footer"></div>

[MGadAllah]

1- اضافة البوردر هاتخلى عرض استايل المنتدى ستاتيك, يعنى مش هايبقة بالشكل المطلوب مع كل مقاسات الشاشات.

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

كود :

<div id="shadow_footer"></div>

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

[Pepo]

صراحة انا شايف انه كده زى الفل

[MGadAllah]

ماشى كلامك يا عم بيبو
والله ما نا مزعلك
هاهاهاها
متشنكرين يا ريس
100 100

[MGadAllah]

فى بس مشكلة بسيطه لاقيتها لما استعمل انترنت إكسبلولر او اوبرا
هى ان الصورة الموجودة فى وسط اللوجو المتكررة اسمها tile_back.png لا تظهر إطلاقاً.
ومسارها هو
http://pro-designations.info/forum/image...e_back.png
بس مع فاير فوكس
كولوه تمام
وادى تيمبليت الهيدر الموجود عندى دلوقتى:

كود :

<a name="top" id="top"></a>
    <div id="container">
        <div id="header">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td 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"><img src="http://pro-designations.info/forum/images/Corporate/head_right.gif" alt="" /></td>
  </tr></table>
            <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" />

و ده الموجود فى Additional CSS
Below you may enter additional CSS to be included with this theme.

كود :

.head_log_l{
float: left;
padding:0px;
}
.head_log_m{
background: url(images/Corporate/tile_back.png) repeat-x;
padding:0px;
}
head_log_r{
float: right;
padding-right:0px;
}

وهذا هو الموجود عند إستخدام اوبرا

وهذا عند استخدام انترنت اكسبلولر

شكراً جزيلاً صديقى العزيز