توزيع اكواد اطار الاقسام ؟؟

سلام الله عليكم 
عندي استفسار بخصوص تركيب اطارات الستايل في المنتدى 

مثلا هذا الاطار تم تقطيعه وتكويده كما يجب لكن بقي توزيعه على المنتدى لم اعرف كيف 


فهل ممكن مساعده منكم

وعليكم السلام ورحمة الله وبركاته

طبعا التوزيع الصحيح يكون هكذا كود وضع اطار من كل الجهات (مطور ومتوافق مع كل المتصفحات)
والطرق الآخرى تثقل على الصفحة , واذا تم تقطيع الصور وتوزيع الصور بالـcss او الـhtml او كلاهما فضعي التوزيع هنا وسنشرح لك كيفية التوزيع وانظري هنا :
[تومبيلات]كود وضع اطار بالكامل على جميع جوانبالفئات على الرئيسية من Goweto Bilobed

انا قمت بالتكويد بطريقة css على برنامج الاكسبريشن ويب 

وهذه اكواد الاطار اخي 

الكود:

#HT {
    height:100px;
    background-image:url('https://b.top4top.net/p_561gtk8p1.png');
    background-repeat:repeat-x;
}

#HT .HR {
    height:100px;
    width:445px;
    background-image:url('https://c.top4top.net/p_5617l1912.png');
    background-repeat:no-repeat;
    float:right;
}
#HT .HL {
    height:100px;
    width:96px;
    background-image:url('https://d.top4top.net/p_561v9ebp3.png');
    background-repeat:no-repeat;
    float:left;;
}

.PT {
    background:transparent;
    color:maroon;
}

.P2 {
    padding-left: 25px;
    background-image:url('https://f.top4top.net/p_5617o4zk5.png');
    background-repeat:repeat-y;
    background-position:left;
}
.P1 {
    padding-right: 25px;
    background-image:url('https://e.top4top.net/p_561zbqk04.png');
    background-repeat:repeat-y;
    background-position:right;
}

#FT {
    height:75px;
    background-image:url('https://a.top4top.net/p_561drlaw6.png');
    background-repeat:repeat-x;
}
#FT .FR {
    height:75px;
    width:445px;
    background-image:url('https://b.top4top.net/p_5619pnor7.png');
    background-repeat:no-repeat;
    float:right;
}
#FT .FL {
    height:75px;
    width:96px;
    background-image:url('https://c.top4top.net/p_561585lq8.png');
    background-repeat:no-repeat;
    float:left;
}


-------------------------

<!-- header -->
<div id="HT">
<div class="HR"></div>
<div class="HL"></div>
</div>
<div class="PT">
<div class="P1">
<div class="P2">
<!-- header -->


<!-- Fo -->
</div>
</div>
</div>
<div id="FT">
<div class="FR"></div>
<div class="FL"></div>
</div>
<!-- Fo --> 


جيد , ما عليك سوى وضع هذه الاكواد :

الكود:

#HT {
    height:100px;
    background-image:url('https://b.top4top.net/p_561gtk8p1.png');
    background-repeat:repeat-x;
}

#HT .HR {
    height:100px;
    width:445px;
    background-image:url('https://c.top4top.net/p_5617l1912.png');
    background-repeat:no-repeat;
    float:right;
}
#HT .HL {
    height:100px;
    width:96px;
    background-image:url('https://d.top4top.net/p_561v9ebp3.png');
    background-repeat:no-repeat;
    float:left;;
}

.PT {
    background:transparent;
    color:maroon;
}

.P2 {
    padding-left: 25px;
    background-image:url('https://f.top4top.net/p_5617o4zk5.png');
    background-repeat:repeat-y;
    background-position:left;
}
.P1 {
    padding-right: 25px;
    background-image:url('https://e.top4top.net/p_561zbqk04.png');
    background-repeat:repeat-y;
    background-position:right;
}

#FT {
    height:75px;
    background-image:url('https://a.top4top.net/p_561drlaw6.png');
    background-repeat:repeat-x;
}
#FT .FR {
    height:75px;
    width:445px;
    background-image:url('https://b.top4top.net/p_5619pnor7.png');
    background-repeat:no-repeat;
    float:right;
}
#FT .FL {
    height:75px;
    width:96px;
    background-image:url('https://c.top4top.net/p_561585lq8.png');
    background-repeat:no-repeat;
    float:left;
}

في ورقة الـcss

وهذا الجزء (العلوي)

الكود:

<!-- header -->
<div id="HT">
<div class="HR"></div>
<div class="HL"></div>
</div>
<div class="PT">
<div class="P1">
<div class="P2">
<!-- header -->

نضعه فوق الجداول المراد تأطيرها

وهذا الجزء السفلي

الكود:

<!-- Fo -->
</div>
</div>
</div>
<div id="FT">
<div class="FR"></div>
<div class="FL"></div>
</div>
<!-- Fo -->  

