FANDOM


Hộp thông tin lưu động có thể được tạo kiểu dáng khá dễ dàng bởi các bảo quản viên cục bộ bằng cách sử dụng CSS cộng đồng.

Nếu không tùy chỉnh, chủ đề của hộp thông tin sẽ lấy màu sắc từ những cài đặt của Thiết kế chủ đề trên cộng đồng của bạn, tiêu biểu là màu nền bài viết và màu liên kết.

Chủ đề hộp thông tin

Chủ đề mặc định của hộp thông tin có thể được ghi đè bằng cách sử dụng CSS cộng đồng và các thuộc tính theme hoặc theme-source trên thẻ infobox sẽ giúp dễ dàng chỉ đến các mẫu hộp thông tin cụ thể thông qua lớp (class).

  • Thuộc tính theme được dùng để định lớp CSS tùy chỉnh cho hộp thông tin.
  • Thuộc tính theme-souce cho phép bạn đa dạng hoá lớp CSS thông qua thông số bản mẫu.
 

Sử dụng "theme"

Ví dụ như theme="delta" sẽ thêm một lớp gọi là pi-theme-delta vào HTML hộp thông tin và lớp này có thể được tùy chỉnh bằng CSS:

Mã bản mẫu
<infobox theme="delta">
  ...
</infobox>
CSS để sử dụng
.portable-infobox.pi-theme-delta {
   ...
}

Để ví dụ, đoạn mã sau có thể được dùng để thay đổi màu nền phụ sang màu đỏ:

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #00ffff;
}
 

Sử dụng "theme-source"

Ví dụ như theme-source="chủ-đề" có nghĩa là khi chủ-đề được khai báo trong hộp thông tin, nó sẽ được dùng làm lớp của hộp thông tin đó.

Ví dụ cụ thể như sau:

Mã bản mẫu
<infobox theme-source="chủ-đề">
   ...
</infobox>
Mã trên bài viết
{{Example infobox
 |chủ-đề = lightblue
}}
CSS để sử dụng
.portable-infobox.pi-theme-lightblue {
   ...
}

Nếu bạn muốn chỉ đến một phần tử bên trong hộp thông tin trên, bạn có thể sử dụng mã như sau:

.portable-infobox.pi-theme-lightblue .pi-secondary-background {
   //tùy chọn kiểu
}

Những lưu ý mở rộng

  • Nếu cả themetheme-source đều được dùng, thuộc tính theme sẽ được chọn là mặc định trong trường hợp theme-source không được khai báo.
  • Các khoảng trắng trong giá trị của themetheme-source sẽ được chuyển đổi thành dấu gạch nối (-), nghĩa là mỗi hộp thông tin chỉ có thể sử dụng một lớp.
  • Nếu không có chủ đề nào được dùng, .pi-theme-wikia sẽ được sử dụng.

Các lớp hỗ trợ

Hộp thông tin lưu động chứa đa dạng các lớp hỗ trợ đặc tả thiết kế để giúp bạn dễ dàng cập nhật kiểu dáng tổng thể:

.pi-background
nền tổng thể của hộp thông tin
.pi-secondary-background
nền của tiêu đề và điều hướng
.pi-font
kiểu phông chữ của dữ liệu
.pi-secondary-font
kiểu phông chữ của tiêu đề, nhãn và điều hướng
.pi-item-spacing
khoảng cách giữa mỗi thành phần của hộp thông tin
.pi-border-color
màu viền của hộp thông tin

Ghi chú: Đây chưa phải là danh sách đầy đủ các lớp có sẵn, xem đầy đủ tại Trợ giúp:Hộp thông tin/Các thẻ.

Một số đoạn code mẫu

Thay đổi độ rộng hộp thông tin:

.portable-infobox {
   width: 300px;
}

Thay đổi màu nền hộp thông tin:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Thay đổi nền của tiêu đề và điều hướng:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Thay đổi màu viền của phần tử hộp thông tin:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Thay đổi khoảng cách giữa các phần tử hộp thông tin:

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

Thay đổi kích thước phông chữ của dữ liệu:

.portable-infobox .pi-font {
   font-size: 16px;
}

Thay đổi kích thước phông chữ của tiêu đề, nhãn và điều hướng:

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

Thay đổi kích thước phông chữ của tiêu đề lớn:

.portable-infobox .pi-title {
   font-size: 24px;
}

Thay đổi độ rộng cột nhãn:

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

Chọn chủ đề "lightblue", sau đó tinh chỉnh kích thước phông chữ của chú thích:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.