Home » PLATFORM WORDPRESS » Mempercantik Twenty Twelve – wordpress

Mempercantik Twenty Twelve – wordpress

blog.beitsolution.net – Buat kamu-kamu yang biasa blogging menggunakan platform wordpress selfhosting tentunya sudah tau dong mengenai keunggulan dari theme yang satu ini.

Terkenal dengan kesederhanaannya tetapi tetap menampilkan keelegenannya, Twenty twelve pada awalnya sengaja didesaign untuk memenuhi tuntutan perkembangan mobile teknologi. Bersifat responsive dan dapat tampil di semua device dan browser dengan baik.

Selain itu bila dibandingkan dengan beberapa WP theme pendahulunya, kesederhanaan coding dari theme ini membuatnya dapat dengan mudah dieedit.

Di postingan ini saya ingin kasih beberapa trik dasar untuk kamu.

1. Merubah warna Title, link, dll.

Edit file css di folder theme twenty twelve, cari code berikut

a {
outline: none;
color: #13AA20;
}

Ganti code berwarna merah diatas dengan apapun yang kamu mau. Code warna lainnya bisa kamu liat di w3school color.

2. Menghilangkan shadow dan border radius dari header yang kamu pakai:

Edit code berikut di file css:

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

Hapus code yang ada tulisan berikut:

img.header-image,

3. Memindahkan menu menjadi dibawah header.

Buka file header.php di folder twenty twelve dan cari code berikut:

<nav id="site-navigation" role="navigation">
			<h3><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav>

Pindahkan code tersebut diatas code berikut:

</header><!-- #masthead -->

4. Memberikan efek background pada menu:

cari code berikut dan edit:

.main-navigation a:hover {
color: #21759b;
}

tambahkan beberapa efek berikut dibawah code color: #21759b; :

background-color: #1CBB23;
padding: 0px 10px 0px 10px;
-webkit-border-radius: 15px 5px 15px 5px;
border-radius: 15px 5px 15px 5px;
transition: 0.2s;
-webkit-transition: 0.2s;

Untuk masing-masing artinya kamu bisa cek di web tentang HTML.

5. Membuat pojok 1/4 lingkaran.

Cari code berikut:

body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

Tambahkan code berikut dibawah code box shadow.

border-radius: 20px;

Untuk editan lainnya sebenarnya kamu bisa melakukannya dengan gampang kalau kamu sudah bisa menggunakan tool website develover yang sudah given oleh google chrome. Tinggal klik kanan lalu klik inspect element. Dengan tool ini kamu bisa mengedit theme yang kamu inginkan dengan mudah. Mungkin di postingan berikutnya saya akan berikan cara menggunakan tool ini.

Sebenarnya banyak yang menyarankan untuk menggunakan child theme dari pada langsung mengedit theme di file css nya untuk menghindari update theme dan harus mengulang editan dari awal lagi. Tapi saya lebih senang langsung mengedit file css nya karena ini membuat pemanggilan database WP lebih ringan dan tentunya bagus untuk SEO.

Leave a Reply

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

*

x

Check Also

Langkah-langkah mebuat blog di blogger.com

Bagi sobat yang berminat untuk mempublikasikan tulisannya, blog adalah jalan terbaik karena dapat di akses kapan ...