Hướng Dẫn Chỉnh Sửa Màu Sắc Trong Website Sử Dụng Theme Flatsome (Chi Tiết Từ A–Z)

Bạn đang sở hữu một mẫu website Flatsome từ Themevip.net và muốn thay đổi màu sắc để phù hợp với thương hiệu?

Flatsome nổi tiếng với khả năng tùy biến mạnh mẽ, nhưng việc chỉnh màu đôi khi gây bối rối, đặc biệt trên các mẫu đã được tùy chỉnh code sẵn. Bài viết này là hướng dẫn chi tiết từ A–Z dành riêng cho Khách hàng của Themevip.net, giúp bạn làm chủ màu sắc giao diện một cách chuẩn xác, gọn gàng và dễ bảo trì nhất.

I. 🎯 Nguyên Tắc Vàng Trước Khi Chỉnh Màu Flatsome

Đây là phần quan trọng nhất cần nắm vững để tránh việc chỉnh màu không ăn hoặc bị lỗi.

1. Thứ Tự Ưu Tiên Hiển Thị Màu (CSS Priority)

Màu sắc hiển thị trên website tuân theo một quy tắc ghi đè nghiêm ngặt:

Thứ Tự	Phương Pháp Chỉnh Màu	Mức Độ Ưu Tiên	Ghi Chú
1	Inline CSS	Cao nhất	Viết trực tiếp trong thẻ HTML (Thường do UX Builder tạo ra)
2	Custom CSS	Cao	CSS bạn tự viết trong style.css của Child Theme hoặc Customize
3	CSS của Child Theme	Trung bình	Các file CSS mặc định của Child Theme
4	CSS của Theme Flatsome	Thấp	CSS gốc của Flatsome
5	Theme Options	Thấp nhất	Cài đặt màu mặc định trong Theme

👉 Tóm lại:

• Nếu màu bạn chỉnh không đổi -> Rất có thể đang bị CSS có độ ưu tiên cao hơn ghi đè.

• KHÔNG sửa trực tiếp file theme gốc.

• Ưu tiên: Theme Options -> Child Theme CSS -> Tăng độ ưu tiên Selector.

2. Thứ Tự Khuyến Nghị Khi Chỉnh

Để website gọn gàng, ổn định và dễ nâng cấp, hãy theo thứ tự sau:

1. Theme Options -> Colors (Luôn ưu tiên cách này đầu tiên).

2. UX Builder (Chỉ áp dụng cho từng khối, Section, Row cụ thể).

3. Custom CSS trong Child Theme (Cách chuẩn và mạnh mẽ nhất).

4. PHP (Chỉ dùng cho trường hợp rất nâng cao).

II. 🥇 Cách 1: Chỉnh Màu Bằng Theme Options (Dễ Nhất & Khuyến Nghị)

Đây là nơi bạn đặt màu thương hiệu chính, màu này sẽ được áp dụng cho hầu hết các thành phần mặc định của Flatsome.

1. Vị Trí

Vào: WordPress Admin -> Flatsome -> Theme Options -> Colors

2. Các Nhóm Màu Quan Trọng

Tên Màu	Ảnh Hưởng Đến	Mục Đích Sử Dụng
Primary Color	Nút bấm chính (Button), Link, Icon, Badge quan trọng.	Màu Chủ đạo (Thường là màu thương hiệu).
Secondary Color	Hover, Nút phụ, Nhấn mạnh nội dung.	Màu Phụ (Hỗ trợ màu chủ đạo).
Success / Alert / Warning	Thông báo thành công, lỗi, cảnh báo (Ví dụ: thông báo thêm giỏ hàng, trạng thái đơn hàng).	Màu thông báo.
Base Colors	Background body, Text color, Heading color (Màu chữ và nền cơ bản).	Màu nền và màu chữ chính của website.

3. Ưu & Nhược Điểm

✅ Ưu Điểm	❌ Nhược Điểm
Dễ chỉnh, không cần biết code.	Không can thiệp được vào các khu vực đã tùy chỉnh sâu.
Ổn định, ít lỗi khi cập nhật theme.	Không chỉnh riêng lẻ từng Section nhỏ.

III. 🥈 Cách 2: Chỉnh Màu Trong UX Builder (Theo Từng Khối)

Phương pháp này tạo ra Inline CSS (Ưu tiên 1) nên sẽ ghi đè lên màu trong Theme Options. Thường dùng để làm nổi bật một khu vực cụ thể.

1. Áp Dụng Cho

Section, Row, Column, Button, Box, Text, Icon Box, v.v…

2. Cách Chỉnh

1. Mở trang với UX Builder.

2. Click vào khối (Element) cần chỉnh (ví dụ: một Section, một Button).

3. Tìm đến tab Design hoặc Style trong bảng thuộc tính bên trái.

4. Chỉnh các mục như: Background color, Text color, Overlay, Hover color.

3. Ưu & Nhược Điểm

✅ Ưu Điểm	❌ Nhược Điểm
Thấy kết quả ngay lập tức (Live Preview).	Khó đồng bộ màu trên toàn site nếu chỉnh nhiều.
Chỉnh từng khu vực rất nhanh, linh hoạt.	Dễ gây rối nếu không quản lý tốt.

IV. 🥉 Cách 3: Chỉnh Màu Bằng Custom CSS (Phổ Biến & Mạnh Nhất)

Khi màu trong Theme Options và UX Builder không đáp ứng được, bạn cần dùng CSS. Đây là cách giải quyết mọi vấn đề về màu sắc.

1. Nên Viết CSS Ở Đâu?

Để đảm bảo màu không mất khi update theme và dễ quản lý, Themevip.net khuyến nghị bạn sử dụng Child Theme.

• Cách 1 (Nhanh, tiện): Giao diện -> Tùy biến -> CSS bổ sung

• Cách 2 (Chuẩn nhất): File style.css của Child Theme (Nếu bạn mua mẫu từ Themevip.net, website đã có sẵn Child Theme).

• Tránh dùng: Flatsome -> Advanced -> Custom CSS (vì nó kém tập trung hơn so với Child Theme).

2. Ví Dụ CSS Thực Tế

Mục Đích	Đoạn Code CSS
Đổi màu nút chính (Button)	.button.primary { background-color: #ff6600; color: #ffffff; }
Đổi màu khi di chuột (Hover)	.button:hover { background-color: #cc5200; }
Đổi màu tiêu đề (H1, H2, H3)	h1, h2, h3 { color: #0a3cff; }
Đổi màu Giá sản phẩm	.price, .woocommerce-Price-amount { color: #e60000; }
Đổi màu Badge giảm giá	.onsale { background: #ff0000; }

3. Xử Lý Khi CSS Không Ăn Màu

Khi bạn đã viết CSS nhưng màu vẫn không đổi -> Tăng độ ưu tiên (Specificity) của Selector.

• Tăng Selector: Thay vì .header-main, hãy dùng #header .header-main (Sử dụng ID hoặc viết đầy đủ đường dẫn).

  CSS

  /* Tăng độ ưu tiên */
  #header .header-main {
      background-color: #0a3cff; 
  }
  

• Dùng !important (Chỉ dùng khi cần thiết): Bắt buộc trình duyệt phải nhận màu này, ghi đè lên mọi thứ khác.

  CSS

  .header-main {
      background: #0a3cff !important; 
  }
  

V. 💡 Các Khu Vực Đặc Biệt (Hay Bị Nhầm Lẫn)

Một số khu vực có tùy chọn màu riêng trong Flatsome mà bạn không nên chỉnh bằng CSS ngay lập tức.

1. Header (Thanh Đầu Trang)

Vào: Flatsome -> Theme Options -> Header

• Top Bar: Thanh thông báo nhỏ phía trên cùng.

• Header Main: Phần chính chứa Logo, Menu.

• Header Bottom: Thanh nằm dưới Header Main.

👉 Mỗi phần này có tùy chọn Background và Text Color riêng.

2. Footer (Chân Trang)

Vào: Flatsome -> Theme Options -> Footer

• Chỉnh Background, Text và Link Color cho toàn bộ khu vực chân trang.

VI. 🛠️ Lỗi Thường Gặp & Cách Xử Lý Nhanh

❌ Lỗi	✔ Cách Xử Lý
Đổi màu nhưng không thấy thay đổi	Kiểm tra CSS ghi đè bằng cách: Click chuột phải vào phần tử -> Inspect -> Xem màu nào đang được áp dụng và màu nào bị gạch ngang. Sau đó dùng cách Tăng độ ưu tiên Selector hoặc !important.
Chỉnh được trang này, trang khác không	Kiểm tra xem trang đó có đang được chỉnh màu riêng bằng UX Builder (Inline CSS) hay không.
Update theme bị mất màu	Luôn dùng Child Theme hoặc CSS bổ sung để chỉnh. KHÔNG sửa trực tiếp vào file CSS/PHP gốc của Theme Flatsome.

---

Bạn đã nắm vững các phương pháp cơ bản để chỉnh sửa màu sắc trên Theme Flatsome. Việc làm chủ thứ tự ưu tiên (CSS Priority) là chìa khóa để chỉnh màu nhanh chóng và hiệu quả.

Chúc bạn thành công!