جاري التحميل
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع
omarpop23
 
JoryAbdallah
 
khairanynabil
 
نورالدين خلف
 
BAZOKA Libya
 
game4rest
 

المتواجدون الآن ؟
ككل هناك 15 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 15 زائر :: 2 عناكب الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 486 عُضو.
آخر عُضو مُسجل هو khairanynabil فمرحباً به.

أعضاؤنا قدموا 9723 مساهمة في هذا المنتدى في 1841 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

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

avatar
قالب 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;}

avatar
ما شاء الله
الكود الجميل إلا انه صعب شويء

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

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


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

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

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

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

لآرٍوٍآح ـكُم أإلجمـيله
avatar
الف شكر على الموضوع
avatar
شششكرآ على الكود #بلآك
  

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول