Thêm CSS tùy chỉnh vào một trang web hoặc cửa hàng trực tuyến

You are here:
Thời gian đọc 2 phút

Trong Bitrix24, bạn luôn có thể thêm CSS tùy chỉnh vào trang web của mình để tùy chỉnh giao diện của các thành phần.

θ Sử dụng CSS đòi hỏi các kỹ năng và kinh nghiệm cụ thể. Chúng tôi thực sự khuyên bạn nên đọc các hướng dẫn CSS trước nếu bạn chưa từng sử dụng CSS trước đây.

Hãy xem xét một số ví dụ cơ bản về việc sử dụng CSS tùy chỉnh trong Bitrix24.

Thay đổi màu sắc của các yếu tố

Ví dụ: công ty của bạn chỉ sử dụng một số màu nhất định. Sử dụng CSS tùy chỉnh để thay đổi màu sắc của các phần tử.

Có một khối với văn bản. Chúng ta cần thay đổi màu chữ và màu nền.

θ Bạn cần xuất bản trang trước khi bắt đầu làm việc với CSS tùy chỉnh.

Mở giao diện Công cụ dành cho nhà phát triển trong trình duyệt của bạn —> nhấp vào Kiểm tra –> chọn một khối mà bạn cần tùy chỉnh.

Để thay đổi màu phông chữ, bạn cần sử dụng ID khối và lớp này.

 #block1682 .landing-block-node-title 

{ 

color: #FF6347 ;

}

θ Nếu bạn không chỉ định ID khối, các thay đổi sẽ được áp dụng cho tất cả các khối tương tự trên trang.

Để thay đổi màu nền, bạn cần chọn khối này, sử dụng ID khối và lớp của toàn khối, chỉ định rằng bạn cần phần thẻ.

 #block1682.block-27-3-one-col-fix-title section

{

background-color: #00FFFF;

}

Mở Tài khoản Bitrix24 —> Trang web —> chọn trang web này —> Cài đặt —> Tùy chọn trang —> HTML tùy chỉnh và CSS —> kích hoạt tùy chọn này —> dán các mã này vào hộp văn bản mã CSS —> nhấp vào Lưu.

Bạn không cần xuất bản lại trang web của mình, chỉ cần làm mới trang. Màu chữ và màu nền sẽ được thay đổi trong khối này.

θ Bạn cũng có thể sử dụng Chỉ thị quan trọng!. Lệnh này ảnh hưởng đến cách thức xếp tầng CSS của bạn trong khi tuân theo các quy tắc bạn cảm thấy quan trọng nhất và nên được áp dụng. Chỉ thị Quan trọng! ghi đè lên các quy tắc thông thường của tầng và nó mang lại cho phong cách đó tính đặc hiệu rất cao (ví dụ: màu sắc: FF6347 !Quan trọng;).

Ẩn các yếu tố của khối

Nếu bạn muốn ẩn một số thành phần của khối, bạn cũng có thể sử dụng CSS tùy chỉnh. Để làm điều đó, bạn cần lấy lớp khối này. Ví dụ: hãy ẩn các nút trên khối bảng giá.

θ  Đừng quên nhấp vào Xuất bản trước khi mở giao diện Công cụ dành cho nhà phát triển.

Sau đó, thêm mã vào hộp văn bản mã CSS trong phần tùy chọn trang:

.landing-block-node-price-button

{

display: none;

}

Lưu các thay đổi và làm mới trang:

⊗ CSS tùy chỉnh trong Bitrix24.On-Premise có thể được sử dụng từ  mô-đun Trang web phiên bản 18.5.8. Kiểm tra trước nếu Bitrix24 của bạn được cập nhật và, nếu cần, hãy cập nhật tài khoản của bạn.
Was this article helpful?
Dislike 0
Views: 124