نضعه اسفل الجدول

مثال في قالب index_box
نبحث عن :

الكود:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->


ونضع اعلاه كود الجزء العلوي المحدد

ونبحث عن

الكود:

<!-- BEGIN tablefoot -->
</table>

-تجدينه نهاية القالب-
ونضع اسفله كود الجزء السفلي

قمت بذلك وظهر فعلا عندي فقط استفسار ماهي القوالب اللي لازم اعدل عليها ليظهر الاطار ؟؟
مثلا في هذا المنتدى 
بدي الاطار على كل الامور اللي فيه 
مااسماء القوالب 
http://falstiny.yoo7.com
وشكرا لك

هناك قوالب كثيرة ودائما انصحك بالرئيسية وما تحتويه وبعدها الاقسام وبعدها المواضيع وستجدين في يومين انك قد اتممتي كل القوالب

مثلا لو اردنا تأطير الاحصائيات فهي في قالب index_body , نبحث عن <!-- BEGIN switch_legend -->
ونضع اسفلها الجزء العلوي

ونبحث عن <!-- END switch_legend -->
ونضع اعلاها الجزء السفلي
ملحوظة*: في حالة وضعتي اكواد css فلا داعي لوضعها مجددًا

ايضا هناك طريقة أخرى وهي تقوم بتأطير جميع المنتدى بكود واحد css فقط لكن لا انصحك بها لأنها تأطر اي جدول يحمل الكلاس forumline وهذا هو الكود :

الكود:

table.forumline {
    background: url(https://d.top4top.net/p_561v9ebp3.png) top left no-repeat , url(https://c.top4top.net/p_5617l1912.png) top right no-repeat, url(https://b.top4top.net/p_561gtk8p1.png) repeat-x top center, url(https://b.top4top.net/p_5619pnor7.png) bottom right no-repeat,url(https://c.top4top.net/p_561585lq8.png) bottom left no-repeat,url(https://f.top4top.net/p_5617o4zk5.png) center left repeat-y, url(https://e.top4top.net/p_561zbqk04.png) center right repeat-y , url(https://a.top4top.net/p_561drlaw6.png) bottom center repeat-x;
    padding: 99px 54px 74px 57px;
}

اعجبتني الطريقة الثانيه لكن انا لدي اطار مختلف فكيف ساغير لاني جربت هاد وطلع الاطار الاول اللي عطيتكم ياه باول الطرح 
بس انا عندي اطار ثاني للمنتدى اللي حطيتو تاليا 
وهاد هو التقطيع تبعو 

الكود:


#HT {
    height:126px;
    background-image:url('اطار/images/HT.png');
    background-repeat:repeat-x;
}

#HT .HR {
    height:126px;
    width:504px;
    background-image:url('اطار/images/HR.png');
    background-repeat:no-repeat;
    float:right;
}
#HT .HL {
    height:126px;
    width:402px;
    background-image:url('اطار/images/HL.png');
    background-repeat:no-repeat;
    float:left;;
}

.PT {
    background:transparent;
    color:maroon;
}

.P2 {
    padding-left:147px;
    background-image:url('اطار/images/P2.png');
    background-repeat:repeat-y;
    background-position:left;
}
.P1 {
    padding-right:147px;
    background-image:url('اطار/images/P1.png');
    background-repeat:repeat-y;
    background-position:right;
}

#FT {
    height:102px;
    background-image:url('اطار/images/FT.png');
    background-repeat:repeat-x;
}
#FT .FR {
    height:102px;
    width:504px;
    background-image:url('اطار/images/FR.png');
    background-repeat:no-repeat;
    float:right;
}
#FT .FL {
    height:102px;
    width:402px;
    background-image:url('اطار/images/FL.png');
    background-repeat:no-repeat;
    float:left;
}
</style>
</head>

<body>
<!-- header -->
<div id="HT">
<div class="HR"></div>
<div class="HL"></div>
</div>
<div class="PT">
<div class="P1">
<div class="P2">
<!-- header -->


<!-- Fo -->
</div>
</div>
</div>
<div id="FT">
<div class="FR"></div>
<div class="FL"></div>
</div>
<!-- Fo --> 


فهل ممكن تعدل عليه واكون شاكره لك

هل يمكنك تغير اكواد الاطار اخي لاستعملها واكون شاكره لك ؟؟

تم

الكود:

table.forumline {
    background: url('اطار/images/HL.png') top left no-repeat , url('اطار/images/HR.png') top right no-repeat, url('اطار/images/HT.png') repeat-x top center, url('اطار/images/FR.png') bottom right no-repeat,url('اطار/images/FL.png') bottom left no-repeat,url('اطار/images/P2.png') center left repeat-y, url('اطار/images/P1.png') center right repeat-y , url('اطار/images/FT.png') bottom center repeat-x;
    padding: اعلىpx ايمنpx اسفلpx ايسرpx;
}

