Bài viết này mình sẽ hướng dẫn các bạn tùy biến giao diện của mình đẹp hơn, nội dung bài viết chỉ tập trung vào CSS nên các bạn chỉ cần copy và past code vào file tương ứng, rất đơn mình nghĩ bạn nào cũng có thể làm được mà không sợ phát sinh lỗi trong trang website.
Tùy biến giao diện comment, form tìm kiếm, link liên kết trong theme Genesis
1. Tùy biến giao diện khung bình luận genesis theme.
Trong phần này mình sẽ tập trung vào viết CSS cho khung bình luận trở lên đơn giản và đẹp hơn và thêm một số chứ năng như đếm số bài viết, mình đã có một bài hướng dẫn cách đếm số bình luận trong genesis theme bạn nào chưa đọc thì có thể xem tại đây.
Bước 1: Chèn đoạn CSS vào style.css
Demo ảnh chụp màn hình:
Chèn đoạn CSS này vào style.css trong thư mục child theme.
/* ## Comments by Vũ đức Mạnh
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
color: #32373c;
padding: 20px 45px 40px 45px;
overflow: hidden;
background: #fff;
}
.entry-comments h3{
font-size: 30px;
margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
font-size: 20px;
margin-bottom: 30px;
}
.comment-respond {
padding-bottom: 5%;
margin: 20px 1px 20px 1px;
border-radius: 2px;
border: 1px solid #e8e8e8;
}
.comment-header {
color: #adaeb3;
font-size: 17px;
margin-bottom: 20px;
}
.comment-header cite a {
border: none;
font-style: normal;
font-size: 17px;
font-weight: bold;
}
.comment-header .comment-meta a {
border: none;
color: #adaeb3;
}
li.comment {
border-top: solid 2px #efece6;
background-color: #fff;
border-right: none;
}
.comment-content {
clear: both;
overflow: hidden;
}
.comment-list li {
font-size: 18px;
padding: 20px 30px 20px 50px;
}
.comment-list .children {
margin-top: 40px;
}
.comment-list li li {
background-color: #ffffff;
}
.comment-list li li li {
background-color: #fff;
}
.comment-meta a {
color: #888;
font-style: italic;
font-size: 15px;
}
a.url {
color: #21759b;
font-size: 18px;
font-weight: 500;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}
.comment-respond label {
display: block;
margin-right: 12px;
}
.entry-comments .comment-author {
margin-bottom: 0;
position: relative;
}
.entry-comments .comment-author img {
border-radius: 50%;
border: 5px solid #fff;
left: -80px;
top: -5px;
position: absolute;
width: 60px;
}
.entry-pings .reply {
display: none;
}
.bypostauthor {
}
.form-allowed-tags {
background-color: #f5f5f5;
font-size: 16px;
padding: 24px;
}
.comment-reply-link{
cursor: pointer;
border: none;
color: #3d5a98;
font-size: 17px;
font-weight: 500;
letter-spacing: 1px;
width: auto;
}
.comment-reply-link:hover{
color: #fff;
}
.comment-notes{
display:none;
}
Chú ý: các bạn chỉ cần copy và dán không cần làm gì thêm.
2. Tùy biến giao diện link liên kết.
demo ảnh chụp màn hình:
Hướng dẫn thực hiện.
Chèn đoạn CSS này vào style.css trong thư mục child theme.
.entry-content a {
color: #e8554e;
border-bottom: solid 2px #eee;
}
3. Tùy biến giao diện form tìm kiếm genesis theme.
Bước 1: Thêm đoạn mã bên dưới vào cuối cùng file functions.php
//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}
//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {
return esc_attr( '' );
}
Bước 2: Thêm đoạn CSS vào style.css
.search-form {
position: relative;
}
.search-form input[type="submit"] {
font-family: FontAwesome;
clip: inherit;
width: 16px;
height: 16px;
background: transparent;
color: #999;
right: 10px;
top: 18px;
}
.search-form input[type="submit"]:hover {
color: #F15123;
}
.site-header .search-form {
width: 189px;
}
