Share Xenporta giống forumit24h.net

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Hôm nay mình sẽ share code trang chủ xenprota của forumit24h cho các bạn.

Demo:


home-xenprota.jpg

Tìm Template: EWRblock_RecentNews thay bang toàn bộ code sau:
Mã:
<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />
<div id="recentNews">
    <xen:foreach loop="$RecentNews" value="$news">
        <div class="content_container" id="{$news.thread_id}">
                <div id="VQ_DT" class="content_threadtitle">
                    <div style="float: right; white-space: nowrap;">
                        <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                            &nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
                        </xen:if>
                    </div>
                    <h2 title="{$news.title}"><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></h2>
                </div>
                    <div class="content_threadinfo">
        <span class="user"><a href="{xen:link members, $news}">{$news.username}</a></span>
                <span class="time">{xen:time $news.post_date, 'absolute'}</span>
                <span class="view">{xen:number $news.view_count}</span>
                <span class="reply">{xen:number $news.reply_count}</span>
                <span class="like">{xen:number $news.first_post_likes}</span>
                </div>
                                <div class="content_threadcontent">
                <xen:if is="{$news.promote_icon} != 'disabled'">
                <xen:if hascontent="true">
                    <div class="imgrcn">
                        <div class="avatarHolder">
                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{xen:helper stripHtml,{xen:helper Tinhte_XenTag_getImplodedTagsFromThread, $news, 1}}" style="width: 400px;" /></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="text-align: center;">
                                    <a href="{xen:link threads, $news}" class="imgrcn"><img alt="{xen:helper stripHtml,{xen:helper Tinhte_XenTag_getImplodedTagsFromThread, $news, 1}}" title="{$news.title}" src="{xen:helper medio, $news.medio}" width="320" height="180" /></a>
                                </div>
                            <xen:elseif is="{$news.image}" />
                                <a href="{xen:link threads, $news}"><img title="{$news.title}" src="{$news.image}" alt="{xen:helper stripHtml,{xen:helper Tinhte_XenTag_getImplodedTagsFromThread, $news, 1}}" style="max-width: 500px;" /></a>
                            <xen:else />
                                <xen:avatar user="$news" size="l" itemprop="photo" />
                            </xen:if>
                            </xen:contentcheck>
                        </div>
                    </div>
                </xen:if>
                </xen:if>
                <div class="messageContent baseHtml">
                    <div class="newsText"><xen:set var="$leti">{xen:raw $news.messageHtml}</xen:set>{xen:helper stripHtml, $leti}</div>
                    <div class="clearFix"></div>
                </div>
                <div class="content_threadtools">
                    <xen:if is="{$option.social}">
                        <xen:if hascontent="true">
                            <div class="sharePage">
                                <xen:require css="share_page.css" />
                                <xen:contentcheck>
                                    <xen:hook name="recentnews_share_page_options" params="{xen:array 'url={xen:link canonical:threads, $news}'}">
                                    <xen:if is="{$xenOptions.tweet.enabled}">
                                        <div class="tweet shareControl">
                                            <a href="http://twitter.com/share" class="twitter-share-button"
                                                data-count="horizontal"
                                                data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                                                data-url="{xen:link canonical:threads, $news}"
                                                {xen:if {$news.title}, 'data-text="{$news.title}"'}
                                                {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                                                {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                                        </div>
                                    </xen:if>
                                    <xen:if is="{$xenOptions.plusone}">
                                        <div class="plusone shareControl">
                                            <div class="g-plusone" data-size="medium" data-count="true" data-href="{xen:link canonical:threads, $news}" data-lang="{$visitorLanguage.language_code}"></div>
                                        </div>
                                    </xen:if>
                                    <xen:if is="{$xenOptions.facebookLike}">
                                        <div class="facebookLike shareControl">
                                            <xen:container var="$facebookSdk">1</xen:container>
                                            <fb:like href="{xen:link canonical:threads, $news}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                                        </div>
                                    </xen:if>
                                    </xen:hook>
                                </xen:contentcheck>
                            </div>
                        </xen:if>
                    <xen:else />
                        <div class="categories">
                            <ul>
                                <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                                    <a href="{xen:link 'threads/category', $news}" class="button OverlayTrigger">+</a>
                                </xen:if>
                                <xen:foreach loop="$news.categories" value="$subCat">
                                    <li><a href="{xen:link 'articles', $subCat}" class="button">{$subCat.category_name}</a></li>
                                </xen:foreach>
                            </ul>
                        </div>
                    </xen:if>
                    <div class="continue">
                        <a class="content_readmore" href="{xen:link threads, $news}">
                            <div class="redirect"></div>
                            {xen:phrase continue_reading}
                        </a>
                    </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:if is="{$category}">
                <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
            <xen:else />
                <xen:pagenav link="portal" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
            </xen:if>
        </xen:if>
        </xen:contentcheck>
    </div>
    </xen:if>
</div>

Tìm Template: EWRblock_RecentNews.css thay bang toàn bộ code sau:
Mã:
.content_container {
    margin-top: 5px;
    padding: 5px;
    background-color: #FFF;
    box-shadow: 0 0 6px #EBEBEB;
}

.content_threadtitle {
    font-family: Arial,Tahoma,sans-serif;
    font-size: 13pt;
    font-weight: normal;
    color: #2b2b2b;
    text-align: left;
    display: block;
    padding: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #176093;
    margin: -6px -5px;
    margin-bottom: 0px;
    color: #FFF;
}

.content_threadtitle h2 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.content_threadtitle a:hover {
    text-decoration: none;
    color: #EEE;
}

.content_threadtitle a {
    color: #FFF;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content_threadtools .continue {
    float: right;
}

.content_threadtools .sharePage {
    float: left;
}

.content_threadinfo {
    display: block;
    font-family: Tahoma,Arial,sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    text-align: left;
    margin: 0px -5px;
    padding: 8px 5px 7px 9px;
    position: relative;
    background-color: #EAF3FB;
}

.content_threadtools {
    display: block;
    margin: 0;
    max-height: 25px;
    overflow: hidden;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #A7B1B6;
}

.content_threadtools .content_readmore {
    display: block !important;
    background-color: #FFB636;
    color: #FFF !important;
    padding: 5px 10px !important;
    margin: -2px 0 0 0;
    float: right !important;
    text-decoration: none;
}

.content_threadcontent {
    display: block;
    text-align: justify;
    margin-top: 17px;
    margin-bottom: 5px;
    font-family: Arial,Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #333333;
    line-height: 1.4;
    padding: 0 10px;
}

content_container img {
    text-align: center;
    max-width: 600px;
}

.avatarHolder {
    text-align: center;
}

.content_threadinfo .user,.content_threadinfo .time,.content_threadinfo .view,.content_threadinfo .reply,.content_threadinfo .like {
    display: inline-block;
    background: url("http://cnm24h.tk/images/homeicon.png") no-repeat;
    padding: 3px 0 0 24px;
    margin: 0 10px 0 0;
    height: 20px;
    color: #999 !important;
}

.content_threadinfo .user {
    background-position: 0 0;
}

.content_threadinfo .user a {
    color: #999;
}

.content_threadinfo .user a:hover {
    color: #FF5302;
}

.content_threadinfo .time {
    background-position: 0 -32px;
}

.content_threadinfo .view {
    padding-left: 32px;
    background-position: 0 -57px;
}

.content_threadinfo .reply {
    background-position: 0 -84px;
}

.content_threadinfo .like {
    background-position: 0 -111px;
}

.avatar .img.l {
    width: 192px;
    height: 192px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.imgrcn {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#content.EWRporta_Portal .titleBar {
    display: none;
}

Chú ý trong Template: EWRblock_RecentNews.css tìm http://cnm24h.tk/images/homeicon.png down về (hoặc các bạn cũng có thể down ở file đính kèm nhé) sau đó up file lên host của bạn nhé, sau đó sửa lại đường dẫn đến ảnh.

Chúc các bạn thành công.


Nguồn: forumit24h.net​
 
Back
Top