Addon Share code RecentNews đẹp cho Xenporta v2

tranvcuong94

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
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

demo.JPG


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

bao-vien-3.JPG


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

bao-vien-2.JPG


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

1-vien.JPG


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

keo-recentnews-jpg.12705.html


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.


PHP:
<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

PHP:
@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
 

Đính kèm

  • RecentNews.php
    6.5 KB · Lượt xem: 49
  • RecentNews.xml
    18.5 KB · Lượt xem: 48
Sửa lần cuối:

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,698
đẹp và logic :D, nhưng mình thích cái có viền của ipad hơn ^^
 
  • Like
Reactions: THB

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,698
haha, ý là mình thích có viền á ^^, chứ thật ra nhìn cũng ok mà ^^, tks for share
 

tranvcuong94

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
Mình chưa nâng cấp lên xenporta 2. Bạn thử xem sao.
 

Nausixkiz

Corporal
Tham gia
28/06/2016
Bài viết
138
Được Like
78
Xenprota 2 ít người làm quá thôi xuống 1.6.0 vậy
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,698
mình cũng bị lệch ^^ :D, chủ thớt fix hộ hii
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom