Skip to main content

Customize CSS cho khách sao cho chuẩn?

Tại sao lại cần Customize CSS cho khách?​

Đây là một trong những yêu cầu phổ biến nhất cho TS từ khách hàng. Sở dĩ tại sao việc custom CSS lại được khách hàng là vì một số lí do như sau:

Conflict CSS với theme của khách​

Việc UI app của mình bị CSS trên theme khách làm ảnh hưởng khiến hiển thị không đúng, khách với preview trong app. Với những trường hợp này, ta sẽ cẩn phải dùng F12 > Elements tools để kiểm tra xem element bị CSS từ phía bên nào tác động vào.

Thí dụ như trường hợp dưới đây. Text heading của popup bị to quá vì CSS của theme có thuộc tính font-size: 5rem !important mặc dù CSS của app đã củ thể hơn với prefix: .Avada-Popup__Wrapper h2.Avada-Popup__Heading. Việc prefix CSS đẩy đủ như thế này đảm bảo CSS của app không conflict, hay gây ảnh hưởng CSS của theme, tuy nhiên vì mình không dùng important mọi chỗ nên nếu theme nào CSS lạm dùng important quá đà sẽ gây conflict CSS với bên mình.

Khách muốn làm một số tùy chỉnh không có trong app​

Nhiều khi khách muốn tùy chỉnh hiện thị app theo một số yêu cầu riêng biệt của khách, thí dụ như khách dưới muốn custom vị trí cho floating button của Joy -Loyalty App như yêu cầu ảnh dưới mà setting trong app chưa hỗ trợ tính năng này.

Làm sao để custom CSS​

Sử dụng Custom CSS input của app có sẵn​

Mỗi app của AVADA đều đề cao tính flexible cho app nên thường luôn có field Custom CSS, các bạn có thể chủ động tìm trong app. Field này mục đích để khách có thể tự Custom CSS hoặc các bạn TS có thể giúp khách sửa CSS.

Nếu không có Custom CSS input, thêm CSS vào file css của theme​

Ở trong mỗi theme, trong file theme.liquid sẽ luôn có 1 file CSS global để khai báo CSS cho toàn website. Nếu trong trường hợp không có input để sửa custom CSS trong app, ta sẽ cần phải xin quyền theme và tìm xem trong theme.liquid sử dụng file CSS tổng nào.

Như trong ví dụ dưới là file base.css. Như vậy bạn có thể viết CSS vào cuối file basse.css. Cần thiết thì nên chú thích rõ block CSS được thêm bởi bạn (thân bên trong là CSS của bạn nhé)

/* AVADA CSS custom start */

.Avada-Popup__Wrapper p {
    font-size: 10rem;
}

/* AVADA CSS custom end */

Lưu ý quan trọng khi custom CSS​

info

Mọi CSS bạn custom thêm vào store khách đều phải được prefix đầy đủ để trách đoạn CSS của bạn ảnh hưởng tới CSS của site khách. Thí dụ, bạn cần sửa thẻ h2 trong ví dụ ở đầu bài, thì bạn chỉ được thêm custom CSS như sau:

.Avada-Popup__Wrapper h2.Avada-Popup__Heading {
    font-size: 34px !important;
}

Nếu bạn CSS trực tiếp cho thẻ basic của HTML, trong TH này là thẻ h2 thì phạm vi ảnh hưởng CSS là rất lớn. Đây là lỗi rất cơ bản. Nhưng nếu để xảy ra sẽ có hậu quả lớn, ảnh hưởng site khách, nên m.n lưu ý nhé