[Lập trình theme WordPress] Viết CSS cho theme – Phần cuối [NEW]



Trong phần này chúng ta sẽ thêm một số CSS để làm cho widget hiển thị trên sidebar thân thiện hơn với người dùng, hầu hết các widget đều có cấu trúc HTML giống nhau và mang một lớp chung có tên .widget vì vậy chúng ta sẽ tiến hành viết CSS cho lớp này để nó được áp dụng trên tất cả các widget.

Trước tiên, chúng ta nên đặt lại các kiểu có sẵn trên thanh bên với những điều sau:


/*—:[SIDEBAR]:—*/
#sidebar {
font-size: 0.9em;
}
#sidebar ul,
#sidebar ol,
#sidebar li {
margin: 0;
list-style: none;
padding: 0;
}

Tiếp theo là thêm CSS cho lớp .widget:


/* CSS chung cho toàn bộ widget */
.widget {
background: #f7f7f7;
border: 1px solid #e8e8e8;
padding: 1em !important;
margin: 15px 0 !important;
}
.widget ul {
list-style: square !important;
padding-left: 1.7em !important;
}
.widget ul li {
list-style: square !important;
margin-bottom: 8px !important;
}

Nhưng tiện ích con có tên Lịch có thể trông hơi xấu vì chúng tôi chưa viết CSS cho thẻ tablevì vậy chúng ta nên thêm một chút CSS vào thẻ bảng của tiện ích Lịch để làm cho nó hiển thị tốt hơn:


/* Calendar Widget */
.widget_calendar {}
.widget_calendar table {
width: 100%;
}
.widget_calendar table #today {
background: #7C7C7C;
color: #FFF;
}
.widget_calendar table caption {
font-weight: bold;
font-size: 1.1em;
}

Và đây là kết quả:

[Lập trình theme WordPress] Viết CSS cho theme – Phần cuối [NEW]

Phần kết

Vậy là kết thúc bài viết này, cũng là lúc chúng ta viết xong CSS cho theme này vì qua một vài bài viết thì chúng ta cũng đã viết xong CSS cho một số thành phần quan trọng trong theme WordPress. Tiếp tục trong bài viết tiếp theo mình sẽ hướng dẫn các bạn một công việc mới đó là cách tạo file ngôn ngữ cho theme mà chúng ta đã thực hiện từ đầu series đến giờ. Đây là tệp đính kèm mã nguồn chủ đề mà chúng tôi đã tạo để bạn tham khảo:

  • Tải xuống thachpham_ Aftercss

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện