Merapikan Comment Form Theme Custom Community

Theme Custom Community versi 1.8.7 yang dibuat oleh ThemeKraft bisa didapatkan melalui Extend WordPress. Sekiranya fitur pengaturan yang cukup lengkap disediakan untuk melakukan custom. Namun tampilan default untuk comment form theme ini bias dikatakan agak kacau. Pasalnya form yang muncul bukanlah form yang rata.

Tidak ada pengaturan comment form agar bias terlihat lebih rapi. Namun dengan sedikit mengubah isi dari css yang terdapat pada folder theme custom-community (wp-content/themes/custom-community/style.css) kita dapat memperbaiki, minimal agar memiliki tampilan form seperti theme twenty ten default-nya WordPress. Yang diperlukan adalah copy beberapa baris css yang ada di folder theme twenty-ten (wp-content/themes/twenty-ten/style.css).

Stylesheet twenty-ten yang harus dicopy adalah mulai dari baris /* Comments form */ sampai pada baris sebelum /* Widget Areas */.

/* Comments form */
input[type=submit] {
	color: #333;
	}
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
	}
#respond p {
	margin: 0;
	}
#respond .comment-notes {
	margin-bottom: 1em;
	}
.form-allowed-tags {
	line-height: 1em;
	}
.children #respond {
	margin: 0 48px 0 0;
	}
h3#reply-title {
	margin: 18px 0;
	}
#comments-list #respond {
	margin: 0 0 18px 0;
	}
#comments-list ul #respond {
	margin: 0;
	}
#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	}
#respond .required {
	color: #ff4b33;
	font-weight: bold;
	}
#respond label {
	color: #888;
	font-size: 12px;
	}
#respond input {
	margin: 0 0 9px;
	width: 98%;
	}
#respond textarea {
	width: 98%;
	}
#respond .form-allowed-tags {
	color: #888;
	font-size: 12px;
	line-height: 18px;
	}
#respond .form-allowed-tags code {
	font-size: 11px;
	}
#respond .form-submit {
	margin: 12px 0;
	}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
	}

Letakkan kode tersebut di barisan paling bawah dari style.css pada theme custom-community. Sehingga isi dari style.css menjadi,

/*
Theme Name: Custom Community
Theme URI: http://themekraft.com/theme/custom-community/
Description: Create your individual website within minutes. Custom Community is a WordPress and BuddyPress theme framework that enables you to build your site with all the features you love. Easy to use jQuery slideshow. List posts under your pages in magazine layouts. Use powerful theme settings to customize every part of the theme. 20 widget areas, 5 special widgets and 2 custom WP 3.0 header menus. 3 predefined colour schemes (white, grey, black) with clean and simple browsersafe css design to start from. Support forum at http://themekraft.com/forums.
Version: 1.8.7
Author: Themekraft
Author URI: http://themekraft.com/
Tags: buddypress, dark, light, white, left-sidebar, right-sidebar, two-columns, three-columns, fixed-width, flexible-width, custom-header, custom-menu, custom-colors, custom-background, theme-options
License: GNU General Public License v2.0 / License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Reset browser defaults */
@import url( _inc/css/reset.css );
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

.alignleft {
	float: left;
	margin-right: 15px;
	}

.alignright {
	float: right;
	margin-left: 15px;
	}

div.post .wp-caption {
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin-bottom:12px;
	}

div.post dd.wp-caption p.wp-caption-text, div.post .wp-caption p.wp-caption-text {
	font-size: 0.9em;
	line-height: 17px;
	padding: 0 4px 5px 0;
	margin: 0;
	}

/* Comments form */
input[type=submit] {
	color: #333;
	}
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
	}
#respond p {
	margin: 0;
	}
#respond .comment-notes {
	margin-bottom: 1em;
	}
.form-allowed-tags {
	line-height: 1em;
	}
.children #respond {
	margin: 0 48px 0 0;
	}
h3#reply-title {
	margin: 18px 0;
	}
#comments-list #respond {
	margin: 0 0 18px 0;
	}
#comments-list ul #respond {
	margin: 0;
	}
#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	}
#respond .required {
	color: #ff4b33;
	font-weight: bold;
	}
#respond label {
	color: #888;
	font-size: 12px;
	}
#respond input {
	margin: 0 0 9px;
	width: 98%;
	}
#respond textarea {
	width: 98%;
	}
#respond .form-allowed-tags {
	color: #888;
	font-size: 12px;
	line-height: 18px;
	}
#respond .form-allowed-tags code {
	font-size: 11px;
	}
#respond .form-submit {
	margin: 12px 0;
	}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
	}

Setelah selesai silakan refresh sehingga bias dilihat comment form lebih rapi, setidaknya rata kanan kiri.

Penulis: Muh.Ahsan

Geoscience application specialist, technical evangelist, music lover, movie buff, and active blogger.

Tinggalkan Tanggapan

This site uses Akismet to reduce spam. Learn how your comment data is processed.