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.

Kim Quy Tech

Công Ty Cổ Phần Đầu Tư Và Công Nghệ Kim Quy
Địa chỉ: Lô 01/9B khu công nghiệp quận Hoàng Mai, phường Hoàng Văn Thụ, quận Hoàng Mai, Hà Nội

Dịch vụ

Web Service

CRM Bitrix24

SMS Brandname

Thiết kế thương hiệu

Chính sách

Chính sách bảo mật

Điều khoản dịch vụ

Chính sách hợp tác

tuyển dụng

Giấy chứng nhận đăng ký kinh doanh số 0106516154 do Sở kế hoạch và đầu tư thành phố Hà Nội cấp ngày 18/04/2014.
© 2014 - 2021 - Bản quyền của Công Ty Cổ Phần Đầu Tư Và Công Nghệ Kim Quy - Kimquy.com.vn, Jsc. Giúp khách hàng kinh hoanh hiệu quả.