Bố cục tùy chỉnh

Bố cục tùy chỉnh thay thế các bố cục có sẵn bằng HTML của riêng bạn. Bạn đặt các khối như tên, link, nhạc bằng những thẻ đơn giản, bọc chúng trong markup của mình, và zyo.lol tự điền dữ liệu đã lưu vào. Đây là một phần của Unleash.

Mở Unleash › Bố cục tùy chỉnh hoặc vào zyo.lol/customlayout.

Bắt đầu

1. Viết bố cục. Gõ HTML và các thẻ vào trình soạn layout.html. Bắt đầu đơn giản, như ví dụ bên dưới.
2. Lưu. Bấm Save Changes trên thanh ở cuối màn hình. Những thẻ và thuộc tính không được phép sẽ bị gỡ khỏi bản lưu, nên hãy tải lại trang để xem chính xác phần được giữ lại.
3. Bật tính năng. Bấm Bật bố cục tùy chỉnh. Hồ sơ sẽ dùng bố cục của bạn thay cho Layout 1–6.
4. Thêm style. Viết style ở trang CSS tùy chỉnh hoặc dùng thuộc tính style.

<content>
    <banner/>
    <avatar/>
    <name effect="neon"/>
    <description/>
    <socials/>
    <links type="small"/>
</content>
<music/>
<discord/>
<widget/>

Các thẻ bố cục

Mỗi thẻ được thay bằng một khối của hồ sơ. Thẻ chỉ hiện nội dung khi tính năng tương ứng đã bật và có dữ liệu. Nếu một khối trống, hãy thiết lập nó trong panel riêng trước.

Thuộc tính

type

Chọn biến thể của một khối. Giá trị không hợp lệ sẽ dùng mặc định.

<like type="icon"/>          <!-- button | text | icon -->
<view type="badge"/>         <!-- text | badge -->
<location type="icon"/>      <!-- text | icon -->
<links type="big"/>          <!-- small | big -->
<badge type="premium"/>      <!-- một huy hiệu, như premium hoặc verify -->
<music type="lyrics"/>       <!-- image | slider | control-panel | volume-control | name | lyrics -->
<discord type="activity"/>   <!-- avatar | name | badge | guildtag | metadescription | activity -->
<couple type="message"/>     <!-- banner | message | partner-avatar | avatar -->

effect

Tạo hiệu ứng chữ cho <name/>, <display/>, <description/> và các thẻ <p>, <a> của bạn. Giá trị: 1, 3, 4, 5, neon, wave, scramble, scramble2.

tilt và comet

Thêm tilt vào một khối hoặc <content> để có hiệu ứng nghiêng 3D khi di chuột. comet thêm vệt sáng chuyển động.

Chọn widget

<widget/> hiện tất cả widget. Dùng <widget id="5"/> để hiện một widget, hoặc <widget name="valorant"/> để hiện mọi widget thuộc loại đó.

Bật tắt khi click

Thêm data-zcl-toggle kèm một CSS selector vào bất kỳ phần tử nào. Click vào sẽ bật tắt một class trên các phần tử khớp: class trong data-zcl-target-class, hoặc active nếu bạn bỏ trống.

<span data-zcl-toggle=".panel" data-zcl-target-class="open">Menu</span>
<div class="panel"><links/></div>

Tooltip và reveal

• data-tippy-content="..." hiện tooltip chữ thường khi di chuột, tối đa 200 ký tự.
• audiovisual thêm class reveal vào một khối. Khi có nhạc, khối sẽ ẩn cho đến khi người xem vào trang, rồi được thêm class active. Bạn tự viết CSS cho hiệu ứng reveal.
• <discord/>, <secondtab/> và <widget/> dùng khung chờ .zyo-skeleton-* trong lúc tải, bạn có thể style lại.

HTML được phép

• Các thẻ bố cục và chữ thông dụng như div, span, p, section, h1–h6, ul, a, img, blockquote và pre, cùng svg nội tuyến.
• Thuộc tính: class, id, style, href, src, alt, title, target và rel, cùng các thuộc tính zyo.lol ở trên.
• Bị gỡ khi lưu: script, style, iframe, form, input, button, audio, video, các event handler như onclick, và link không an toàn.

Tắt CSS mặc định

Mặc định, bố cục của bạn tải style gốc của zyo.lol cho các khối có sẵn. Bấm Tắt CSS mặc định để không tải stylesheet nào, chỉ giữ nền và nhạc. Khi đó bạn phải tự viết toàn bộ style trong CSS tùy chỉnh. Bấm Bật CSS mặc định để dùng lại style gốc.

Bài liên quan