giả dụ bạn khiến cho việc nheièu có Flatsome bạn sẽ thấy trong category Flatsome chỉ với 2 kiểu hiển thị là list và grid , Hiện thị khá nhàm chán , hôm nay tớ chỉ cách thức Custom category Flatsome bằng Css cho chuyên mục đẹp mắt và ko giống các 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 lúc thêm xong lưu lại và xem kết quả nhé
với THỂ BẠN quan tâm
- Tự động thêm thẻ alt lúc upload hình ảnh lên bài viết WordPress
- bí quyết tạo 1 sidebar bằng code function.php
- hướng dẫn xóa phông nền ảnh Online nhanh và đơn thuần
- Đổi tên Related product thành sản phẩm như vậy trong Woocommerce WordPress
- bí quyết 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
từ bài 1 – > 5 của danh mục được custom lại nhé
ví như bạn khiến ko được sở hữu thể địa chỉ tớ để được giúp nhé
Chúc bạn thành công !
Theo : https://downvn.net
