Addon Style add-on VNXF More Thread

logliu21

Gefreiter
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

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,453
đẹ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

Gefreiter
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

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,453
à 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

Gefreiter
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

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,453
QTV => Quá tuyệt vời (y)
 

Blue

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

singh

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

dinhyen

Corporal
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