Beberapa Kustomisasi CSS Untuk Mempercantik Tampilan Blog

Saya melakukan beberapa kustomisasi CSS pada theme ini untuk mempercantik tampilan blog ini. Saat membuat tulisan ini, blog saya menggunakan theme dari Studiomommy ‘Young Blush” dari Studio Mommy. Tampilan theme yang asli adalah seperti gambar di bawah, namun saya mengubah headernya dengan gambar buku seperti yang terlihat saat ini dan tidak menggunakan widget slider di bagian halaman depan.

Bila Anda ingin memiliki theme seperti blog ini, Anda bisa langsung membelinya di situs creativemarket.com. Anda membutuhkan akun Paypal untuk menukar uang menjadi credits yang dapat digunakan untuk membeli theme ini atau Anda bisa langsung menggunakan kartu kredit di situs tersebut. Theme ini dibuat menggunakan framework Genesis yang membuat pengembangan blog lebih mudah.

Powered by Creative Market

Namun demikian, saya tetap melakukan beberapa kustomisasi CSS yang saya sesuaikan dengan keinginan saya sendiri. Berikut daftarnya:

/*Mengganti jenis dan ukuran font blog*/
body {
background-color: #ffffff;
color: #3f3f3f;
font-family: ‘lora’, serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 1px;
text-align: justify;
}

/*Memberi warna dan mengatur padding serta margin judul widget*/
.widget-title {
text-align: center;
background-color: #e0e0e0;
padding: 10px 5px;
margin-bottom:15px;
}

/*Membuat garis di bawah deskripsi blog*/
/*.site-description {
margin-bottom: 5px;
text-align: center;
border-bottom: 5px double #c1c1c1;
}*/

/*Menggannti warna hover pada menu*/
.genesis-nav-menu .sub-menu a,
.genesis-nav-menu > li:hover .sub-menu a {
background: #e1e1e1;
color: #404040;
padding: 14px 10px;
position: relative;
width: 184px;
border:1px solid #eee;
border-top: 0;
}

/*Mengganti jenis dan ukuran font pada breadcrumb*/
.breadcrumb {
border: 1px solid #eeeee8;
font-size: 13px;
margin-bottom: 32px;
padding: 16px;
font-family: ‘lora’,
Serif;
}

/*Mengganti  warna background dan style menu secondary*/
.nav-secondary {
background-color: #fff;
color: #404040;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
}

/*Menghilangkan judul dobel karena format screen reader genesis*/
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}

*) Disclaimer: saya menyertakan link affiliasi pada tulisan di atas yang bisa memberi profit bagi saya.