Modifikasi CSS Template ColorMag
Template yang akan saya modifikasi kali ini adalah Template ColorMag v 1.1. Template ini didistribusikan secara gratis, Anda bisa mendownload template ini di situs penyedia template WordPres. Template ColorMag v 1.1 sangat cocok sekali untuk jenis situs berita dan meskipun gratis, fitur – fitur yang terdapat pada template lumayan bagus dan kita hanya cukup mengatur semua itu lewat menu Tampilan > Sesuaikan maka selanjutnya akan muncul sebuah tampilan/halaman penyesuaian seperti berikut :
Template ColorMag ini memang sangat mudah untuk disesuaikan tapi ada beberapa hal yang tidak bisa kita rubah melalui halaman penyesuaian ini seperti pada saat kita ingin merubah ukuran font, merubah warna/menu pada saat hover atau pada saat menu terpilih. Oleh karena itu kita perlu mengedit file cssnya.
Perubahan yang saya lakukan pada template ini tidak terlalu banyak diantaranya :
1. Merubah warna menu pada saat hover (mouse diatas menu) dan warna
2. Memberikan border/garis pada saat menu hover di bagian pinggir kiri,
3. Merubah tampilan background sub menu
4. Memberikan border (atas, bawah) pada sub menu sebelum hover
5. Memberikan warna dan border (atas, bawah) pada saat sub menu pada saat
6. Merubah warna dan font sub menu menjadi “Upercase” pada saat menu
7. Merubah warna background judul widget footer
Dibawah ini merupakan kode css yang yang akan menjelaskan ketujuh bagian kode yang saya rubah
.main-navigation a:hover,
.main-navigation ul li.current_page_ancestor > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li:hover > a {
background-color: #289dcc; ----> keadaan warna background pada saat hover
border-bottom: 2px solid #FFFF00; -------> Penambahan border dan warna
border-right: 2px solid #FFFF00;---> Penambahan border kanan
border-left: 2px solid #FFFF00;---> Penambahan border kiri pada saat hover
}
.main-navigation ul li.current-menu-item > a {
background-color: #289dcc; ---> kode ini .main-navigation ul li.current-menu-item asalnya bagian dari kode atas, sekarang dipisah sehingga kita bisa mendefinisikan sendiri jenis warna pada saat menu terpilih
}
/* =DROP DOWN
----------------------------------------------- */
.main-navigation .sub-menu,
.main-navigation .children {
background-color: #990099; -----> background sub menu
}
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
color: #FFFFFF;
background-color: #FF0000;
}
}
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
float: none;
font-size: 14px;
height: 100%;
padding: 10px 15px;
color: #ffffff;
border-bottom: 1px solid #FFFF00; ----------> warna keadaan sub menu
border bawah sebelum hover,
Anda bisa menambhakan
border topnya
width: 170px;
text-align: left;
text-transform: none;
}
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
color: #FFFFFF;
background-color: #FF0000;
border-top: 2px solid #00CC00;------------> warna border sub menu
border-bottom: 2px solid #ffffff;-----------> warna border sub menu
text-transform:uppercase ---------------> Text jadi huruf menjadi besar
FOOTER
.footer-widgets-area .widget-title {
border-bottom: 2px solid #9900FF;-------------> warna backgroun judul widget
font-size: 18px;
margin-bottom: 15px;
padding-bottom: 0;
}
.footer-widgets-area .widget-title span {
background-color:#9900FF;---------> warna garis bawah widget
color: #fff;
padding: 6px 12px;
display: inline-block;
}
Bila Anda tidak ingin repot – repot mempelajarinya atau tidak punya waktu untuk melakukan perubahan itu sendiri maka Anda dapat mendownload file css hasil modifikasi ini, kemudian menerapkan atau mengganti file css dari template ColorMag tersebut menggunakan file css hasil modifikasi
Modifikasi CSS Template ColorMag ini sangatlah mudah dan siapupun bisa melakukannya dengan trik yang sudah saya jelaskan pada artikel Modifikasi Template WordPress
trimakasih atas artikelnya mas...sangat bagus..tpi saya menunggu modiviksi yg blogspot, apa saja. sy sedang belajar modiviksi blogspot. kalau yg wrdpss suatu saat belajarnya.. :D
ReplyDeletesalam hangat di sore hari...mari ngopi
Deleteoke kang :D
Deletekalau blogcepot sayamaha kagak ngerti kang,,,, :D
Deletecobaan biki wordpress ah biar tau
ReplyDeleteiyah atuh bikin dulu... :D
Delete