Share code RecentNews đẹp cho Xenporta

Thảo luận trong 'Mã nguồn mở Xenforo' bắt đầu bởi Trần Văn Cường, 19/6/16.

  1. Trần Văn Cường

    Trần Văn Cường I love CNTT Thành viên BQT Thành viên BQT

    Tham gia ngày:
    8/11/15
    Bài viết:
    3,693
    Đã được thích:
    43
    Điểm thành tích:
    48
    Giới tính:
    Nam
    Nghề nghiệp:
    Sinh Viên
    Nơi ở:
    Quảng Ninh thân yêu!
    Web:

    Share code RecentNews 3 cột cho Xenporta

    Xem DEMO

    Ảnh DEMO


    huong-dan-tao-recentnew-dep.JPG

    Hướng dẫn: Trước hết bạn phải cài Xenporta bạn nào chưa có thì tìm download nhé.


    Bước 1: Bạn download file đính kèm.
    Bước 2: Upload file RecentNews.php vào thư mục website /library/EWRporta/Block
    Bước 3: Import file RecentNews.xml tại admin.php -> Home -> XenPorta -> Block -> Install block
    Bước 4: Kéo RecentNews vào Layout: PORTAL

    keo-recentnews.JPG


    Hướng dẫn sửa code:

    Appearance -> Styles -> Giao diện sử dụng-> Templates -> EWRblock_RecentNews


    CODE:
    Select All
    <xen:require css="message_user_info.css" />
    <
    xen:require css="bb_code.css" />
    <
    xen:require css="EWRblock_RecentNews.css" />
    <
    div id="Block1">
    <
    div class="block-title"><a href="http://cnttqn.com/forums/thu-thuat-tin-hoc/" title="Tin tức"><span>Tin tức Sự kiện </span></a></div>
    <
    ul class="block1">
    <
    xen:foreach loop="$RecentNewsvalue="$newsi="$i">
    <
    xen:if is="{$i}<7">

            <
    li>
            <
    div class="block-content" id="{$news.thread_id}">
                <
    div class="img-thumb">
                
                <
    xen:if is="{$news.promote_icon} != 'disabled'">
                    <
    xen:if hascontent="true">

                                <
    xen:contentcheck>
                                <
    xen:if is="{$news.attach}">
                                    <
    a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://res.cloudinary.com/tint/image/fetch/w_250,h_150,c_thumb/http://cnttqn.com/{$news.attach.thumbnailUrl}"  /></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}" class="pin_pic_img_a"><img src="{$news.image}alt="{$news.image}/></a>
                                <
    xen:else />
                                    <
    a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://cnttqn.com/images/not-img.jpg" /></a>
                                </
    xen:if>
                                </
    xen:contentcheck>
                    </
    xen:if>
                </
    xen:if>
                
                </
    div>
                <
    div class="thread-info">
                <
    a href="{xen:link threads, $news}" title="{$news.title}class="title">{$news.title}</a>
        
                <
    class="desc">{xen:helper snippet$news.message100}</p>
                </
    div>
            </
    div>
            </
    li>
    </
    xen:if>
    </
    xen:foreach>
    </
    ul>    
    </
    div>


    http://res.cloudinary.com/tint/image/fetch/w_250,h_150,c_thumb
    tint bạn phải đăng ký tài khoản bên cloudinary ảnh mới chạy nha. Của mình là:
    http://res.cloudinary.com/cnttqn-com/image/fetch/w_250,h_150,c_thumb

    EWRblock_RecentNews.css


    CODE:
    Select All
    @media (min-width:128px)
    {
    #Block1 .block1 li {width:100%;overflow:hidden;float:left;background-color: #FDFDFD;}
    #Block1 .block1 .block-content {margin:7px;min-height:250px}
    #Block1 .block1 .img-thumb {height:auto;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
    .block-title {
        
    backgroundurl(/styles/default/xenforo/icon_red_top.pngno-repeat left top;
        
    background-size236px 40px;
        
    margin-left6px;
        
    border-bottom2px #0C4C80 solid;
            
    background-color#FDFDFD;
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(/styles/default/xenforo/title-box-top.pngno-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    }
    @
    media (min-width:540px)
    {
    #Block1 .block1 li {width:33.33%;overflow:hidden;float:left;background-color: #FDFDFD;}
    #Block1 .block1 .block-content {margin:7px;min-height:250px}
    #Block1 .block1 .img-thumb {height:auto;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
    .block-title {
        
    backgroundurl(/styles/default/xenforo/icon_red_top.pngno-repeat left top;
        
    background-size236px 40px;
        
    margin-left6px;
        
    border-bottom2px #0C4C80 solid;
            
    background-color#FDFDFD;
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(/styles/default/xenforo/title-box-top.pngno-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    }
    @
    media (min-width:740px)
    {
    #Block1 .block1 li {width:33.33%;overflow:hidden;float:left;background-color: #FDFDFD;}
    #Block1 .block1 .block-content {margin:7px;min-height:250px;}
    #Block1 .block1 .img-thumb {height:120px;overflow:hidden}
    #Block1 .block1 .img-thumb img {width:100%;height:100%}
    #Block1 .block1 .thread-info {padding:6px}
    #Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
    #Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
    #Block1 .block-content .desc {
    padding-top:10pxcolor#2E2E30;
        
    font-familytahoma;
        
    font-size14px;
        
    line-height21px;
        
    text-alignjustify;
    }
    .
    block-title {
        
    backgroundurl(/styles/default/xenforo/icon_red_top.pngno-repeat left top;
        
    background-size264px 40px;
        
    margin-left: -26px;
        
    border-bottom2px #0C4C80 solid;
       
    }
    .
    block-title span {
    font-familyUTM_Headerarial;
    text-transformuppercase;
    color#FFF;
    displayinline-block;
    line-height30px;
    padding0 40px 0 30px;
    backgroundurl(/styles/default/xenforo/title-box-top.pngno-repeat right top;
    background-size300px 300px;
    font-weightnormal;
    margin-top10px;
    font-size14px;
        
    font-weightbold;
    }
    #Block1 .block-title span {
    background-position100% -40px;
    }
    .
    fb2
    {
    padding-top:5px;
    }
    }

    CSS có sử dụng Responsive cho mobile.


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

    Tập tin đính kèm:


    Bình Luận Bằng Facebook

    data-href="https://cnttqn.com/threads/share-code-recentnews-dep-cho-xenporta.2249.html"