0%

[تومبلايت] قالب index_box بشكل مربعات مزدوج باحترافية

  افضل المواضيع1


السلام عليكم ورحمة الله وبركات 


اليكم الان قالب  index_box بشكل احترافى .. يعرض الاقسام فى مربعا ت بشكل مزدوج 
القالب خفيف وليس به , اى اعراض  غير انه خفيف الوزن وله شكل احترافى لامثيل له 
القالب مخصوص للنسخة PunBB
ويمكنكم التأكد من صورة المثال التالى 


https://i62.servimg.com/u/f62/19/08/62/30/44410.png
ولكن يجب عمل هذه الاعدادات لكى يظهر بشكل المطلوب كما هو مبين فى المثال
 
https://i62.servimg.com/u/f62/19/08/62/30/55510.png

فضلا وليس امر ضع رد ليظهر لك المحتوى 

 القالبindex_box

الكود:
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
<div class="main index-box {catrow.tablehead.ID}">
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <ul class="table-box clearfix">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <li class="box-content clearfix">
                                          <div class="box-all">
                                          <div class="box-info">
                                          <div class="icon-box">
                                           <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                                          </div>
                                            <div class="box-name"><h3><a href="{catrow.forumrow.U_VIEWFORUM}}">{catrow.forumrow.FORUM_NAME}</a></h3></div>
                                            <div class="box-count"><span class="count-itemt">الموضوع {catrow.forumrow.TOPICS}</span><span class="count-itemt">المشاركات {catrow.forumrow.POSTS}</span></div>
                                          </div>
                                          <div class="box-last">
                            <!-- BEGIN avatar -->
                            <div class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                            <!-- END avatar -->
                                            <div class="box-lasttit">
                                              <!-- BEGIN switch_topic_title -->
                  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                                              <!-- END switch_topic_title -->
                                            </div>
                                            <div class="box-user">{catrow.forumrow.USER_LAST_POST}</div>
                                          </div>
                                          </div>
               </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
         </ul>
      </div>
</div>
   <!-- END tablefoot -->
<!-- END catrow -->
css
الكود:
/* All *//* Box */
*,:before,:after{box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.clearfix:after{display:block;visibility:hidden;height:0;clear:both;font-size:0;content:" "}
li{list-style:none}
.main.index-box{padding-bottom:0}
.table-box{margin-left:-30px}
.box-content{width:50%;padding-left:30px;float:left;margin:0 0 30px}
.box-all{background:#f4f4f4;color:#888}
.icon-box{position:absolute;text-align:center;width:52px;left:15px;height:52px;background:#6ba65e;border-radius:50%}
.icon-box .fa:before{color:#fff;content:"\f086";font-size:25px;line-height:52px}
.box-info{padding:15px 15px 15px 82px;border-bottom:1px solid #e7e7e7;line-height:26px;position:relative}
.box-name h3{font-size:18px}
.count-itemt{margin-right:15px}
.box-last{padding:15px;}
.lastpost-avatar {background: #fff;float: left;height: 40px;margin-right: 15px;padding: 2px;width: 40px;border-radius: 50px;}
.lastpost-avatar img{max-width:100%;max-height:100%}
.box-user strong{margin-right:3px;max-width:115px;overflow:hidden;text-overflow:ellipsis;float:left}



والى هنا ينتهى موضعنا لهذا اليوم ونلتقى فى موضوع اخر انشاء الله تعالى 


Tags: #template #html #css #punbb


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