Đây là hướng dẫn mới cho phiên bản website có giao diện mobile.
Trong bài viết này chúng ta sẽ đi tìm hiểu cách tùy chỉnh màu cho chuyên mục tại trang chủweb bán hàng Vietmoz phiên bản mới.
Trước khi đi vào tìm hiểu cách thay đổi, bạn cần biết một chút về cơ chế tự động thay đổi màu theo số lượng chuyên mục tại trang chủ. Trang chủ web bán hàng VietMoz có 4 màu cơ bản chính và sẽ lần lượt thay đổi theo vị trí của các chuyên mục trên trang chủ.
Vì vậy, bạn có thể thay đổi lần lượt màu của từng chuyên mục trên trang chủ theo 4 màu khác hoặc thay đổi cùng lúc tất cả về cùng một màu để đồng bộ với nhận diện.
Trước tiên, để thay đổi màu, ban cần đăng nhập vào công cụ Vietmoz Theme Options, và lựa chọn mục Styling options:
Sau đó, bạn sẽ lựa chọn 1 trong 2 hình thức thay đổi sau:
Hướng dẫn thay đổi tất cả chuyên mục tại trang chủ về cùng màu
Bạn chỉ cần thêm đoạn mã sau vào ngay dưới phần Custom CSS Code như hình vẽ trên:
.home-products .item:nth-child(n) h2 a {background: #mã màu;}Bạn sẽ cần lựa chọn mã màu CSS của màu bạn muốn thay đổi, ví dụ: #55555 và thêm vào vị trí #mã màu trong đoạn code trên.
Hướng dẫn thay đổi thay đổi lần lượt màu của từng chuyên mục trên trang
Tương tự như trên, bạn sẽ cần thêm đoạn code sau và lựa chọn mã màu mà bạn muốn thay đổi:
– vị trí 1, 5, 9,… :
.home-products .item:nth-child(4n+1) h2 a {background: #mã màu;}– vị trí 2, 6, 10,… :
.home-products .item:nth-child(4n+2) h2 a {background: #mã màu;}– vị trí 3, 7, 11,… :
.home-products .item:nth-child(4n+3) h2 a {background: #mã màu;}– vị trí 4, 8, 12,… :
.home-products .item:nth-child(4n+4) h2 a {background: #mã màu;}Lưu ý:
– Riêng phần Giới thiệu trên trang chủ, bạn cần vào mục Tùy chỉnh web bán hàng của Vietmoz Theme Options để đổi màu cũng như tên “Giới thiệu”
– Mã màu CSS có thể được tìm thấy online.