CSS tùy chỉnh

Với Unleash, bạn có thể thêm CSS riêng vào hồ sơ công khai. Đổi font, màu, khoảng cách và hiệu ứng chuyển động, hoặc ẩn những phần bạn không muốn hiện.

Mở Unleash › CSS hoặc vào zyo.lol/cuscss.

Thêm CSS

1. Bật tính năng. Bấm Bật CSS tùy chỉnh. Nút chuyển sang màu xanh và đổi thành Tắt CSS tùy chỉnh.
2. Viết style. Gõ vào trình soạn custom.css. Trình soạn tô đỏ lỗi và gợi ý thuộc tính.
3. Lưu. Bấm Save Changes trên thanh ở cuối màn hình. Nếu CSS có lỗi, bạn sẽ thấy Mã CSS không hợp lệ. và không có gì được lưu.
4. Kiểm tra hồ sơ. Mở hồ sơ bằng View Profile và tải lại trang để xem kết quả.

Tìm phần cần chỉnh

Cách dễ nhất để tìm selector là dùng công cụ Inspect của trình duyệt. Mở hồ sơ, click chuột phải vào phần muốn đổi và chọn Inspect.

• Thẻ body có class theo bố cục, ví dụ .profile-body-1 cho Layout 1. Bắt đầu selector bằng class này để style chỉ áp dụng cho bố cục đó.
• Màu bạn đặt trong Tùy chỉnh có sẵn dưới dạng biến CSS, ví dụ var(--nameColor).
• Tên class có thể đổi khi bố cục được cập nhật. Nên dùng selector ngắn, đơn giản thay vì chuỗi dài.

Ví dụ

.profile-body-1 .bio_content_container {
    border-radius: 28px;
    backdrop-filter: blur(12px);
}

@keyframes hueRotate {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

.profile-body-1 #userName {
    animation: hueRotate 6s linear infinite;
}

Những gì không được phép

Để giữ an toàn cho hồ sơ, CSS chứa một trong các mục sau sẽ bị từ chối với thông báo Nội dung CSS không hợp lệ.:

• @import, ở bất kỳ dạng nào.
• url(data:...) và url(javascript:...).
• expression(...).
• Lệnh reset toàn bộ như * { all: unset; }.
• Thẻ HTML như <style> hoặc <script>.

CSS tùy chỉnh và Bố cục tùy chỉnh

CSS tùy chỉnh vẫn áp dụng khi bạn dùng Bố cục tùy chỉnh, nên đây là nơi để style HTML của bạn. Khi bật Tắt CSS mặc định, CSS tùy chỉnh là style duy nhất trên trang.

Hoàn tác thay đổi

• Trước khi lưu, bấm Reset trên thanh để bỏ các chỉnh sửa chưa lưu.
• Nếu hồ sơ bị vỡ giao diện, bấm Tắt CSS tùy chỉnh. Hồ sơ trở lại bình thường và code vẫn nằm trong trình soạn.

Bài liên quan