theme-schema-5

Đổ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.

theme-schema-1

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

theme-schema-2

Ở đâ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

theme-schema-3

Ở đâ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

theme-schema-4

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

theme-schema-5

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

Xem thêm:

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!

Comments

  • Minh
    Reply

    chào thầy
    Em đã thay đổi màu nền cho header trên theme schema theo hướng dẫn trên của thầy nhưng sao màu không thay đổi.Mong thầy giúp đỡ.
    cảm ơn thầy nhiều.

    • Lanquynh

      Chào Minh! trường hợp cụ thể của bạn là như thế nào ha? vì nhiều Anh, Chị khác làm theo từng bước cũng đã đổi thành công. Vậy bạn thử làm lại một lần nữa theo từng bước hướng dẫn trong bài viết. Tiếp theo nếu vẫn chưa được, bạn có thể inbox facebook của mình, mình sẽ teamview hỗ trợ bạn!
      FB: https://www.facebook.com/nguyen.lanquynh