ملاحظة استبدلي اعلى , ايمن , اسفل , ايسر .. بارتفاع الصور

لم افهم انا عندي صور كثير للاطار مافهمت شو اعمل
وكمان اعتذر ارفقتلك الاكواد قبل رفع الصور عليها

دي الاكواد من جديد
بجد اعتذر منك نست انها مو مغيرة

ممكن تعملي ياه مثل الاول وانا بس اركبو واكون ممنونتك لانو بجد مش فاهمه حاجه 

الكود:


#HT {
    height:126px;
    background-image:url('http://store4.up-00.com/2017-07/150050399095081.png');
    background-repeat:repeat-x;
}

#HT .HR {
    height:126px;
    width:504px;
    background-image:url('http://store4.up-00.com/2017-07/150050399105882.png');
    background-repeat:no-repeat;
    float:right;
}
#HT .HL {
    height:126px;
    width:402px;
    background-image:url('http://store4.up-00.com/2017-07/150050399124053.png');
    background-repeat:no-repeat;
    float:left;;
}

.PT {
    background:transparent;
    color:maroon;
}

.P2 {
    padding-left:147px;
    background-image:url('http://store4.up-00.com/2017-07/150050399152595.png');
    background-repeat:repeat-y;
    background-position:left;
}
.P1 {
    padding-right:147px;
    background-image:url('http://store4.up-00.com/2017-07/150050399138974.png');
    background-repeat:repeat-y;
    background-position:right;
}

#FT {
    height:102px;
    background-image:url('http://store4.up-00.com/2017-07/150050399161186.png');
    background-repeat:repeat-x;
}
#FT .FR {
    height:102px;
    width:504px;
    background-image:url('http://store6.up-00.com/2017-07/150050400679391.png');
    background-repeat:no-repeat;
    float:right;
}
#FT .FL {
    height:102px;
    width:402px;
    background-image:url('http://store6.up-00.com/2017-07/150050400691372.png');
    background-repeat:no-repeat;
    float:left;
}
</style>
</head>

<body>
<!-- header -->
<div id="HT">
<div class="HR"></div>
<div class="HL"></div>
</div>
<div class="PT">
<div class="P1">
<div class="P2">
<!-- header -->


<!-- Fo -->
</div>
</div>
</div>
<div id="FT">
<div class="FR"></div>
<div class="FL"></div>
</div>
<!-- Fo --> 


تم ذلك

الكود:

table.forumline {
    background: url('http://store4.up-00.com/2017-07/150050399124053.png') top left no-repeat ,
      url('http://store4.up-00.com/2017-07/150050399105882.png') top right no-repeat ,
      url('http://store4.up-00.com/2017-07/150050399095081.png') top center repeat-x ,
      url('http://store6.up-00.com/2017-07/150050400679391.png') bottom right no-repeat ,
      url('http://store6.up-00.com/2017-07/150050400691372.png') bottom left no-repeat ,
      url('http://store4.up-00.com/2017-07/150050399161186.png') bottom center repeat-x ,
      url('http://store4.up-00.com/2017-07/150050399152595.png') center left repeat-y ,
      url('http://store4.up-00.com/2017-07/150050399138974.png') center right repeat-y;
        padding: 126px 39px 102px 39px;
}

تم ذلك شكرا جزيلا لك 

لكن هناك فاراغات في الموقوع بيضاء بين كل قسم وقسم 
لم اعرف كيف اجعلها باللون الازرق مثل المنتدى ؟؟

بالنسبة للفراغات فهذه لك خياران بتلوينها اما من مظهر المنتدى >> الالوان
والبحث عن لون الإطار الداخلي للمنتدى : ووضع هذا اللون #0a7a9

او من خلال ورقة الـcss من خلال وضع هذا الكود :

الكود:

.bodyline {
    background-color: #0a7a9;
}

تحياتي

جربت الطريقتين يتغير فعلا اللون الى الاورق لكن تبرز خطوط زرقاء تفصل بين الاقسام فيما بينها وبين الفئة الاولى والثانيه 
فهل يمكن اخفائها واعداتها للون الابيض كما كانت ؟؟

لاحظت انو شريط تسجيل الدخول ليس عليه اطار مثل البقية ماالسبب ؟؟

لأنه لم يوضع له كلاس class="forumline" 

ولتأطير نافذة تسجيل الدخول , ما عليك سوى البحث عن هذا السطر في قالب الهيدر overall_header :

الكود:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td>
                                <!--بدايه كود الدخول-->


تجدينه سطر 289
وضعي فقط بعد <table هذه اللاحقة : class="forumline" 
ليصبح كالتالي :

الكود:

<table class="forumline" width="100%" cellspacing="0" cellpadding="0" border="0">

تم تاطيره هو الاخر شكرا جزيلا لك اخي على المساعده بارك الله فيك وجزاك ربي كل خير