Addon Style add-on VNXF More Thread

logliu21

Thượng Đế
Tham gia
25/09/2016
Bài viết
54
Được Like
24
Hầu như các bạn ai cũng biết đến add-on này ^^..
Đây là giao diện mặc định của add-on
upload_2017-7-7_16-18-13.png


Thì mình đã fix lại giao diện mới cho add-on như sau:
* Trên máy tính:
upload_2017-7-7_16-18-58.png


* Trên điện thoại:
upload_2017-7-7_16-20-32.png



## Hướng dẫn
Các bạn tìm template VNXF_more_thread
thay toàn bộ bằng
Mã:
<xen:if is="{$vnxfpost} || {$vnxfnew}">
<style>
a.img_items {
    display: block;
    float: left;
    height: 130px;
    margin-right: 10px;
    overflow: hidden;
    width: 100%;
    border:1px solid #F0F0F0;
}
a.img_items img {
    #max-height: {$opt.himg}px;
    width: 100%;
}
</style>
<xen:require css="VNXF_More_Thread.css" />
    <div class="HotBlock">
        <xen:if is="{$vnxfpost}">
            <div class="HotBlock_wrp">
                <div class="header_rc header_hb">
                    <div class="title_rc">
                        Quan tâm nhiều
                    </div>
                </div>
                <div class="HotBlock_ct">
                    <xen:foreach loop="$vnxfpost" value="$news" i="$i">
                        <div class="HotBlock_items" style="height:<xen:if is="{$opt.hthread} != 0 && {$showimg}">{$opt.hthread}px<xen:else/><xen:if is="{$showimg}">80px<xen:else/>50px</xen:if></xen:if>">
                            <xen:if is="{$showimg}">
                                    <a class="img_items" href="{xen:link threads, $news}" title="{$news.title}" target="_blank">
                                        <xen:if is="{$news.attach}">
                                            <img src="{xen:link attachments, $news.attach}" alt="{$news.title}" title="{$news.title}" style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); " />
                                        <xen:elseif is="{$news.image}" />
                                            <img src="{$news.image}" alt="{$news.title}" title="{$news.title}" style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); "/>
                                        <xen:else />
                                            <img src="{$opt.bia}" alt="{$news.title}" title="{$news.title}"  style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); "/>
                                        </xen:if>
                                    </a>
                                </xen:if>
                            <div class="ct_items" style="    padding: 20px;">
                            <h4 style="    background: rgba(0,0,0,0.5); position: absolute;text-decoration: none;text-transform: uppercase;#width:100%;position: absolute; line-height: 1.2; outline: 0; font-family: 'Noto Sans',sans-serif; text-align: center; color: #fff; top: 50%; padding: 0 10px 0 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); ">
                                <a href="{xen:link threads, $news}" title="{$news.title}" target="_blank" class="title_items">{$news.title}</a>
                                <span class="info_items">bởi <a href="{xen:link members, $news}" class="username">{$news.username}</a>, <abbr title="{xen:datetime $news.post_date, 'absolute'}" class="DateTime">{xen:datetime $news.post_date, 'absolute'}</abbr></span>
                            </h4>
                            </div>
                        </div>
                    </xen:foreach>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </xen:if>
        <xen:if is="{$vnxfnew}">
            <div class="HotBlock_wrp">
                <div class="header_rc header_hb">
                    <div class="title_rc">
                        Bài viết mới
                    </div>
                </div>
                <div class="HotBlock_ct">
                    <xen:foreach loop="$vnxfnew" value="$news" i="$i">
                        <div class="HotBlock_items" style="height:<xen:if is="{$opt.hthread} != 0 && {$showimg}">{$opt.hthread}px<xen:else/><xen:if is="{$showimg}">80px<xen:else/>40px</xen:if></xen:if>">
                            <xen:if is="{$showimg}">
                                    <a class="img_items" href="{xen:link threads, $news}" title="{$news.title}" target="_blank">
                                        <xen:if is="{$news.attach}">
                                            <img src="{xen:link attachments, $news.attach}" alt="{$news.title}" title="{$news.title}" style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); " />
                                        <xen:elseif is="{$news.image}" />
                                            <img src="{$news.image}" alt="{$news.title}" title="{$news.title}" style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); " />
                                        <xen:else />
                                            <img src="{$opt.bia}" alt="{$news.title}" title="{$news.title}" style=" -webkit-filter: blur(5px); -o-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); " />
                                        </xen:if>
                                    </a>
                                </xen:if>
                            <div class="ct_items" style="    padding: 20px;">
                            <h4 style="   background: rgba(0,0,0,0.5); position: absolute; text-decoration: none;text-transform: uppercase;#width:100%;position: absolute; line-height: 1.2; outline: 0; font-family: 'Noto Sans',sans-serif; text-align: center; color: #fff; top: 50%; padding: 0 10px 0 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); ">
                                <a href="{xen:link threads, $news}" title="{$news.title}" target="_blank" class="title_items">{$news.title}</a>
                                <span class="info_items">bởi <a href="{xen:link members, $news}" class="username">{$news.username}</a>, <abbr title="{xen:datetime $news.post_date, 'absolute'}" class="DateTime">{xen:datetime $news.post_date, 'absolute'}</abbr></span>
                           </h4>
                            </div>
                        </div>
                    </xen:foreach>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </xen:if>
    </div>
