Tùy biến CSS cho Hệ thống nhận xét Disqus

Tôi đã sử dụng Hệ thống nhận xét Disqus cho blog của mình đã được một tuần lễ và tôi cảm thấy rất hài lòng :6). Có một điều tôi mới phát hiện là chúng ta có thể điều chỉnh phần Comment trên Hệ thống nhận xét Disqus như chúng ta từng có thể làm điều đó dễ dàng trên hệ thống nhận xét mặc định của Blogger.

Bạn có thể điều chỉnh màu nền, font chữ… cho phần nhận xét một cách dễ dàng bằng những thuộc tính CSS đơn giản. Nếu background Template của bạn có màu sáng thì có thể không cần phải chỉnh Disqus Comment làm gì, tuy nhiên nếu background Template của bạn có màu tối thì cũng nên điều chỉnh background cho Disqus Comment.

Để làm được điều này, trước tiên bạn cần đăng nhập tài khoản Disqus trên trang Disqus.com, sau đó vào Admin >> Settings >> Appearance kéo xuống dưới cùng ở phần Custom CSS rồi dán đoạn mã dưới đây vào phần khung chỉnh sửa CSS. Sau đó nhấn Save Changes để lưu.

/* Everything Disqus on your page is contained within this. */
#disqus_thread {
background-color: #000000;
color: #ffffff;
border-style: solid;
border-color: #cccccc;
padding: 5px;
}

Nếu bạn rành về CSS thì bạn có thể tha hồ khám phá và thêm những thuộc tính theo ý thích của bạn vào đoạn mã CSS dưới đây.

/*The header at the top of posts.*/
.dsq-comment-header {
background-color: #ffffff;
font-family:"verdana",sans-serif;
font-size: 12px;
height: 50px;
}

/*The comments.*/
.dsq-comment-message {
font-family:"verdana",sans-serif;
font-size: 11px;
color: #cccccc;
}

/*The box where a post is typed into.*/
textarea {
background-image: none;
background-repeat: repeat;
border: #00A8D6 2px solid; /* light blue border */
}

texarea:after {
}

/*"Add New Comment" and "# Comments" are enclosed in h3 tags.*/
h3 {}

/*The entire comment thread list.*/
#dsq-comments {}

/*A single comment in the thread.*/
.dsq-comment {
border: #00A8D6 2px solid; /* light blue border */
margin-botom: 15px;
}

/*The avatar image for the registered.*/
.dsq-header-avatar img {}

/*The message body of a single comment post.*/
#dsq-content #dsq-comments .dsq-comment-body { }

/*The footer contains the link to "reply."*/
.dsq-comment-footer {}

/* The form elements (Name, Email, Website). */
input.form-text {
font-size: 100%;
}

/* The submit button "Post". */
input.submit {
background-color: #ffffff;
}

/* The main wrapper for the comment system. */
#dsq-content {
}

/* The toggle button for the thread options. */
#dsq-options-toggle {
/* display: none; */
}

/* The links within the thread Options */
#dsq-extra-links {
/* display: none; */
}

/* The comment rating arrows for posts. */
.dsq-comment-rate {
}

/* This is the meta information about the post (time stamp and points). */
.dsq-header-meta {
}

/* The message body of a single comment post.
.dsq-comment-body {
}

/* This contains and determines the style for the pagination links. */
#dsq-pagination {
}