Nhiều bạn email hỏi mình là làm thế nào để có khung comment giống như eblogviet? Thực lòng là mình không muốn chia sẻ đâu vì (1) sẽ tạo nên nhiều bản sao giống nhau và (2) theme này không phải do mình thiết kế nên có muốn cũng khó. Tuy nhiên, trong khoảng một tuần trở lại đây, chính tác giả Alex Fraiser đã chia sẻ thủ thuật tạo khung comment như trang của anh ấy (eblogviet lấy ý tưởng từ nó) cho tất cả cộng động Thesis.
Blogviet thấy thủ thuật này rất hay và cũng tương đối đơn giản (tất nhiên là không đơn giản với mình rồi). Các bạn chỉ cần chỉnh sửa hoặc thêm một đoạn CSS vào là sẽ có một khung comment giống 100% của eblogviet.
Trong bài viết chia sẻ trên DIYThemes thì Alex đã đưa ra 3 bước cần thực hiện. Sau đây là từng bước để các bạn tiện theo dõi nhé:
Bước 1: Tạo khung và viền cho comment form:
Bạn chỉ cần chèn đoạn CSS dưới đây vào file custom.css trong theme của mình là okie:
.custom #comment_list { background: #000; padding: 1em; }
.custom #comment_list dd { margin-bottom: 1em; }
.custom #comment_list .comment { background: #FFF; }Khung comment của bạn sẽ có hình dạng như sau:
Về cơ bản thì đã rất giống của eblogviet nhưng chúng ta cần trang điểm thêm cho nó mượt mà hơn.
Bước 2: Làm nổi bật comment của tác giả:
Bạn chỉ cần thêm đoạn mã sau vào file custom.css:
.custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div { background: #FF0000; }Comment của tác giả sẽ có màu khác comment thông thường như hình dưới:
Các bạn có thể tùy chọn màu bằng cách thay giá trị #FF0000 thành giá trị mà mình thích.
Bước 3: Trang điểm cho nút “Reply”
Bình thường thì nút “Reply” trông hơi thô, tuy nhiên, bạn có thể làm cho nó thêm phần mềm mại bằng cách thêm đoạn CSS sau vào file custom.css:
.custom .comment-reply-link { background: #EEE; padding: 0.4em; -moz-border-radius: 5px; -webkit-border-radius: 5px; }Đây là hình minh họa sau khi đã thêm đoạn CSS đó:
Trên đây là 3 bước mà Alex đã chia sẻ cho bạn đọc. Mình thấy khá hay và đơn giản nên quyết định chia sẻ lại trên eblogviet cùng các bạn hâm mộ Thesis.
Chúc các bạn thành công!
0 nhận xét:
Đăng nhận xét