طلب كود جعل الاقسام بهذا الشكل مثل المركز التقنى لاحلى منتدى

طلب كود جعل الاقسام بهذا الشكل مثل المركز التقنى لاحلى منتدى

http://www.t-mrkz.com/


وشكرا

قالب صندوق الفئات  
الشكل الأول

الشكل الثاني


وسيتم بأذن الله انزال بقية الاشكال من صندوق الفئات  

معلومآت آلگود :
 
آلنسخة : phpbb2
 
آلنوع : تومبيلات
 
طريقهّ آلترّگيّپ :


لوحة الادارة - مظهر المنتدى - التومبيلات القوالب





نعدل على
قالب index_box

نقوم بحذف جميع محتويات القالب ونستبدله بهذا الكود
نختار احد هذا الشكلين
هذا قالب الشكل الأول

الكود:

<!-- www.haya-m.net --><!-- BEGIN catrow --><!-- BEGIN forumrow -->
<div class="Hbox"><div class="Hstyle"></div>
 <div class="Hbox1" align="center">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>      
           </div>

                     <div class="Hbox2"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span></div>
                        <div class="Hbox3">
                  <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                          </div>      
           
                     <div class="Hbox4"><center><strong>المواضيع</strong> {catrow.forumrow.TOPICS} | <strong>المشاركات</strong> {catrow.forumrow.POSTS} </center></div>
                     
                     </div>
 <!-- END forumrow -->
 <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow --><!-- www.haya-m.net -->



[*]هذا قالب الشكل الثاني


[*]

الكود:

<!-- www.haya-m.net --><!-- BEGIN catrow --><!-- BEGIN forumrow -->
<div class="Hbox"><div class="Hstyle"><img src="http://2img.net/i/fa/subsilver/empty.gif" alt="{catrow.forumrow.U_VIEWFORUM}" /></div>
 <div class="Hbox1" align="center">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <h{catrow.forumrow.LEVEL} class="hierarchy">
         <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>          
           </div>

                     <div class="Hbox2"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span></div>
                        <div class="Hbox3">&nbsp;
                  <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                          </div>      
           
                     <div class="Hbox4"><center><strong>المواضيع</strong> {catrow.forumrow.TOPICS} | <strong>المشاركات</strong> {catrow.forumrow.POSTS} </center></div>
                     
                     </div>
   <!-- END forumrow -->
   <!-- BEGIN tablefoot -->  
<!-- END tablefoot --><!-- END catrow --><!-- www.haya-m.net -->


ثم نسجل

ومن لوحة الادارة - عناصر اظافية

ننزل للأسفل  



نتأكد من تفعيل الجافاسكربت  







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



ونضيف الكود



[*]

الكود:

var copyright ="www.haya-m.net - haya @ Rights Reserved";
// Avatar in index by mastersly phpbb2
    $(document).on('ready', function() {
        $(' .Hbox  .Hbox3').prepend('<div class="avatar-index"><div>');
        $(' .Hbox  .Hbox3  .avatar-index ').each(function () {
            var profileUser = $(this).parent().children('span').children('span').children('strong').children('a').attr('href');
            $(this).html('<a href="' + profileUser + '" class="avatar-index-enlace"><img src="http://cdn1.iconfinder.com/data/icons/basicset/user_64.png" alt="No Avatar" /></a>');
            $(this).children('a').load(profileUser + ' .forumline .row1.gensmall[align="center"]:eq(0) img:eq(0)');
        });
    });
document.writeln("<style>.avatar-index { float: right; }.avatar-index img { width: 40px; height: 40px; padding: 1px; border: 1px solid #DDD; margin: 0 1px; }</style><script type='text/javascript' src='http://js.haya-m.net/box.js'></script>");

والآن نذهب إلى



ننزل للأسفل







ونظيف الكود التالي

قالب css لشكل الأول

الكود:



/*----- www.haya-m.net تنسيق الفئات  ---*/

.Hbox{width:250px; height:340px; border:0px ; margin:5px;padding:0px; }
.Hstyle{
  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/911.png);
 width:250px;
 height:180px;}
a.forumtitley{color:#FFF;padding:4px;margin-bottom:0;font-family:arial;
       font-size:16px;
       font-weight:bold;}
.Hbox1{background:#FFFFFF;color:#FFF;padding:4px;margin-bottom:0; }
.Hbox2{ background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1010.gif); }
.Hbox3{ background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1010.gif); }
.Hbox4{  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1110.gif);
  color:#000000;padding:4px;margin-bottom:0 }

قالب css لشكل الثاني

الكود:



/*----- www.haya-m.net تنسيق الفئات  ---*/

.Hbox{width:250px; height:340px; border:0px ; margin:5px;padding:0px; }
a.forumtitley{color:#FFF;padding:4px;margin-bottom:0;font-family:arial;
       font-size:16px;
       font-weight:bold;}
.Hbox1{background:#FFFFFF;color:#FFF;padding:4px;margin-bottom:0; }
.Hbox2{ background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1010.gif); }
.Hbox3{ background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1010.gif); }
.Hbox4{  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/1110.gif);
  color:#000000;padding:4px;margin-bottom:0 }


.Hstyle img[alt^="/f1"]{
  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/99000010.png);
   width:250px;
   height:180px;}

.Hstyle img[alt^="/f2"]{
  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/untitl10.png);
   width:250px;
   height:180px;}

.Hstyle img[alt^="/f3"]{
  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/untitl11.png);
   width:250px;
   height:180px;}


ملاحظة مهمة : في الشكل الثاني لتخصيص صورة لكل فئة نضع هذا الكود مع تغير رقم الفئة ( alt^="/f0"] )

الكود:



.Hstyle img[alt^="/f0"]{
  background-image:url(http://i19.servimg.com/u/f19/18/46/95/67/untitl11.png);
   width:250px;
   height:180px;}

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

آن شآء آلله يعچپگم آلگودّ

شكرا بارك الله فيكم