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

2 مشترك

اذهب الى الأسفل

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

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

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

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


وشكرا
chi kong
chi kong
 
 

ذكر
عدد المساهمات : 259
معدل النشاط : 4573
السُمعة : 14

http://www.eltaqa.com

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

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

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

قالب صندوق الفئات  
الشكل الأول
طلب كود جعل الاقسام بهذا الشكل مثل المركز التقنى لاحلى منتدى Mempxzfelw2k
الشكل الثاني
طلب كود جعل الاقسام بهذا الشكل مثل المركز التقنى لاحلى منتدى Aer3ej607hbj

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

معلومآت آلگود :
 
آلنسخة : phpbb2
 
آلنوع : تومبيلات
 
طريقهّ آلترّگيّپ :


لوحة الادارة - مظهر المنتدى - التومبيلات القوالب

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

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

نعدل على
قالب 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://2img.net/i/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 -->

ثم نسجل

ومن لوحة الادارة - عناصر اظافية

ننزل للأسفل  

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

نتأكد من تفعيل الجافاسكربت  

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

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

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

مهم جدا وضع علامة صح على الصفحة الرئيسية والمنتديات الثانوية

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

ونضيف الكود




[*]
الكود:
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>");

والآن نذهب إلى

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


ننزل للأسفل

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


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


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

ونظيف الكود التالي

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

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

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

انثى
عدد المساهمات : 3030
معدل النشاط : 8182
السُمعة : 295

http://taqnyiat.ahlamontada.com/

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

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

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

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

ذكر
عدد المساهمات : 259
معدل النشاط : 4573
السُمعة : 14

http://www.eltaqa.com

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

الرجوع الى أعلى الصفحة


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