Modifikasi CSS Template ColorMag

Seperti yang sudah saya jelaskan pada artikel sebelumnya tentang Modifikasi Template WordPress bahwa memang memodifikasi tampilan template yang terpasang di WordPress relative lebih mudah karena biasanya sebuah template yang terpasang menyertakan file CSS kedalamnya dan kita juga bisa dengan mudah melakukan sebuah perubahan terhadap tampilan website yang kita miliki hanya dengan mengedit file css nya saja.

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

pada saat menu terpilih. File css-nya menyamakan warna pada saat hover

ataupun pada saat menu terpilih
2. Memberikan border/garis pada saat menu hover di bagian pinggir kiri,

kanan, dan bawah menu
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

hover
6. Merubah warna dan font sub menu menjadi “Upercase” pada saat menu

hover
7. Merubah warna background judul widget footer

Dibawah ini merupakan kode css yang yang akan menjelaskan ketujuh bagian kode yang saya rubah

MAIN MENU ATAS, PENAMBAHAN DAN MODIFIKASI HOVER

.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

pada saat hover di main menu

border-right: 2px solid #FFFF00;---> Penambahan border kanan

                                                   pada saat hover

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

bagian atas pada saat hover

border-bottom: 2px solid #ffffff;-----------> warna border sub menu

bagian bawah pada saat hover

text-transform:uppercase ---------------> Text jadi huruf menjadi besar

pada saat hover

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

Download Template ColorMag

Download CSS Template ColorMag Hasil Modifikasi

Modifikasi CSS Template ColorMag ini sangatlah mudah dan siapupun bisa melakukannya dengan trik yang sudah saya jelaskan pada artikel Modifikasi Template WordPress

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple