منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 09/03/16, 08:06 am

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


JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف منصورة في 11/03/16, 05:00 am

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

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

دائما متميزة بالتوفيق

منصورة
عضو نشيط


الجنس : انثى
عدد المساهمات : 112
التقييم : 20
تاريخ الميلاد : 01/01/1963
تاريخ التسجيل : 08/03/2016
العمر : 53
الموقع : منصورة والجميع
العمل/الترفيه : المطالعة
المزاج : الحمد لله والشكر لله

معاينة صفحة البيانات الشخصي للعضو http://manssora.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Black Love في 19/03/16, 08:34 pm

شششكرآ على الكود #بلآك
  



Black Love
عضو نشيط


الجنس : ذكر
عدد المساهمات : 96
التقييم : 15
تاريخ التسجيل : 19/03/2016
الموقع : المغرب ~~♥
العمل/الترفيه : مصمم جرافيك و مككود وسسباح ايضا هع ♥
المزاج : ~~ ححلو النهردهه هع ♥

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Mr.Yakoub في 13/04/16, 08:14 pm

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

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

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

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

لآرٍوٍآح ـكُم أإلجمـيله

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف البراق في 15/04/16, 05:12 am

الف شكر على الموضوع

البراق
عضو نشيط


الجنس : ذكر
عدد المساهمات : 109
التقييم : 25
تاريخ التسجيل : 14/04/2016
اوسمتي : :3:4:3

معاينة صفحة البيانات الشخصي للعضو http://raad2.montadalitihad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المصمم الليلي في 22/05/16, 02:06 am

شششكرآ على الكود #بلآك
  

المصمم الليلي
عضو نشيط


الجنس : ذكر
عدد المساهمات : 192
التقييم : 8
تاريخ التسجيل : 27/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://arab-ibda3.0wn0.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

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

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


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

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى