Addon Share code RecentNews đẹp cho Xenporta v2

[tranvcuong94]

Share code RecentNews đẹp cho xenporta V2

Xem lại Bài trước

Bài này mình sẽ chia sẻ tiếp giao diện dễ nhìn hơn và chuẩn Responsive cho các kích thước màn hình.

Xem DEMO Tại Đây

Ảnh DEMO

Responsive cho ipad: 3 cột có đường bao viền.

Responsive cho màn hình khoảng 5inch - 7inch: 2 cột có đường bao viền.

Responsive cho màn hình từ 4inch và dưới 4inch : 1 cột có đường bao viền.

Có hiệu ứng chuyển đổi màu chữ khi rê chuột vào hình ảnh.

Hướng dẫn: Trước hết bạn phải cài Xenporta bạn nào chưa có xem tại đây

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

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

Appearance -> Styles -> Giao diện sử dụng-> Templates -> EWRblock_RecentNews
Chú ý: Nhớ thay đổi yourdomain thành website của bạn ở code link ảnh bên dưới.

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

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



<div id="Block1">
<div class="td">
<div class="tieu-de"><a href="/forums/tin-tuc-va-su-kien/">Tin tức - Sự kiện </a></div><div class="stripe-line"></div>
</div>
<div class="clear"></div>
<ul class="block1">
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i}<26">

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


            </div>
        </div></a>
        </li>
</xen:if>
</xen:foreach>
</ul>

</div>

EWRblock_RecentNews.css

@media (min-width:128px)
{
#Block1 .block1 li {width:100%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%; margin-top: 8px;}
#Block1 .block1 .thread-info {
padding:6px}
#Block1 .block1 .title {font-size:14px;line-height:18px;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 {
    background: url(/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 236px 40px;
    margin-left: 6px;
    border-bottom: 2px #0C4C80 solid;
        background-color: #FDFDFD;
            margin-bottom: 5px;
                display: inline-block;
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
}
@media (min-width:340px)
{
#Block1 .block1 li {width:50%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;

}
#Block1 .block1 .title {font-size:14px;line-height:18px;font-weight:bold}
#Block1 .block-content {}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 236px 40px;
    margin-left: 6px;
    border-bottom: 2px #0C4C80 solid;
        background-color: #FDFDFD;
            margin-bottom: 5px;
                display: inline-block;
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
#Block1 .block-title span {
background-position: 100% -40px;
}
.qcmobi2
{
  display: none;
}
}
@media (min-width:540px)
{
#Block1 .block1 li {width:33.3%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;

}
#Block1 .block1 .title {font-size:14px;line-height:18px;font-weight:bold}
#Block1 .block-content {}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 236px 40px;
    margin-left: 6px;
    border-bottom: 2px #0C4C80 solid;
        background-color: #FDFDFD;
            margin-bottom: 5px;
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
#Block1 .block-title span {
background-position: 100% -40px;
}
}
@media (min-width:1100px)
{
#Block1 .block1 li {
width: 265px !important;
height: 195px !important;
float:left;background-color: #FDFDFD;
}
#Block1 .block1 .block-content {margin:7px;min-height:179px;background-color: #FDFDFD;}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .img-thumb img:hover {}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;
       font-weight: bold;
}
#Block1 .block1 .title {font-size:14px;line-height:18px;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 0px 0px #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;
    font-family: tahoma;
    font-size: 14px;
    line-height: 21px;
    text-align: justify;
}
.block-title {
    background: url(/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 264px 40px;
    margin-left: -26px;
    border-bottom: 2px #0C4C80 solid;
        margin-bottom: 5px;

}
}
.tieu-de
{
    float: left;
    margin-right: 10px;
    font-size: 22px;
    text-transform: uppercase;

    color: #2e6ab3;
    font-weight: bold;
    padding-left: 10px;
}
.tieu-de a
{
color: #2e6ab3;
}
.stripe-line
{
background: url(http://cnttqn.com/images/title-home.png);
    height: 12px;
    margin-top: 10px;
        overflow: hidden;
}
.td
{
padding: 3px 0;
        margin-top: 12px;
}

Bài viết có thể thiếu sót mong các bạn góp ý.

Nguồn: VNXF.VN

 

[PVS]

đẹp và logic , nhưng mình thích cái có viền của ipad hơn ^^

 

[tranvcuong94]

Bỏ viền cho mát mẻ Bác ạ.

 

[PVS]

haha, ý là mình thích có viền á ^^, chứ thật ra nhìn cũng ok mà ^^, tks for share

 

[Nausixkiz]

K xài cho xenprota 2 à bạn

 

[tranvcuong94]

Mình chưa nâng cấp lên xenporta 2. Bạn thử xem sao.

 

[Nausixkiz]

K add được vào widget của xenprota 2

 

[tranvcuong94]

Đợi V3 bạn nhé. )

 

[Nausixkiz]

Xenprota 2 ít người làm quá thôi xuống 1.6.0 vậy

 

[lacluoc]

Đợi V3 bạn nhé. )

cài block recentnews rồi có cần cài lại cái của bạn ko nhỉ

 

[lacluoc]

Đợi V3 bạn nhé. )

Mình ko hiểu sao cài như hướng dẫn mà nó cứ bị xô lệch thế này

 

[PVS]

mình cũng bị lệch ^^ , chủ thớt fix hộ hii