Help Collapse Category for xenforo - hiệu ứng thu gọn Category

CHào các bác.
E có làm theo bài này: Link
nhưng nó ko hiển thị cái dấu + hoặc - ở phần thu gọn ở phần category
E làm theo cách bác này là để màu và thì xấu quá : Link
Nhờ bác nào rành code chỉ dùm e nên sửa lại đoạn:


Mã:
.nodeList .category .category_toggle_container a.toggle_arrow {
    background: url("../styles/xenforo/images.png") no-repeat scroll center -180px rgba(0, 0, 0, 0);
    float: right;
    height: 13px;
    text-indent: -9999px;
    width: 13px;
}

để nó hiển thị hình ảnh dấu + - cho dễ nhìn đc không. :(
và kích thước ảnh e nên để là bao nhiêu để nó vừa, và dấu + - đó làm hình ngang hay dọc ạ (ảnh của bài gốc bị mất nên e mù tịt luôn)
Nhờ các bác giúp dùm.
 
V

vanphu113

Khách VNXF
xenforo_com_community_proxy_php_2bce1eedc2c8d818be4c467df3973ec4._.gif
Đầu tiên các bạn vào template node_category_level_1 tìm
PHP:
<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
Thêm vào bên dưới đó code
PHP:
<span class="category_toggle_container">
<a class="toggle_arrow brToggle Tooltip">Collapse Category</a>
</span>
Sau đó bạn vào template Extra.css thêm code sau vào cuối
PHP:
.nodeList .category .category_toggle_container {box-sizing: border-box;display: block;float: right;height: 37px;padding-right: 11px;padding-top: 12px;position: absolute;right: 0;top: 0;width: 37px;
}
.nodeList .category .category_toggle_container a.toggle_arrow {background: url("http://levanphu.com/hvn-images.png") no-repeat scroll center -180px rgba(0, 0, 0, 0);float: right;height: 13px;text-indent: -9999px;width: 13px;
}
Tiếp theo bạn vào tempalte forum_list thêm vào cuối code sau
PHP:
<script>
    $(document).ready(function(){
        $('.brToggle').click(function(){
            $container = $(this).closest('.node.level_1');
            $nodeList = $container.find('.nodeList');
            if(!$nodeList.hasClass('collapse')){
                $(this).addClass('collapse');
                $nodeList.addClass('collapse');
                $nodeList.stop(true,true).slideUp(1000, 'easeOutBounce');
            }else{
                $(this).removeClass('collapse');
                $nodeList.removeClass('collapse');
                $nodeList.stop(true,true).slideDown(1000, 'easeOutBounce');
            }
        });
    });
</script>
 
V

vanphu113

Khách VNXF
Bên forum tôi đấy
 
Gửi bác ảnh icon đóng và mở:
Mã:
.nodeList .category .category_toggle_container a.toggle_arrow
{
    background: url('styles/default/xenforo/img.png') no-repeat center -180px;
    text-indent: -9999px;
    float: right;
    width: 13px;
    height: 13px;
}

.nodeList .category .category_toggle_container a.toggle_arrow.collapse
{
    background-position: center -102px;
}
Cám ơn bác nhiều, có mỗi bác là xem kỹ bài của e :D
 

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