Thay vì dùng 1 plugin để custom tab đẹp và long lanh , Hôm nay tớ giới thiệu các bạn cách custom tab icon theme flatsome đẹp nhé
Tab icon đẹp cho theme flatsome – chowebs.com
Thay vì dùng tab bằng Flugin hoặc HTML nhúng sao ta không dùng chính Tab của Flatsome nhi 🙂 , Để tìm hiểu nhiều hơn cách chèn hèn vào tab ta có thể tìm hiểu qua bài
- Cách dùng hình trong Tab trong Flatsome
- Tạo tab bên phải và add thêm Title trong flatsome
Cách làm Tab icon đẹp cho theme flatsome
Để làm tab có Icon màu đẹp như hình , ta tạo 1 block như hình và đặt class = iphone14 ( class này mình dùng trong css bên dưới )
Chú ý :
Chọn Tab Dạng Simple
Mỗi tab đặt 1 màu – Cái name nó sẽ là ID của tab và dùng nó để css , Nên dùng tiếng anh hoặc tiếng việt không dấu .
sau khi làm 2 việc trên xong ta chèn css vào là xong nhé
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/*Tab Iphone 14*/
.iphone14 ul li {
border-radius:99px!important;
width:40px;
height:40px;
border:1pxsolid#fff;
box-shadow:inset0015px0rgb(000/30%);
}
.iphone14 ul li.active {
box-shadow:005px5px#e8e8e8;
}
.iphone14 ul li span {
visibility:hidden;
}
.iphone14 li#tab-xanh {
background-color:#99adbf;
}
.iphone14 li#tab-màu-Đen {
background-color:black!important;
}
.iphone14 li#tab-màu-hồng {
background-color:#f7defc!important;
}
.iphone14 li#tab-màu-đỏ {
background-color:red!important;
}
.iphone14 li#tab_màu-xám {
background-color:#fff!important;
}
.iphone14 ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-center {
order:2;
padding-top:10px;
}
|
Giải thích 1 xíu về CSS trên
- class có tên .iphone14 li#tab-xanh => là tab có tên mình đặt là name là XANH ( ở hình trên )
- class .iphone14 ul li span { visibility: hidden; } => Cho phép ẨN text name của tab đi nhưng ko ẩn tab ( nó khác với Dislay :none nhé )
- Class .iphone14 ul.nav.nav-simple.nav-uppercase.nav-size-normal.nav-center { order: 2; padding-top: 10px; } => Chuyển vị trí từ Phía trên xuống dưới nhé
OK xong bạn chỉ việc lưu lại thôi và xem kết quả nào
Chúc anh chị thành công
theo : https://chowebs.com/tab-icon-dep-cho-theme-flatsome-chowebs-com.html