</xen:if>

Và VNXF_more_thread.css: Thay toàn bộ nha
Mã:
.header_rc {
    border-bottom: 2px solid rgb(0, 68, 114);
    position: relative;
    width: auto;
}
.title_rc {
    background: none repeat scroll 0 0 #006d96;
    color: #fff;
    float: left;
    font-size: 13px;
    padding: 10px;
    position: absolute;
    text-transform: uppercase;
    top: -37px;
}
.HotBlock {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
    clear:both;
}
.HotBlock_wrp {
    background: none repeat scroll 0 0 #ffffff;
    margin-top: 15px;
    padding-top: 30px;
}
.HotBlock_ct {
    padding: 20px 0 0;
}
.header_hb .title_rc {
    background: none repeat scroll 0 0 #444;
}
.HotBlock_items {
    float: left;
    margin-bottom: 10px;
    overflow: hidden;
    padding-left: 2%;
    width: 48%;
    position: relative;
}
.title_items {
    color: rgb(245, 245, 245) !important;
    display: block;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
}
.info_items {
    color: #fff !important;
    font-size: 10px;
}
.info_items a {
    color: #fff;
}

@media (max-width: 900px) {
.HotBlock_items {
    float: none;
    padding-left: 2%;
    width: 96%;
}
.HotBlock_items .ct_items{
    display: inline;
}
}
 
Sửa lần cuối:

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,956
Được Like
11,295
đẹp đấy bạn, nhưng mà chữ phía dưới nên đổi màu cho dễ nhìn xíu là ok
 

logliu21

Thượng Đế
Tham gia
25/09/2016
Bài viết
54
Được Like
24
à thấy rồi a.. mà hok pik đổi màu j luôn á kkk..
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,956
Được Like
11,295
à thấy rồi a.. mà hok pik đổi màu j luôn á kkk..
màu gì sáng sáng ấy là sẽ rõ, mình nghĩ màu trắng cũng được, tuy giống tiêu đề nhưng rõ ràng :)
 

logliu21

Thượng Đế
Tham gia
25/09/2016
Bài viết
54
Được Like
24
Fix lại cái @media (max-width)+ lớp phủ ..
Coming Soon


upload_2017-7-7_18-2-24.png

upload_2017-7-7_18-4-50.png
 
Sửa lần cuối:
  • Like
Reactions: PVS

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,956
Được Like
11,295
QTV => Quá tuyệt vời (y)
 

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
882
Được Like
1,473
Rất hoan nghênh sự đóng góp của bạn, tiếp tục phát huy nhé :)
 

singh

Thượng Đế
Tham gia
08/06/2015
Bài viết
471
Được Like
281
cảm ơn. khi nào share trang chủ vậy em
 

dinhyen

Thượng Đế
Tham gia
22/05/2017
Bài viết
103
Được Like
36
Bác có cái adon quan tâm nhiều ở đâu thế.
Em đang cần em chỉ thấy nó có cái bài mới thôi.
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom