Đổi màu menu trong theme Schema

Chào các Anh Chị học viên Alovoice!

Sau khi tham gia khóa học xây dựng website wordpress với theme Schema thì một số Anh Chị chúng ta có thắc mắc về thay đổi màu sắc một số phần trên website đặc biệt là background menu – những phần mà trong cấu hình của theme hiện tại chưa có tùy chỉnh cho người dùng. Như vậy để tùy chỉnh được màu của menu chúng ta cần can thiệp vào phần code của website và cụ thể là CSS.

Mặc định backgroud-color menu chính của theme có màu đen

Thay đổi màu backgroud menu thông qua 2 bước

B1: Đăng nhập vào admin -> Appearance-> Editor-> Kéo xuống bên dưới tìm file Style.css

B2: Trong file CSS do menu nằm trong phần header nên chúng ta tìm kiếm trong phần header hoặc để nhanh hơn nhấn tổ hợp phím Ctrl + F gõ #header

Ở đây trong phần header chúng ta có backgroud-color với thông số màu là #222 chúng ta thay #222 bằng định dạng màu mà các Anh Chị muốn.

Để tra thông số màu trong Css có thể tra tại đây

Ở đây Alovoice chọn màu xanh lá với thông số #04B486

Thay đổi backgroud search form

Chúng ta thấy phần search form nằm trong phần widget của website, do đó chúng ta tìm đến phần widget hoặc có thể nhấn Ctrl + F gõ widget_search

Tương tự như thay đổi backgroud menu, chúng ta chọn thông số màu cần thay cho #222

Ví dụ Alovoice chọn màu trùng với màu menu

Sau khi định dạng màu xong update file và ra ngoài kiểm tra

Website sau khi chỉnh lại màu menu và search form

Xem thêm:

• Ebook thực hành SEO WordPress đầu tiên tại Việt Nam
• Thiết kế và tối ưu SEO website WordPress

Như vậy chúng ta thấy rằng đối với các giao diện trả phí, mọi thay đổi về màu sắc, font chữ…. trên website chúng ta đều có thể can thiệp và tùy chỉnh với css tuy nhiên cách này không khuyến khích đối với các Anh Chị không rành về code web, và trước khi thực hiện để an toàn chúng ta nên copy file cần chỉnh sửa dán vào NotePad để phòng trường hợp chúng ta thao tác nhầm dẫn đến ảnh hưởng đến cấu trúc website.

Cảm ơn các Anh Chị đã theo dõi, có thắc mắc vui lòng comment bên dưới hoặc tham gia vào nhóm Học wordpress  miễn phí trên Facebook của Alovoice để được hỗ trợ tốt hơn!