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 :)))
