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

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


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

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

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

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

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

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

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


وشكرا
avatar
chi kong
 
 

ذكر
عدد المساهمات : 317
معدل النشاط : 2174
السُمعة : 13

http://www.eltaqa.com

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

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

مُساهمة من طرف JoryAbdallah في الجمعة 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;}

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

آن شآء آلله يعچپگم آلگودّ
avatar
JoryAbdallah
الاشراف العام
الاشراف العام

انثى
عدد المساهمات : 4195
معدل النشاط : 5793
السُمعة : 292

http://taqnyiat.ahlamontada.com/

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

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

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

شكرا بارك الله فيكم
avatar
chi kong
 
 

ذكر
عدد المساهمات : 317
معدل النشاط : 2174
السُمعة : 13

http://www.eltaqa.com

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

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


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