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 : 


colormag penyesuaian


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 





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


 

17 Responses to "Modifikasi CSS Template ColorMag "

  1. 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

    ReplyDelete
  2. ahover, sangat membantu demi keindahan tampilan template. Aku juga sering otak-atik ahover biar tampil beda.

    ReplyDelete
    Replies
    1. bener sekali kang,, terutama untuk template gratis nih,,soalnya banyak yang pake jadi harus dibedain tampilannya sama yang laainn

      Delete
  3. Replies
    1. ada kang,,, download aja langsung di situs wordpress

      Delete
  4. hehe klo boleh tahu tmpat download template wordpress yg gratis itu dimana yah mas?
    atau klo nggak yg premium jga boleh :D

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. saya udah paste css hasil modifikasinya kang, tp kok ga ada perubahan ya?

    ReplyDelete
  7. cara mengganti jenis font untuk judul web (site-title) bagaimana?

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin