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

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

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.

Việc sử dụng CSS yêu cầu cụ thể kỹ năng và kinh nghiệm. Chúng tôi thực sự khuyên bạn nên đọc hướng dẫn về 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 thành phần trang web #

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 thành phần này.

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

 css1.png

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 > nhấp vào Kiểm tra > chọn một khối mà bạn cần tùy chỉnh.

css2.png

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

 css3.png

# 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 chỉ cần phần thẻ.

css4.png

# block1682.block-27-3-one-col-fix-title section
{
background-color: # 00FFFF;
}

Mở Tài khoản Bitrix24 của bạn > Trang web > chọn trang web này > Cài đặt> Tùy chọn trang> HTML và CSS tùy chỉnh > 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 .

css5.png

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

css6.png

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

Ẩn các thành phần 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 được đ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 danh sách 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.

 css7.png

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:

 css8.png

CSS tùy chỉnh trong Bitrix24.On-Premise có thể được sử dụng từ mô-đun Trang web (Sites) phiên bản 18.5.8. Kiểm tra trước xem Bitrix24 của bạn có được cập nhật hay không và nếu cần, hãy cập nhật tài khoản của bạn.