Mempercantik Twenty Twelve

Mempercantik Twenty Twelve

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.

Demikianlah sedikit tips dari saya. semoga berguna..

Advertisements

2 thoughts on “Mempercantik Twenty Twelve

  1. ihsancandra June 10, 2014 / 18:33

    terimakasih mas, sudah saya terapkan sebagian ilmunya di blog saya.. keep posting 😀

  2. Rizky October 19, 2014 / 08:33

    ReKnpa setelah saya Menghilangkan shadow dan border radius dari header , malahan website saya gak bisa ke baca dan ada perintah seperti ini …
    ReadResponse() failed: The server did not return a response for this request.
    ditunggu balasan nya..??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s