November 6, 2014

[xenforo] Styles Xenporta đẹp cho diễn đàn Xenforo giống Genk


Bước 1: Cài block HotNews
  • Yêu cầu: Bạn phải cài Add-on XenPorta
  • Thực hiện: Nếu đã cài add-on vậy thì bạn hãy giải nén file mình đính kèm phí dưới ra, có một file mang tên làHotNews.xml, bạn import này bằng cách chọn Blocks > Install Block ở mục XenPorta trong Bảng quản trị viên. Đối với những bạn chưa biết cài Xenporta các bạn có thể comment phía dưới mình hướng dàn luôn.
  • tải http://hanhtrinhso.com/attachments/hotnews-zip.846/

Share RecentNews GenK nhé:
recentnews-genk-hts.jpg

EWRblock_RecentNews :
<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />


<div class="newsother mt10">

    <ul id="tabhot"><li id="tab_all" class="first titleactive"><a>Tin mới</a></li><li id="tab_hot" class=""><a>Tin hot</a></li></ul>
</div>
<div class="w690 block1 clearfix">

    <xen:foreach loop="$RecentNews" value="$news" i="$i">
      <xen:if is="{$i}%2!==0">

    <div class="list-news fl pt10 ">
        <div class="list-news-img fl mr30 mt10">
      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/TENMIEN/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                        <h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="h{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           <xen:else/>
       
                                            <div class="list-news fl pt10 alternative">
                                                <div class="list-news-img fl mr30 mt10">
                                                      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/TENMIEN/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                                                </a><h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           </xen:if>                             
    </xen:foreach>
</div>


<div class="w690 block2 clearfix">

    <xen:foreach loop="$RecentNews" value="$news" i="$i">
    <xen:if is="{$i}>10">
      <xen:if is="{$i}%2!==0">
    <div class="list-news fl pt10 ">
        <div class="list-news-img fl mr30 mt10">
      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/TENMIEN/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                 <h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="h{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           <xen:else/>
       
                                            <div class="list-news fl pt10 alternative">
                                                <div class="list-news-img fl mr30 mt10">
                                                      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/TENMIEN/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                                                </a><h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
                  </xen:if>
           </xen:if>                             
    </xen:foreach>
</div>


<script type="text/javascript">
$(document).ready(function() {
    var tabActive = $.getCookie('tabActive');
    if(tabActive==null) { $.setCookie('tabActive', 'li#tab_all'); tabActive = 'li#tab_hot';}
    $(tabActive).addClass('titleactive');
    if(tabActive =='li#tab_all')
    {
        $('.block2').addClass('hide')
        $('.block1').removeClass('hide')
        $('li#tab_all').addClass('titleactive')
        $('li#tab_hot').removeClass('titleactive')
    }
    if(tabActive =='li#tab_hot')
    {
        $('.block2').removeClass('hide')
        $('.block1').addClass('hide')
        $('li#tab_hot').addClass('titleactive')
        $('li#tab_all').removeClass('titleactive')
        $.setCookie('tabActive', 'li#tab_hot');
    }

});
$('li#tab_all').click(function(){
    $('.block2').addClass('hide')
    $('.block1').removeClass('hide')
    $('li#tab_all').addClass('titleactive')
    $('li#tab_hot').removeClass('titleactive')
    $.setCookie('tabActive', 'li#tab_all');
});
$('li#tab_hot').click(function(){
    $('.block1').addClass('hide')
    $('.block2').removeClass('hide')
    $('li#tab_hot').addClass('titleactive')
    $('li#tab_all').removeClass('titleactive')
    $.setCookie('tabActive', 'li#tab_hot');
});
$('.tab3').click(function(){
    $('#Block3').removeClass('selected')
    $('#Block3').addClass('hide')
    $('#Block4').removeClass('selected')
    $('#Block5').addClass('selected')
    $('.tab3').addClass('active')
    $('.tab1').removeClass('active')
    $('.tab1 span').removeClass('active')
    $('.tab2').removeClass('active')
    $.setCookie('tabActive', '.tab3');

});
</script>

    <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>
Đừng quên thay TENMIEN=domain của bạn nhé!

EWRblock_RecentNews.css :
.hide {
display: none;
}
a:hover {
text-decoration: none !important;
}
#tabhot li a {
cursor: pointer;
}

.topRightBlocks .widget h3 {
display: none;
}

#hot-focus-2 .hot-topic-header-2 .hot-topic-title-header-2 h3, .product-focus .hot-topic-header-2 .hot-topic-title-header-2 h3 {
display: block !important;
}
Lưu ý: Các bạn phải vào cài cho RecenNews lấy ít nhất là 20 tin nhé!
Tải thêm file phía dưới có kèm theo tệp css cho lên thư mục chính host và bỏ code sau:
<link type="text/css" rel="stylesheet" href="genk.min.1.20.css">
Giữa thẻ <head></head> trong PAGE_CONTAINER

No comments:

Post a Comment