Bo góc và tạo đường viền cho các Widget ở Sidebar

Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.

Hình ảnh minh họa :

Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần headervà content của widget, do đó ta sẽ tìm trong code CSS của template 2 classsau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)
☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):
.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}
- Thay thế nó bằng code bên dưới:
.sidebar h2 { background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}
- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổi màu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.
5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):
.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
} - Và thay thế nó bằng code như bên dưới :
.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
} - các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.
6. Save template.
Trường hợp không tìm thấy 2 đoạn code trên thì vào phần tùy chỉnh chọn nâng cao,chọn thêm CSS và thêm 2 đoạn CSS đó vào và click áp dụng cho blog