Share Xenporta đẹp giống iforum.vn

Thảo luận trong 'Hướng Dẫn' bắt đầu bởi TechBuba, 20/10/14.

  1. TechBuba Nhà Báo (Báo Đời)

    Thấy có bạn cũng xin cái trang chủ xenprota của iforum.vn. Hôm nay mình sẽ share code trang chủ xenprota của mình cho các bạn. Cái này đã có trên mạng nhưng mình thấy chưa đẹp nên đã chỉnh theo ý của mình.

    Demo: http://iforum.vn/tin-tuc/cong-nghe/

    Tìm Template: EWRblock_RecentNews thay bang 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">
        <
    xen:foreach loop="$RecentNewsvalue="$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="$newssize="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">
                            <
    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:
    PHP:
    .content_container {
        
    margin-top5px;
        
    padding5px;
        
    background-color#FFF;
        
    box-shadow0 0 6px #EBEBEB;
    }

    .
    content_threadtitle {
        
    font-familyArial,Tahoma,sans-serif;
        
    font-size13pt;
        
    font-weightnormal;
        
    color#2b2b2b;
        
    text-alignleft;
        
    displayblock;
        
    padding8px;
        
    overflowhidden;
        
    white-spacenowrap;
        
    text-overflowellipsis;
        
    background-color#176093;
        
    margin: -6px -5px;
        
    margin-bottom0px;
        
    color#FFF;
    }

    .
    content_threadtitle h2 {
        
    overflowhidden;
        
    text-overflowellipsis;
    }

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

    .
    content_threadtitle a {
        
    color#FFF;
        
    text-decorationnone;
        
    white-spacenowrap;
        
    overflowhidden;
        
    text-overflowellipsis;
    }

    .
    content_threadtools .continue {
        
    floatright;
    }

    .
    content_threadtools .sharePage {
        
    floatleft;
    }

    .
    content_threadinfo {
        
    displayblock;
        
    font-familyTahoma,Arial,sans-serif;
        
    font-size12px;
        
    font-weightnormal;
        
    color#999999;
        
    text-alignleft;
        
    margin0px -5px;
        
    padding8px 5px 7px 9px;
        
    positionrelative;
        
    background-color#EAF3FB;
    }

    .
    content_threadtools {
        
    displayblock;
        
    margin0;
        
    max-height25px;
        
    overflowhidden;
        
    margin-top10px;
    }

    .
    content_threadtools .content_readmore {
        
    displayblock !important;
        
    background-color#FFB636;
        
    color#FFF !important;
        
    padding5px 10px !important;
        
    margin: -2px 0 0 0;
        
    floatright !important;
        
    text-decorationnone;
    }

    .
    content_threadcontent {
        
    displayblock;
        
    text-alignjustify;
        
    margin-top17px;
        
    margin-bottom5px;
        
    font-familyArial,Tahoma,sans-serif;
        
    font-size15px;
        
    font-weightnormal;
        
    color#333333;
        
    line-height1.4;
        
    padding0 10px;
    }

    content_container img {
        
    text-aligncenter;
        
    max-width600px;
    }

    .
    avatarHolder {
        
    text-aligncenter;
    }

    .
    content_threadinfo .user,.content_threadinfo .time,.content_threadinfo .view,.content_threadinfo .reply,.content_threadinfo .like {
        
    displayinline-block;
        
    backgroundurl("iforum.vn/styles/default/homeicon.png"no-repeat;
        
    padding3px 0 0 24px;
        
    margin0 10px 0 0;
        
    height20px;
        
    color#999 !important;
    }

    .
    content_threadinfo .user {
        
    background-position0 0;
    }

    .
    content_threadinfo .user a {
        
    color#999;
    }

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

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

    .
    content_threadinfo .view {
        
    padding-left32px;
        
    background-position-57px;
    }

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

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

    .
    avatar .img.{
        
    width192px;
        
    height192px;
        
    displayblock;
        
    margin-leftauto;
        
    margin-rightauto;
    }

    .
    imgrcn {
        
    displayblock;
        
    margin-leftauto;
        
    margin-rightauto;
    }

    #content.EWRporta_Portal .titleBar {
        
    displaynone;
    }
    Chú ý trong Template: EWRblock_RecentNews.css tìm chỗ
    iforum.vn/styles/default/homeicon.png
    Thay bằng:
    http://iforum.vn/styles/default/homeicon.png

    Những bài viết về xenforo vui long post ở mục sau:
    http://iforum.vn/forums/ma-nguon-xenforo/
     
     
  2. Bình Luận Bằng Facebook

  3. angelmooner

    angelmooner Thành Viên Mới

    Bạn Luka ơi
    Bạn có thể share cho mình code trang chủ iforum.vn được không?
    Cái màu xanh, vàng đó bạn, gồm 1 bài bên trái và các link tiêu đề cùng chuyên mục bên phải ah.
    Thanks bạn nhiều nha
     
  4. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Cái này code html css chỉ chỉnh một tý code xenforo thôi bạn có thể Rip không share đc bạn thông cảm nhé do không phải mình làm ra :D
     
  5. angelmooner

    angelmooner Thành Viên Mới

    Bạn ơi, bạn có giúp mình Rip được không bạn? hoặc chỉ mình cách rip đi bạn. Thanks bạn nhiều lắm lắm
     
    TechBuba thích bài này.
  6. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Tự làm hay tìm hiểu trên mạng có mà bạn :D
     
  7. End

    End Thành Viên Mới

    Bạn ơi, có cách nào để hiển thì youtube nó ra trang chủ ko ạ, mình test mà post video nó ko hiện
     
  8. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Bạn có thể lấy ảnh của video ra trang chủ bạn nhé!
     
    End thích bài này.
  9. End

    End Thành Viên Mới

    Lấy làm sao ạ, bạn chỉ mình với
     
  10. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Đợi mình viết bài hướng dẫn nhé.
     
  11. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    End thích bài này.
  12. me09112001

    me09112001 Thành Viên Mới

    Tại sau mình đổi theo như trên nó vẫn ra thế này ???
    [​IMG]
    sau kỳ lạ thế vẫn thế không chút thay đổi gì ???
    Tại sao ???
     
  13. TechBuba

    TechBuba Nhà Báo (Báo Đời) Thành viên BQT

    Bạn đã làm sai có chú ý để style đang chỉnh sửa nhé :D