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.
Ẩ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:
