» » » » » 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)
algoritma game pg soft dan mitos bahwa pergantian perangkat dapat mengubah peluangmengapa konsep benih acak perlu dipahami saat membahas algoritma game pg softalgoritma game pg soft dalam diskusi tentang perbedaan rtp teoretis dan hasil nyataketika pemain menghubungkan kecepatan internet dengan algoritma game pg softbagaimana algoritma game pg soft menjadi topik perdebatan seputar transparansi sistemalgoritma game pg soft dan kesalahan menafsirkan sampel permainan yang terlalu kecilmengapa istilah volatilitas sering dibahas bersama algoritma game pg softalgoritma game pg soft dalam kajian perbedaan antara acak semu dan acak sejatiketika teori pergantian taruhan dikaitkan dengan algoritma game pg softalgoritma game pg soft dan pentingnya memahami pengujian sistem secara independenkasino online dan pentingnya memahami perbedaan iklan berbayar serta ulasan independenmengapa penghapusan data akun menjadi isu privasi dalam pembahasan kasino onlinekasino online dan fenomena penggunaan identitas merek untuk membangun kepercayaan semubagaimana kasino online dibahas dalam upaya pencegahan penipuan berbasis internetketika konten kasino online menggunakan gambar hadiah tanpa konteks yang jelaskasino online dalam kajian peran literasi keuangan menghadapi penawaran digitalmengapa permintaan data pribadi pada layanan kasino online perlu dipertanyakankasino online dan perbedaan antara pengalaman pengguna dengan bukti keamananbagaimana teknik penyamaran domain memunculkan risiko bagi pencari kasino onlinekasino online dalam diskusi tanggung jawab media terhadap konten perjudian digitalkasino online dan risiko tautan palsu yang menyamar sebagai halaman layanan resmimengapa informasi biaya tersembunyi perlu diperhatikan dalam pembahasan kasino onlinekasino online dalam sorotan fenomena penyalahgunaan identitas pada akun digitalketika ulasan kasino online muncul tanpa identitas penulis yang jelasbagaimana kasino online menjadi bahan diskusi tentang pengawasan iklan daringkasino online dan tantangan melindungi pengguna dari rekayasa sosialmengapa bahasa promosi kasino online sering memerlukan pemeriksaan lebih mendalamfenomena penyebaran tautan kasino online melalui pesan pribadi dan risikonyakasino online dari perspektif hukum bagaimana perbedaan yurisdiksi menjadi tantanganketika konten kasino online disamarkan menjadi artikel informasi umumpertemuan tren mahjong dengan konsep festival permainan tradisional asiatren mahjong dan kreativitas penggunaan elemen ubin dalam desain posterbagaimana tren mahjong membuka ide pembuatan lokakarya pengenalan budayatren mahjong dalam kajian perubahan cara masyarakat memandang hobi koleksiketika tren mahjong menjadi topik eksplorasi dalam desain perhiasan miniaturtren mahjong dan potensi kolaborasi antara seniman visual dengan komunitas budayamembaca tren mahjong melalui perkembangan konsep restorasi barang permainan lamatren mahjong dalam diskusi mengenai keberlanjutan material produk hiburanbagaimana tren mahjong dapat diangkat menjadi topik pameran desain interaktiftren mahjong dan inspirasi penataan ruang kreatif dengan identitas budaya asiatren mahjong dalam eksplorasi desain kemasan produk bernuansa vintageketika tren mahjong dibahas sebagai inspirasi kegiatan sosial di akhir pekanmengulas tren mahjong dari perspektif kebangkitan minat terhadap kerajinan tangantren mahjong dan ide pembuatan konten dokumenter tentang hiburan tradisionalbagaimana tren mahjong menginspirasi konsep fotografi still life bertema asiatren mahjong dalam perancangan pernak pernik dengan sentuhan estetika klasikketika seni keramik bertemu tren mahjong dalam eksperimen desain kontemporertren mahjong dan gagasan menghidupkan kembali permainan meja di ruang komunalmengapa tren mahjong menarik dikaji melalui perkembangan budaya nostalgiatren mahjong sebagai inspirasi pembuatan pola tekstil dan ornamen dekoratifmahjong online dan perubahan pengalaman bermain melalui perangkat layar lipatmengapa sistem latihan mandiri menjadi aspek menarik dalam mahjong onlinedi balik mahjong online ada tantangan merancang tampilan untuk berbagai resolusimahjong online dalam pembahasan teknologi sinkronisasi permainan lintas perangkatbagaimana penggunaan avatar membentuk identitas pemain dalam mahjong onlinemahjong online dan pentingnya pengaturan privasi dalam komunitas permainanketika mahjong online menawarkan perspektif baru tentang interaksi tanpa suaraperan sistem penilaian performa dalam membentuk pengalaman mahjong onlinemahjong online dari sisi pengembangan bagaimana kualitas server memengaruhi responsmengapa panduan interaktif dibutuhkan untuk memahami variasi aturan mahjong onlinemahjong online dan perbedaan pengalaman pengguna pada jaringan cepat serta lambatbagaimana fitur undangan pribadi mengubah cara teman berkumpul di mahjong onlinemahjong online dalam sorotan tantangan pengembangan sistem anti kecuranganmengenal pendekatan desain ramah lansia dalam pengembangan mahjong onlinemahjong online dan pertanyaan tentang keamanan komunikasi antarpemainketika mahjong online mengadopsi prinsip desain sederhana untuk pengguna pemulabagaimana sistem pemulihan koneksi mendukung kelangsungan permainan mahjong onlinemahjong online dalam kajian manfaat dan keterbatasan lawan berbasis komputerperubahan kebutuhan penyimpanan data menjadi tantangan bagi platform mahjong onlinemahjong online dan masa depan pengalaman permainan berbasis teknologi browsermahjong dan kisah lahirnya kebiasaan bermain di lingkungan perdagangan asiamengapa ubin mahjong memiliki tekstur yang berbeda dari permainan meja lainnyaperjalanan mahjong dalam dunia sinema dari properti film hingga simbol budayamahjong di tengah perubahan tradisi perayaan tahun baru keluarga asiabagaimana karya sastra menggambarkan mahjong sebagai bagian dari kehidupan sosialmahjong dan peran pengrajin dalam mempertahankan teknik ukir ubin tradisionalkisah perkembangan mahjong dalam masyarakat pesisir dan jalur perdaganganmengapa mahjong sering muncul dalam penggambaran kehidupan kota di film klasikmahjong dari perspektif arsitektur ruang bermain dan kebiasaan berkumpulmenelusuri pengaruh bahan baku terhadap perubahan harga set mahjong koleksibagaimana mahjong mencerminkan perbedaan etika bermain di berbagai lingkunganmahjong dan cerita perubahan desain kotak penyimpanan dari generasi ke generasimengenal peran mahjong dalam pameran museum yang mengangkat sejarah permainanketika mahjong menjadi bahan penelitian tentang pengambilan keputusan kelompokmahjong dalam sejarah perkembangan perlengkapan hiburan rumah tanggamengapa istilah kemenangan mahjong memiliki sebutan berbeda antarkomunitascerita di balik penggunaan lambang musim dan bunga pada set mahjong tertentumahjong dan pengaruh lingkungan sosial terhadap cara pemain mempelajari aturanbagaimana permainan mahjong menjadi inspirasi dalam pendidikan desain produkmahjong dari sudut pandang sejarah bagaimana sebuah permainan merekam perubahan zamanbagaimana prinsip statistika membantu menguji klaim tentang algoritma game pg softalgoritma game pg soft dan fenomena pengguna yang menganggap hasil langka sebagai polamengapa perubahan tampilan tidak otomatis berarti perubahan algoritma game pg softalgoritma game pg soft dalam pembahasan mengenai batas prediksi sistem probabilistikketika analisis video singkat digunakan untuk menebak algoritma game pg softalgoritma game pg soft dan pertanyaan tentang perbedaan aturan serta mekanisme acakbagaimana kekeliruan statistik melahirkan cerita viral seputar algoritma game pg softalgoritma game pg soft dalam sorotan pentingnya membedakan data dan testimonimengapa riwayat kemenangan bukan bukti adanya celah algoritma game pg softalgoritma game pg soft dan tantangan menjelaskan probabilitas kepada pengguna awammahjongways menghadirkan evolusi visual digital melalui perpaduan animasi adaptif dan teknologi antarmuka modernintegrasi teknologi real time mengubah cara platform digital mengelola interaksi dan respons penggunaperan random number generator menjaga independensi hasil pada sistem permainan digital modernmengenal cara mahjongways mengembangkan pengalaman interaktif melalui sistem respons simbol dan desain grafis digitalarsitektur microservices menjadi fondasi penting dalam membangun infrastruktur platform digital yang lebih fleksibelmengenal volatilitas dan distribusi hasil dalam karakteristik matematis permainan digital berbasis rngmahjong ways dan evolusi budaya digital melalui perpaduan warisan tradisional dengan teknologi interaktif moderntransformasi infrastruktur digital memperlihatkan peran penting otomatisasi dalam menjaga stabilitas sistemmahjongways memperlihatkan perkembangan desain permainan digital melalui optimalisasi animasi dan transisi visualmahjong ways 2 dan fenomena perubahan cara pemain menafsirkan hasil permainanmengapa istilah pola gacor mahjong ways 2 sering menimbulkan perdebatan di internetketika mahjong ways 2 menjadi bahan kajian tentang pengaruh desain hadiah digitalperbedaan antara peluang teoretis dan pengalaman pemain dalam mahjong ways 2mahjong ways 2 dalam sorotan bagaimana video kemenangan membentuk opini publikmengulas fenomena pencarian jam hoki dan kaitannya dengan mahjong ways 2mahjong ways 2 dan pentingnya mengenali klaim algoritma yang belum terbuktiketika simbol beruntun di mahjong ways 2 dianggap sebagai petunjuk kemenanganbagaimana mahjong ways 2 memunculkan diskusi tentang literasi statistik pemainmahjong ways 2 dan tantangan memahami informasi permainan di tengah konten viral