[Tự làm] Darklce ♜ Index-box #1

  Bài viết hay nhất1
Darklce ♜ Index-box #1
Code written by RayOriens © Darklce ♜ 2014

Demo:
Spoiler:
Tổng thể:

Sub-box:

Nội dung box khi có bài viết


Index-box
Spoiler:
Code:
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
   <div class="box-over">
          <div class="box-oname">{catrow.tablehead.L_FORUM}</div>
      <table cellpadding="0" cellspacing="0" id="{catrow.tablehead.ID}" class="box-table">
         <tr>
                          <td>
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
                            
          <div class="box-wrap" style="border-right-color:#8e44ad!important" id="{catrow.forumrow.U_VIEWFORUM} {catrow.forumrow.FORUM_FOLDER_IMG}">
            <div class="box-all">
              <a href="{catrow.forumrow.U_VIEWFORUM}">
                <div class="box-bg">
                  <div class="box-tp">{catrow.forumrow.TOPICS} Topics<br/>{catrow.forumrow.POSTS} Posts</div>
                </div>
              </a>
              <div class="box-right">
                <a href="{catrow.forumrow.U_VIEWFORUM}" class="box-name" id="{catrow.forumrow.FORUM_FOLDER_IMG}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">{catrow.forumrow.FORUM_NAME}</a>
                <div class="box-slide">
                  <div class="box-up">
                    <div class="box-info">{catrow.forumrow.FORUM_DESC}</div>
                  </div>
                  <div class="box-down">
                    <!-- BEGIN switch_moderators_links -->
                    <div class="box-mod">
                      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    </div>
                    <!-- END switch_moderators_links -->
                  </div>
                </div>
              </div>
              <div class="box-right2">
                <!-- BEGIN avatar -->
                <div class="box-ava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                <!-- END avatar -->
                <div class="box-last">
                  <!-- 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 -->
                  {catrow.forumrow.USER_LAST_POST}
                </div>
              </div>
              <div class="box-sub">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            </div>
                            </div>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
                          </td>
         </tr>
      </table>
      </div>
      <br />
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
   <ul>
      <!-- BEGIN switch_delete_cookies -->
      <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
      <!-- END switch_delete_cookies -->
      <!-- BEGIN switch_user_logged_in -->
      <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
      <!-- END switch_user_logged_in -->
   </ul>
</div>
<!-- END switch_on_index -->
<script>
  $('.box-sub:empty').each(function(){
    $(this).parents('.box-wrap').attr('style','border-right-color:'+$(this).parents('.box-wrap').css('border-color')+'!important');
  });
</script>

