منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى

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

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

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

مُساهمة من طرف chi kong في الخميس 12 نوفمبر 2015 - 23:48

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

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


وشكرا

chi kong
 
 

ذكر
عدد المساهمات : 249
معدل النشاط : 1785

http://www.eltaqa.com

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

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

مُساهمة من طرف JAR7 في الجمعة 13 نوفمبر 2015 - 0:02

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

الشكل الثاني


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

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

ملاحظة مهمة : في الشكل الثاني لتخصيص صورة لكل فئة نضع هذا الكود مع تغير رقم الفئة ( 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;}

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

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

JAR7
أحلى مساعدة
أحلى  مساعدة

انثى
عدد المساهمات : 2599
معدل النشاط : 4032

http://www.t3qnyiat.com/

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

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

مُساهمة من طرف chi kong في الجمعة 13 نوفمبر 2015 - 0:31

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

chi kong
 
 

ذكر
عدد المساهمات : 249
معدل النشاط : 1785

http://www.eltaqa.com

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

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


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