» » » » » Modifikasi CSS Template ColorMag

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 


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

 

17 Responses to "Modifikasi CSS Template ColorMag "

  1. Lughatuna Al-JamilahDecember 16, 2015 at 5:36 PM

    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
    Replies
    1. Lughatuna Al-JamilahDecember 16, 2015 at 5:36 PM

      salam hangat di sore hari...mari ngopi

      Delete
    2. Ahmad ZaelaniDecember 17, 2015 at 7:53 AM

      oke kang :D

      Delete
    3. Ahmad ZaelaniDecember 17, 2015 at 7:54 AM

      kalau blogcepot sayamaha kagak ngerti kang,,,, :D

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Newer PostOlder PostHome
Subscribe to:Post Comments (Atom)
mahjong ways mengungkap rahasia visual simbol dan mekanisme permainan yang unikmengenal perubahan simbol mahjong ways dan pengaruhnya terhadap alur permainanarsitektur microservices menjadi strategi baru dalam membangun infrastruktur aplikasi skala besarevolusi game mahjong dari permainan tradisional hingga hiburan digital modernfitur free spin dan scatter mahjong ways mengenal peran simbol dalam permainantransformasi teknologi cloud membentuk ekosistem layanan digital yang lebih fleksibelteknologi observability membantu platform modern menjaga stabilitas dan kinerja layanansistem cascading mahjong ways mengapa animasi dan transisi simbol menarik perhatianmengapa game bertema mahjong semakin populer ini faktor visual dan inovasinyamahjong ways dan perjalanan simbol tradisional menembus era digital ketika warisan permainan klasik menemukan identitas baru di kalangan generasi mudamahjong pgsoft dan fenomena psikologi visual yang membuat pemain terus memperhatikan perubahan simbol serta animasi dalam setiap putaranintegrasi teknologi automated monitoring memperkuat pengawasan infrastruktur digital melalui analisis real timemahjong ways 2 menghadirkan mekanisme near miss yang menarik dikaji dari sisi psikologi mengapa momen hampir mendapatkan kombinasi terasa begitu membekasmahjong pgsoft dan perhitungan expected value membuka perspektif berbeda tentang potensi hadiah besar serta realitas matematika di balik permainanmekanisme database terdistribusi mendukung konsistensi informasi pada lingkungan komputasi skala besarpgsoft vs pragmatic play mahjong ways dan princess starlight memperlihatkan dua pendekatan berbeda dalam mengembangkan desain visual serta mekanisme permainan digitalmahjong ways 2 dan rahasia di balik mekanisme cascade yang mengubah susunan simbol secara berurutan menjadi salah satu daya tarik gameplay modernteknologi gpu acceleration mengoptimalkan kinerja rendering grafis melalui pemrosesan komputasi paralelmahjong dan fenomena permainan lama yang menemukan tempat di era hiburan serbacepatmengapa cara pemain menyimpan ubin mahjong bisa mencerminkan tradisi yang berbedaketika mahjong menjadi bagian dari cerita migrasi dan pertukaran budaya asiaperubahan bentuk meja mahjong dari perlengkapan sederhana hingga desain otomatismahjong dalam sorotan bagaimana kesalahan kecil dapat mengubah jalannya permainandi balik koleksi mahjong antik terdapat kisah bahan dan teknik pembuatan ubinmengapa mahjong memiliki peran menarik dalam pertemuan komunitas perantauanmahjong dan cara pemain membangun kebiasaan mengamati ubin yang telah dibuangketika arsip foto keluarga merekam perjalanan tradisi bermain mahjongmenelusuri perkembangan mahjong melalui perubahan aturan kompetisi internasional