CSS:
Spoiler:
Code:
/* Box */
.box-wrap{position:relative;float:left;width: calc(50% - 14px);height: 125px;margin:5px;border: 2px solid #bdc3c7;border-right-color:#8e44ad!important}
.box-table{width:90%;margin:0 auto;position:relative}
.box-bg{position:absolute;top:0;left:0;background-repeat:no-repeat!important;background-position:center center!important;height: 125px;float:left;width: 100px;background:#000 url(http://www.iconsdb.com/icons/preview/white/empty-box-l.png);margin-right:10px;background-size:48px 48px!important}
.box-right,.box-right2{margin-left: 110px;height: 125px;transition:all 0.5s ease;width: 320px;}
.box-wrap:hover .box-right{margin-top:-125px;background:#bdc3c7}
.box-wrap:hover .box-right2{background:#fff}
.box-ava{overflow:hidden;width: 115px;height: 115px;float:left;margin-right: 5px;}
.box-name{color:#555;font-weight:bold;font-size:18px;margin-top:5px;line-height:30px}
.box-name[id*="0Ne8b3P"]{color:#3498db!important}
.box-name[id*="E3ptS7d"]{color:#e74c3c!important}
.box-wrap[id*="0Ne8b3P"]{border-color:#3498db!important}
.box-wrap[id*="E3ptS7d"]{border-color:#e74c3c!important}
.box-name[id*="U41oop6"]{color:#555!important}
.box-wrap[id*="U41oop6"]{border-color:#d7d7d7!important}
.box-up{height:70px;overflow:auto}
.box-down{line-height:25px}
.box-right2{padding:5px 0;background:#bdc3c7}
.box-ava img{width:115px;height:115px}
.box-last{margin-left:125px;padding:31px 0;}
.box-last > a:first-child {font-size:18px;line-height:25px;}
.box-tp{padding:5px;background:rgba(0,0,0,.7);color:#fff;font-weight:bold;display:none}
.box-wrap:hover .box-tp{display:block}
.box-sub {-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;color:transparent;transition:all 0.3s ease;position: absolute;right:0;top: -7px;padding: 5px 0!important;margin-top: 5px;background: #3498db;z-index: 999;padding: 5px;width: 0;overflow-x: hidden;overflow-y: auto;height: 119px;}
.box-sub:empty {display:none!important}
.box-oname {margin: 15px;width: calc(100% - 30px);text-align: center;}
.box-all{height:125px;width:440px;overflow:hidden}
.box-wrap:hover .box-sub{width:200px;padding:5px!important;right:-212px;border-right:2px solid #fff;}
.box-wrap:nth-child(2n):hover .box-sub {left: -212px!important;border-left:2px solid #fff;border-right:0!important}
.box-wrap:nth-child(2n) .box-sub {left: 0!important;float: left!important;}
.box-right2 > .box-last > a:empty:before {content: 'Nothing new here';pointer-events: none!important;}
.box-sub .gensmall{display:block;padding:2px 5px;background:transparent;font-weight:bold;margin-top:-15px;color:#fff;transition:background 0.2s ease;border-radius:2px}
.box-sub .gensmall:first-child{margin-top:0}
.box-sub .gensmall:hover{background:#fff;color:#3498db}

Tùy chỉnh màu box
Code:
/* Box background */
.box-wrap[id^="/f1-"] .box-bg {background: #hex url(link background)}
Thay 1 thành mã số box, #hex thành mã màu, link background thành link background :)))
  Bài viết hay nhất2
Mạ, mi cho code vào Spoiler đi. Ở cuối tự dưng cho " :))) " vào làm gì?
P/s : Hàng anh em mềnh diếm từ năm ngoái, bác nào thích cứ xài, hàng feo nên con méo nó share đấy
  Bài viết hay nhất3
fail mới share chứ :v
  Bài viết hay nhất4
khó nhìn thật ấy Méo
  Bài viết hay nhất5
hàng fail mà, ai thích dùng thì dùng thôi :|
The author of this message was banned from the forum - See the message
  Bài viết hay nhất7
Em edit lại giống vngame nhìn cũng thơm đấy chứ :))

  Bài viết hay nhất8
Liên quan? Edit cái gì? Muốn show hàng không liên quan thì vô mục Quán bar nhé
  Bài viết hay nhất9
huynh méo ơi, e muốn chỉnh box rộng ra cho cân bằng hai bên chức để lệch qua nhìn ko đẹp cho lắm.demo: http://translator-team.forumvi.com/

Acctest ( nếu cần): acctest

MK: Kelvin7414943
  Bài viết hay nhất10
CSS tìm
Code:
.box-all{height:125px;width:440px;overflow:hidden}
Sửa thành
Code:
.box-all{height:125px;width:570px;overflow:hidden}

Tìm
Code:
.box-right,.box-right2{margin-left: 110px;height: 125px;transition:all 0.5s ease;width: 320px;}
Sửa thành
Code:
.box-right,.box-right2{margin-left: 110px;height: 125px;transition:all 0.5s ease;}
  Bài viết hay nhất11
cảm ơn Boom nhưng bây giờ trông nó còn tệ hơn nữa T_T
  Bài viết hay nhất12
để mình tự chế thử xem ^^, cảm ơn boom đã chỉ cho mình biết sửa chỗ nào
  Bài viết hay nhất13
Có thấy lệch gì đâu .-.
  Bài viết hay nhất14
e chế lại ròi ==
You cannot reply to topics in this forum