[Đóng góp] Index_box auto box con và icon cho từng chuyên mục đẹp

Demo: http://www.dinhcao.ml/

Code:

<style>
  .pun .tcr a.topictitle {font: bold 12px Tahoma;background: url(http://i48.servimg.com/u/f48/14/28/30/23/legend13.png)no-repeat left top;padding: 1px 0px 1px 20px;}
  .sub {padding: 0.4em 1em;margin: 10px 1px 3px 1px;width: 100%;font-size: 0px;}
  .sub a.gensmall {display: inline-block;width: 265px;font: 13px Tahoma;margin-top: -1px;}
  .page-title h2 {font-weight: 700;}
  .tcr {background: url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif) repeat scroll 0 0 #F4F4F4!important;}
</style>

<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div id="indexBox" class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-top: 31px;margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -38px;">
                         {catrow.forumrow.FORUM_DESC}
                     </span>
                                                  <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  
                                                  <br />

                  
                                                    
                                                    <div class="sub">
                                                      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                                                  
                                                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                                  <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<br />
                                                        <div style="padding-top: 6px;font-weight: 700;font-size: 11px;border-style: dotted dotted dotted solid;border-color: rgb(153, 153, 153) rgb(153, 153, 153) rgb(153, 153, 153) rgb(153, 153, 153);border-width: 1px 1px 1px 1px;padding: 3px;margin: 5px 10px;">{L_TOPICS}: <span style="color:#1542AB">{catrow.forumrow.TOPICS}</span> ♥ {L_POSTS}: {catrow.forumrow.POSTS}</div>
                  </td>
                  
                  <td class="tcr">
                     <div class="avs"><span>
                     <!-- BEGIN switch_topic_title -->
                     <a class="topictitle" href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br /><br />
                     <!-- END switch_topic_title -->
                                                         {catrow.forumrow.USER_LAST_POST}<br />
                                                          </span></div>
                                          </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

.sub a.gensmall {display: inline-block;width: 265px;font: 13px Tahoma;margin-top: -1px;}
Thay width: 265px cho phù hợp với diễn đàn của bạn

Javascript avatar bài gửi sau cùng:

Title * : tên gì cũng được
Placement : In the home page hoặc In all the pages

Code:

$(document).on('ready', function() {
    $('.avs').each(function () {
        var touser = $(this).children('span').children('strong').children('a').attr('href');
        $(this).prepend('<a href="' + touser + '" class="inx"><img src="http://2img.net/i/fa/invision/pp-blank-thumb-38px.png" alt="No avatar" /></a>');
        $(this).children('a').load(touser + ' div.main-content.clearfix.center img:eq(0)');
    });
});