Home »

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

Thứ Năm, 27 tháng 8, 2009
[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.


Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:
Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

Và thêm code được đánh dấu highlight như bên dưới:

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :


- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code như bên dưới :

<dd class='comment-body'>

e. thêm vào trước nó đoạn code bên dưới:

<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

Chúc các bạn thành công.
Tags: , ,

Comments[ 0 ]


Đăng nhận xét