السلام عليكم ورحمة الله وبركات
اليكم الان قالب index_box بشكل احترافى .. يعرض الاقسام فى مربعا ت بشكل مزدوج
القالب خفيف وليس به , اى اعراض غير انه خفيف الوزن وله شكل احترافى لامثيل له
القالب مخصوص للنسخة PunBB
ويمكنكم التأكد من صورة المثال التالى
![[تومبلايت] قالب index_box بشكل مربعات مزدوج باحترافية 44410](https://i.servimg.com/u/f62/19/08/62/30/44410.png)
https://i.servimg.com/u/f62/19/08/62/30/44410.png
ولكن يجب عمل هذه الاعدادات لكى يظهر بشكل المطلوب كما هو مبين فى المثال
![[تومبلايت] قالب index_box بشكل مربعات مزدوج باحترافية 55510](https://i.servimg.com/u/f62/19/08/62/30/55510.png)
https://i.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 -->
- الكود:
/* 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
