Addon Style add-on VNXF More Thread

logliu21

logliu21

Gefreiter
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:
Bài viết liên quan
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Style Variation Default - Biến thể giao diện mặc định cho XenForo 2.3 1.1.0 Patch 1 bởi PVS,
Hello World add on using Routes - Add-on Hello World sử dụng Routes cho XenForo 2.3 1.0.0 bởi PVS,
Thread Reply Ban Teeth - Mở rộng chức năng Thread Reply Ban cho XenForo 2.3 2.10.3 bởi PVS,
[cXF] Style Variations in Navigation - Biến thể giao diện trong Navigation cho XenForo 2.3 1.4.0 bởi PVS,
[cXF] Style Variations in Navigation - Biến thể giao diện trong Navigation cho XenForo 2.3 1.3.0 bởi PVS,
Được quan tâm
[Ap Yazılım] External Link Redirector - Chuyển hướng liên kết ngoài cho XenForo 2.3 1.1.0 bởi PVS,
Standard Library - Thư viện tiêu chuẩn cho XenForo 2.3 1.22.4 bởi PVS,
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Bài viết mới
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Standard Library - Thư viện tiêu chuẩn cho XenForo 2.3 1.22.4 bởi PVS,
[Ap Yazılım] External Link Redirector - Chuyển hướng liên kết ngoài cho XenForo 2.3 1.1.0 bởi PVS,
[VNT] ACP Custom 2.8.6 - Ẩn tệp đính kèm có thông báo bởi thahtrung06,
[Ap Yazılım] Postbit - Giao diện người dùng hiện đại cho XenForo 2.3 1.0.0 bởi PVS,
[Ap Yazılım] User Panel - Bảng điều khiển người dùng cho XenForo 2.3 1.0.0 bởi PVS,
đẹ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
 
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.
 
3,080 10 5
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

Texlink

Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

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