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

Tham gia
14/01/2016
Bài viết
155
Được Like
54
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.
 

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
Có addon rồi nhé chịu khó search trước khi hỏi.Chiều mình đính kèm cho :D
 
Tham gia
14/01/2016
Bài viết
155
Được Like
54
Có addon rồi nhé chịu khó search trước khi hỏi.Chiều mình đính kèm cho :D
ý m là muốn sửa cho trong code cho gọn chứ addon vào rầy rà lắm bạn.
m thay 1 hình tĩnh rồi ko cần nữa b ak, nhìn củng đẹp mắt rồi chứ ko màu đỏ như web bạn kia bẩn quá :))
 
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>
 
Tham gia
14/01/2016
Bài viết
155
Được Like
54
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom