nếu như bạn khiến cho việc nheièu với Flatsome bạn sẽ thấy trong category Flatsome chỉ sở hữu 2 kiểu hiển thị là list và grid , Hiện thị tương đối nhàm chán , hôm nay tớ chỉ cách Custom category Flatsome bằng Css cho chuyên mục đẹp mắt và không giống những mặc định mình thường thấy nhé
Custom category Flatsome bằng Css cho chuyên mục đẹp mắt
muốn custom Category vào
Tùy Chỉnh /Blog / Blog Archive = >Chọn qua List
Custom category Flatsome bằng Css cho chuyên mục đẹp mắt
Quay lại Custom css nhé thêm code vô
<br /> /*Custom category Flatsome - Flatsome.xyz */<br /> .blog-archive .post-item:nth-child(1) .box-image <br /> width: 55%!important;<br /> <br /> .post-item:nth-child(1) .box-text .post-titlefont-size:18px;margin-bottom:10px<br /> .blog-archive .post-item:nth-child(1) .box-textpadding-top:0;padding-right:0;padding-bottom:0;<br /> <br /> .blog-archive .post-item:nth-child(2), .blog-archive .post-item:nth-child(3), .blog-archive .post-item:nth-child(4),<br /> .blog-archive .post-item:nth-child(5) <br /> max-width: 50%;<br /> flex-basis: 50%;<br /> display: block !important;<br /> <br /> .blog-archive .post-item:nth-child(2) .box-text p, .blog-archive .post-item:nth-child(3) .box-text p, .blog-archive .post-item:nth-child(4) .box-text p,<br /> .blog-archive .post-item:nth-child(5) .box-text p<br /> display:none<br /> <br /> .box-vertical.box-image, .box-vertical .box-text <br /> display: inherit;<br />
|
một
hai
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*Custom category Flatsome - Flatsome.xyz */
.blog-archive .post-item:nth-child(1) .box-image
width: 55%!important;
.post-item:nth-child(1) .box-text .post-titlefont-size:18px;margin-bottom:10px
.blog-archive .post-item:nth-child(1) .box-textpadding-top:0;padding-right:0;padding-bottom:0;
.blog-archive .post-item:nth-child(2), .blog-archive .post-item:nth-child(3), .blog-archive .post-item:nth-child(4),
.blog-archive .post-item:nth-child(5)
max-width: 50%;
flex-basis: 50%;
display: block !important;
.blog-archive .post-item:nth-child(2) .box-text p, .blog-archive .post-item:nth-child(3) .box-text p, .blog-archive .post-item:nth-child(4) .box-text p,
.blog-archive .post-item:nth-child(5) .box-text p
display:none
.box-vertical.box-image, .box-vertical .box-text
display: inherit;
|
Sau khi thêm xong lưu lại và xem kết quả nhé
có THỂ BẠN để ý
- Tự động thêm thẻ alt khi upload hình ảnh lên bài viết WordPress
- cách tạo 1 sidebar bằng code function.php
- chỉ dẫn xóa phông nền ảnh Online nhanh và đơn giản
- Đổi tên Related product thành sản phẩm như vậy trong Woocommerce WordPress
- cách thêm hình cho tab trong flatsome
- Plugin YITH WooCommerce Compare – so sánh sản phẩm trong WooCommerce wordpress
Custom category Flatsome bằng Css cho chuyên mục đẹp mắt
trong khoảng bài một – > 5 của danh mục được custom lại nhé
ví như bạn làm ko được với thể liên hệ tớ để được giúp nhé
Chúc bạn thành công !
Theo : https://downvn.net