Tuesday, December 3, 2024

Cách đánh số trong css theme flatsome wordpress (phần 1)

Một số trang thiết kế cần đánh số mà việc custom đánh số rất mất thời gian, chưa kể sau này muốn thêm bớt dữ liệu phải nhập lại các thống kê này.

Để khắc phục vấn đề trên hôm nay An Nhiên share cho các bạn cách thức đánh số trong css theme flatsome wordpress hoàn toàn tự động bằng CSS. Các bạn đọc và hiểu hết được bài viết này thì sẽ làm rất thành thạo nhé.

Giải pháp đánh số trong css theme flatsome wordpress

Cách đánh số trong css theme flatsome wordpress
Cách đánh số trong css theme flatsome wordpress

CÓ THỂ BẠN QUAN TÂM

Các bài viết về theme Flatsome Wordpess

Trên hình bạn thấy các số được đánh từ 1 đến 8 hoàn toàn tự động theo list (ul li trong css)

Để làm được như vậy, ở trình biên soạn dữ liệu, các bạn nhập dữ liệu sau đấy chọn dữ liệu qua list như hình.

Cách đánh số trong css theme flatsome wordpress
Cách đánh số trong css theme flatsome wordpress

Sau đó các bạn thêm đoạn code css sau vào custom của theme đang dùng nhé:

/* Count List – Flatsome.xyz */
.rightthicong ul li, .leftthicong ul li
list-style: none;
counter-increment: h3;
display: list-item;
line-height: một.5;
padding: 7px;
.rightthicong ul li:before
display: list-item;
content: “0” counter(h3) ” “;
color: lightsalmon;
font-weight: bold;
position: absolute;
margin-left: -40px;
border: 2px solid #fea8856e;
border-radius: 99px;
padding: 2px 5px;
.leftthicong ul li:before
display: list-item;
content: “0” counter(h3) ” “;
color: lightsalmon;
font-weight: bold;
position: absolute;
margin-left: 95%;
border: 2px solid #fea8856e;
border-radius: 99px;
padding: 2px 5p

Note : hai class .rightthicong và .leftthicong là class đặt cho hai bảng ( table ) chưa text nhé – để css cho nằm bên trái và bên phải , bạn có thể đặt khác nhé.

cái dòng content: “0” counter(h3) ” “; sẽ đếm dữ liệu và chèn số 0 và trước số count được bạn nhé , bạn có thể đổi thay theo ý của bạn.

Sau khi bạn chèn css thì số sẽ tự động chạy , sau này bạn thêm một mẫu ( list bên dưới ) số trật tự sẽ thành max + một nhé.

Trên đây là toàn bị quá trình để có thể đánh số thứ tự trong css theme flatsome WordPress.

Cảm ơn các bạn đã đọc bài viết này!

5/5 - (2 votes)
46,788FansLike

Bài Viết Mới