Để sử dụng trình thiết kế mẫu với CSS của mẫu blog, có một vài nguyên tắc cần tuân thủ.
Thiết lập các biến
Trong phần <head> của mã, bạn cần có hai thẻ <b:skin> </b:skin>.
Khai báo kiểu CSS sẽ xuất hiện giữa những thẻ đó, cùng với tên biến giúp thiết kế của bạn hoạt động với trang Phông chữ và màu.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>Mã CSS trong thẻ nhận xét /* và */ sẽ không được hiển thị trên blog của bạn.
Sẽ có một danh sách các biến tại đây, một biến cho mỗi phông chữ hoặc màu mà bạn muốn chỉnh sửa được từ tab “Phông chữ và màu”. Mỗi biến cần phải chứa thông tin như được minh họa trong ví dụ ở trên và được mô tả ở đây:
- tên – Có thể chứa chữ hoặc số. Mỗi tên trong mẫu của bạn phải là duy nhất.
- mô tả – Thêm mô tả xuất hiện trong phần “Phông chữ và màu".
- loại – "Phông chữ" hoặc "màu".
- mặc định – Giá trị mặc định. Đối với màu, đây phải là mã màu thập lục phân, ví dụ: #FF0066. Đối với phông chữ, đó sẽ là một danh sách họ phông chữ, kích thước phông chữ, trọng số phông chữ, kiểu phông chữ của biểu mẫu.
Sử dụng biến
Sau khi thiết lập biến, khi bạn muốn sử dụng giá trị của biến, hãy nhập $variable_name vào css b:skin.
Trình thiết kế mẫu có hỗ trợ chỉnh sửa cho một nhóm các loại biến CSS cụ thể. Để đặt loại biến:
- biến màu sẽ cung cấp bảng màu để lựa chọn trong trình thiết kế mẫu.
- biến phông chữ sẽ cung cấp lựa chọn phông chữ, với kích thước và các tùy chọn đậm hay nghiêng, trong trình thiết kế mẫu.
Trong ví dụ ở trên, có một biến tên là bgcolor được đặt thành trắng (#fff). Trong mã tiếp theo, có ghi: background: $bgcolor. Điều này sẽ biến nền thành màu trắng và bạn có thể thay đổi trong phần “Phông chữ và màu”.
Lưu ý: Bạn không cần tạo biến cho các loại thuộc tính CSS khác. Những biến này có thể được bao gồm trong CSS như bình thường (giống với các thuộc tính margin: và padding: trong ví dụ ở trên).