Làm thế nào để tuỳ chỉnh CSS màu sắc hiển thị Module ?

Hướng dẫn sau đây cho phép bạn tuỳ chỉnh màu sắc cho từng Module hiển thị bên ngoài Trang chủ ứng dụng.

Đi tới Tuỳ chỉnh CSS nâng cao tại TAB Màu sắc, nhập đoạn code sau:

.homepage .layout li:nth-child(1) { 
    background-color: #0099C7; 
} 
.homepage .layout li:nth-child(2) { 
    background-color: #ffd64b; 
} 
.homepage .layout li:nth-child(3) { 
    background-color: #ff3a2e; 
} 
.homepage .layout li:nth-child(4) { 
    background-color: #9d5cad; 
}
.homepage .layout li:nth-child(5) { 
    background-color: #40b733; 
} 
.homepage .layout li:nth-child(6) { 
    background-color: #ddef3b; 
}

Hãy xem sự thay đổi Trước – Sau khi tuỳ chỉnh.

Để thêm cho các Module khác (nếu nhiều Module) bạn chỉ cần thêm tiếp đoạn mã sau:

.homepage .layout li:nth-child(X) { 
    background-color: #XXXXXX; 
} 

X   là các ký tự bạn có thể thay đổi cho màu sắc của bạn.

Y   là số thứ tự các Module.

Ví dụ:

.homepage .layout li:nth-child(Y) { 
    background-color: red; 
}

Hãy chú ý tới số thứ tự của các Module.

Bạn đã hoàn tất.