Modifikasi Sendiri Theme pada WordPress

Kemarin saya memodifikasi beberapa bagian pada tema wordpress blog ini. Saya menambahkan style pada button agar menarik dan mirip dengan tombol yang digunakan oleh Google. Selain itu, kotak input teks dan teks area saya ubah agar mirip dengan kotak input yang ada pada Twitter, menampilkan border berwarna biru terang (glow).

Kode yang saya gunakan saya ambil dari internet dan saya modifikasi sedikit untuk penyesuaian pada template yang sudah ada.

Untuk tombol (button) Google, kamu bisa mendapatkan tutorial lengkapnya dari blog pixify. Di sana akan diberikan style CSS yang lebih lengkap. Saya hanya menggunakan beberapa potong kode saja.

/* Google style*/
#nav li a,input[type=submit] {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
#nav li a,input[type=submit]:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#nav li a,input[type=submit]:active {
    color: #000;
    border-color: #444;
}

Untuk kotak twitter, sebenarnya ada banyak sumber yang bisa dijadikan contoh, salah satu yang menjadi proyek twitter sendiri adalah Bootstrap. Bootstrap adalah sebuah css framework yang menjadi komponen penting dalam style Twitter sendiri. Namun, saya menggunakan potongan yang saya anggap perlu saja, yaitu untuk glowing box.

/* Twitter-like glow input box */
input[type=text], textarea {
	transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
 	-moz-transition: all 0.30s ease-in-out;
 	border:#fff 1px solid;
 	outline:none;
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid rgba(81, 203, 238, 1);;
}

Untuk bisa mendapatkan hasil yang maksimal, kamu juga harus memodifikasi kode yang sudah ada. Sebagai contoh, kotak komentar menggunakan tag textarea dengan class .comment, untuk itu semua style yang ditujukan pada class comment harus dihilangkan beberapa yang tidak diperlukan agar hasilnya bisa terlihat lebih baik.

Saya juga menambahkan style untuk mengubah warna background pada text yang dipilih (selected text).

/*Text selection background*/
::selection {
	background: #333; /* Safari */
        color: #FFF;
	}
::-moz-selection {
	background: #333; /* Firefox */
        color: #FFF;
}

Untuk rencana ke depan, saya berencana menambahkan fungsi format post yang sudah ada pada wordpress sejak versi 3. Saat ini, template blog saya hanya bisa mendukung format post dengan type Standar, mudah-mudahan beberapa bulan mendatang, blog ini sudah mendukung format Quote, Status, dan Chat 😀

Leave a Reply

Your email address will not be published. Required fields are marked *