ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

قالب index_box تحويل الفئات لثلاث اقسام مربعه

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

الشكل الثاني


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

معلومآت آلگود :
 
آلنسخة : 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://illiweb.com/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;}

  افضل مساهمة2
ما شاء الله
الكود الجميل إلا انه صعب شويء

الف شكر اختي جوري

دائما متميزة بالتوفيق
  افضل مساهمة3
شششكرآ على الكود #بلآك
  


  افضل مساهمة4
دُمتَ بِهذآ الع ـطآء أإلمستَمـرٍ

يُسع ـدني أإلـرٍد على مـوٍأإضيعكًـ

وٍأإألتلـذذ بِمـآ قرٍأإتْ وٍشآهـدتْ

تـقبلـوٍ خ ـآلص احترامي

لآرٍوٍآح ـكُم أإلجمـيله
  افضل مساهمة5
الف شكر على الموضوع
  افضل مساهمة6
شششكرآ على الكود #بلآك
  
لاتستطيع الرد على المواضيع في هذا المنتدى