Topic này mình lập ra nhằm mục đích tổng hợp những Styles Xenporta Xenforo đẹp mà mình thu thập cũng như code được. Các bạn ghé thăm rồi ủng hộ làm cho topic rôm rả thêm nhé: Styles Xenporta đầu tiên là của trang Span.vn: DemoCode: Các bạn vào template EWRblock_RecentNews thay toàn bộ code sau: PHP: <xen:require css="message_user_info.css" /><xen:require css="bb_code.css" /><xen:require css="EWRblock_RecentNews.css" /><div id="recentNews"> <div class="header_rc"><div class="title_rc">Tin mới nhất</div></div> <xen:foreach loop="$RecentNews" value="$news"> <div class="section sectionMainportal recentNews" id="{$news.thread_id}"> <div class="cms_congnghe_img"> <xen:if is="{$news.promote_icon} != 'disabled'"> <xen:if hascontent="true"> <xen:contentcheck> <xen:if is="{$news.attach}"> <a href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/TENMIEN/{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a> <xen:elseif is="{$news.medio}" /> <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;"> <a href="{xen:link 'full:media/media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a> </div> <xen:elseif is="{$news.image}" /> <a href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" /></a> <xen:else /> <a href="{xen:link threads, $news}"><img src="/images/news.jpg" /></a> </xen:if> </xen:contentcheck> </xen:if> </xen:if> </div> <div class="right_ct"> <div class="subHeadingportal"> <a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a> <xen:if is="{$visitor.permissions.EWRporta.canPromote}"> (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>) </xen:if> <div class="edit_btn" style="float: right; white-space: nowrap;"> </div> </div> <div class="messageContent baseHtml"> <div class="postedBy"> <span class="posted iconKey">{xen:phrase by_x_at_y, 'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>,', 'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span> </div> <div class="newsText">{xen:helper snippet, $news.message, 300}</div> <div class="postedStat"> <span class="views"><span></span>{xen:number $news.view_count}</span> <span class="likes"><span></span>{xen:number $news.first_post_likes}</span> <span class="comments iconKey"><a href="{xen:link threads/unread, $news}"><span></span>{xen:number $news.reply_count}</a></span> </div> <div class="clearFix"></div> </div> </div> </div> </xen:foreach> <xen:if hascontent="true"> <div class="section sectionMain"> <xen:contentcheck> <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}"> <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" /> </xen:if> </xen:contentcheck> </div> </xen:if></div> Lưu ý: TENMIEN trong trường hợp này phải được thay bằng tên miền diễn đàn của bạn ví dụ như http://tayninh24h.vn/ Vào template EWRblock_RecentNews.css thay toàn bộ code sau: PHP: .EWRporta_Portal .breadBoxTop, .EWRporta_Portal .titleBar {display: none;}.header_rc{border-bottom:4px solid #666;position:relative;width:auto}/*#0093cb #006d96*/.title_rc{background:#333;color:#fff;float:left;font-size:15px;padding:10px;position:absolute;text-transform:uppercase;top:-39px}#recentNews{background:#fff;border:1px solid #ccc;margin-top:15px;padding-top:30px}.page_count{background:none;border:none}.EWRporta_Portal .breadBoxBottom{display:none}.postedStat .views,.postedStat .likes,.postedStat .comments{float:left;padding-right:25px;padding-top:3px}.postedStat .views span{background:transparent url(/images/icon.png) no-repeat -135px -7px;float:left;font-size:13px;height:15px;padding-right:10px;width:19px}.postedStat .likes span{background:transparent url(/images/icon.png) no-repeat -174px -67px;float:left;font-size:13px;height:15px;padding-right:0;width:19px}.postedStat{padding-bottom:10px;padding-left:10px;padding-top:10px}.recentNews .messageContent .comments span{background:transparent url(/images/icon.png) no-repeat -173px -7px;float:left;font-size:13px;height:15px;padding-right:5px;width:19px}.recentNews .messageContent .comments a{color:#3A3A3A!important;font-weight:400!important}.LeftMenuFix{margin:0 auto;width:1000px}.LeftMenu_wrp{background:#fff;float:left;margin-left:0;margin-right:10px;margin-top:15px;width:130px}/* .item_lmn{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;padding:8px 10px;text-align:center}.item_lmn:hover{background:#f1f1f1}.title_lmn1 .item_lmn{background:#0093cc;color:#fff}.title_lmn2 .item_lmn{background:#e75218;color:#fff}.LeftMenuFixed{margin-left:-140px;margin-top:-3px;position:absolute;width:135px!important}*/.clearFix{clear:both}.HotBlock{float:left;margin-top:0;width:100%}.HotBlock_wrp{background:none repeat scroll 0 0 #FFF;border:1px solid #CCC;margin-top:15px;padding-top:30px}.HotBlock_ct{padding:20px 0 0}.header_hb .title_rc{background:#444}.HotBlock_items{float:left;height:100px;overflow:hidden;padding-bottom:20px;padding-left:20px;width:320px}.img_items{display:block;float:left;height:95px;overflow:hidden;padding-right:10px;width:95px}.img_items img{min-height:95px;width:95px}.ct_items{float:left;width:205px}.title_items{color:#444!important;display:block;font-size:15px;font-weight:700;max-height:58px;overflow:hidden;text-align:justify;width:205px}.info_items{color:#666!important;font-size:12px;width:190px}.lmn_bock02 .fb-like,.lmn_bock02 .plusone{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;margin:0!important;padding:8px 10px;text-align:center}.thread_view .HotBlock{margin-bottom:10px;margin-right:310px;margin-top:-10px;width:auto}.EWRporta_Portal .PageNav{padding-top:10px}.titleBar h1{margin-top:10px}.cms_congnghe_img{float:left;height:170px;overflow:hidden;width:270px}.right_ct{margin-left:280px}.bbCodeQuote{margin-right:10px!important}.subHeadingportal{-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;font-weight:700;margin:0 0 5px;overflow:hidden;padding-bottom:2px;text-align:left}.subHeadingportal .newsTitle{color:#444;font-family:Tahoma, Geneva, sans-serif;font-size:16px;line-height:24px}.recentNews .leftDate .newsText{font-size:13px;margin-left:0!important;text-align:justify}.recentNews .leftDate .newsText iframe{max-width:550px;width:auto}.cn_message{padding-bottom:0!important}.cn_message .fb-comments{margin:0 auto}.cnfacebookLike{padding:15px 10px 10px}.sectionFooterportal{color:#65a5d1;font-size:11px;line-height:16px;padding:4px 10px}.sectionFooterportal a{color:#65a5d1}.primaryContentportal{background-color:#FFFFF;padding:10px}.primaryContentportal a{color:#176093}.sectionMainportal{background:#fff;border-bottom:1px solid #D9D9D9;float:left;margin:0!important;padding:20px}.widget-container .secondaryContent a,.widget-container .userTitle a{font-weight:400}.cms_congnghe_img a:hover img { margin-left: -5%; width: 110%;}.cms_congnghe_img a img { transition: all 0.2s ease 0s; width: 100%;}.recentNews .subHeading { margin: -10px -10px 10px; }.recentNews .subHeading a { color: #444444 !important; }.recentNews .subHeading h2 { font-size: 1.5em; }.recentNews .messageUserBlock { float: right; margin-left: 10px; }.recentNews .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }.recentNews .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }.recentNews .newsDate .newsDay { font-size: 26px; }.recentNews .leftDate .newsDate { margin-left: -45px; }.recentNews .leftDate .newsText { margin-left: 25px; }.recentNews .messageContent { font-size: 13px; }.recentNews .messageContent .postedBy a{color:#666;}.recentNews .messageContent .postedBy { font-size: 12px; padding-bottom: 5px;padding-top: 0px; }.recentNews .messageContent .username { font-weight: bold; color:#0093cb !important;}.recentNews .messageContent .comments { float: left; font-weight: bold; }.recentNews .messageContent .clearFix { clear: right; }.recentNews .iconKey div{ background: transparent url('styles/baisik/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0; width: 16px; height: 16px; float: left; margin-right: 4px;}.recentNews .iconKey .sticky { background-position: 0px -16px; }.recentNews .iconKey .redirect { background-position: -48px -16px; }.recentNews .iconKey .new { background-position: -64px -16px; }.recentNews .sectionFooter { margin: 10px -10px -10px; text-align: right; position: relative; }.recentNews .sectionFooter .continue { padding-top: 5px; font-size: 12px; }.recentNews .sectionFooter .continue .redirect { margin: 3px 4px 0px 0px; }.recentNews .sectionFooter .categories { padding-top: 5px; float: left; }.recentNews .sectionFooter .categories li { display: inline; }.recentNews .sectionFooter .sharePage { position: absolute; }.recentNews .sectionFooter .shareControl { margin-top: 6px !important; } Tiếp theo các bạn tải file đính kèm phía dưới về giải nén và cho lên host nhé! Chúc các bạn thành công! Demo: http://tayninh24h.vn/ Nguồn: Internet
