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,504
Được Like
10,751
đẹ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,504
Được Like
10,751
à 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,504
Được Like
10,751
QTV => Quá tuyệt vời (y)
 

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
877
Được Like
1,467
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


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