» » » » » 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)
nagabet76slot gacorslot online1213141516Slot Online Menghadirkan Pengalaman Digital Yang Didukung Pemrosesan Data Secara Real TimeMahjongways Menganalisis Pola Visual Dan Dinamika Simbol Berdasarkan Pemrosesan Data DigitalMahjongways Mengembangkan Dinamika Permainan Melalui Pengelolaan Data Dan Elemen Visual TerintegrasiAnalisis Komputasi Modern Membantu Memetakan Dinamika Sistem Digital Berdasarkan Data ObservasiMember Baru Mendorong Dinamika Komunitas Digital Menuju Pengalaman Yang Lebih Aktif Dan Menarikslot onlinemahjongwayasarsitektur layananpemrosesan data adaptifmember baruSlot Online Terbaru Menghadirkan AnalisisScatter Hitam Dianalisis Melalui PemetaanPola Scatter Hitam Membentuk Distribusi Visual Yang Dapat Dikaji Menggunakan Komputasi AdaptifArsitektur Teknologi TerdistribusiTeknologi Visualisasi DataMahjongways Mengembangkan Interaksi Visual Melalui Integrasi Simbol Digital Yang DinamisAnalisis Mahjongways Memetakan Dinamika Visual Dan Respons Antarmuka Berbasis DataScatter Hitam Dianalisis Melalui Pemetaan Struktur Simbol Digital Berbasis Komputasi AdaptifAlgoritma Scatter Hitam Membantu Mengidentifikasi Dinamika Pola Melalui Analisis Data ObservasiPg Soft Mengembangkan Sistem Rendering Adaptif Untuk Mendukung Visualisasi Digital ModernTeknologi Pg Soft Mengoptimalkan Pemrosesan Grafis Melalui Arsitektur Rendering TerintegrasiTeknologi Pemodelan Data Membantu Menganalisis Dinamika Informasi Pada Ekosistem Digital ModernArsitektur Komputasi Terdistribusi Meningkatkan Keandalan Pengelolaan Data Pada Platform DigitalTeknologi Kecerdasan Komputasional Mendorong Pengembangan Sistem Digital Yang Lebih AdaptifPemrosesan Data Modern Membantu Memetakan Pola Informasi Melalui Pendekatan Komputasi TerukurTeknologi Integrasi Data Mempermudah Sinkronisasi Informasi Dalam Lingkungan Digital TerpaduVisualisasi Komputasi Modern Membantu Menginterpretasikan Perubahan Pola Pada Sistem Digital KompleksTeknologi Otomasi Data Meningkatkan Efisiensi Pengelolaan Informasi Pada Infrastruktur DigitalModel Komputasi Adaptif Mendukung Pengembangan Teknologi Digital Melalui Analisis Data BerkelanjutanPengembangan Pg Soft Mengintegrasikan Teknologi Rendering Dengan Interaksi Visual Yang ResponsifPg Soft Menerapkan Komputasi Visual Untuk Meningkatkan Efisiensi Pengolahan Elemen DigitalEksplorasi Scatter Hitam Memetakan Distribusi Simbol Melalui Model Analitik Digital TerintegrasiPola Scatter Hitam Dikaji Menggunakan Pendekatan Visualisasi Data Dan Pemodelan StatistikMahjongways Menghadirkan Pendekatan Visual Interaktif Melalui Pemrosesan Simbol Yang AdaptifEksplorasi Mahjongways Mengungkap Perubahan Pola Visual Dalam Lingkungan Digital Terintegrasiqris pg soft menjadi bahasan dalam tren transaksi digitalberita digital mengulas qris dan layanan game pg softmengenal keamanan qris pada transaksi platform gamepg soft dan qris dalam sorotan ekosistem pembayaran elektronikperkembangan qris memicu diskusi di industri game digitalmemahami verifikasi transaksi qris pada layanan game onlineqris pg soft dilihat dari perspektif literasi keuangan digitalmedia online menyoroti sistem pembayaran qris dan gametransaksi elektronik pg soft dan pentingnya keamanan penggunaqris dan pg soft dalam perbincangan teknologi pembayaranqris mahjong online masuk sorotan berita transaksi digitaltren pembayaran qris dalam perbincangan mahjong onlinemahjong dan qris dari sisi keamanan transaksi elektronikmemahami alur verifikasi qris pada layanan mahjong onlineperkembangan pembayaran digital dan fenomena mahjongqris mahjong jadi topik literasi keuangan di ruang digitalmenelaah risiko transaksi qris di platform game onlineberita terkini membahas qris dan mahjong digitalsebelum memindai qris pahami identitas penerima transaksimahjong online dan pentingnya transparansi pembayaran digitalmengapa janji bonus besar dalam judi online bisa mengubah cara seseorang menilai peluangfenomena judi online di lingkungan pertemanan ketika cerita kemenangan menjadi bahan percakapansaat keinginan berhenti berhadapan dengan kebiasaan lama apa yang membuat judol sulit ditinggalkanjudi online dan keputusan spontan mengapa seseorang bisa mengeluarkan uang di luar rencanaketika kerugian judi online mulai ditutupi dengan pinjaman bagaimana masalah keuangan berkembangmengapa pemain judi online sering menganggap putaran berikutnya akan memberikan hasil berbedafenomena judol di tengah gaya hidup digital mengapa pengawasan diri menjadi semakin pentingsaat judi online mengganggu hubungan dengan orang terdekat tanda apa yang sering tidak disadaridari harapan mendapat penghasilan tambahan hingga kehilangan tabungan mengenali risiko judi onlinemengapa berhenti sejenak dari judi online belum tentu menghilangkan keinginan untuk bermain kembalitren mahjong muncul dalam perbincangan pengunjung kafesuasana kafe menjadi latar baru diskusi seputar mahjongmahjong dan budaya nongkrong dalam sorotan media digitalobrolan anak muda di kafe menyinggung fenomena mahjongtren mahjong di kafe dilihat dari perubahan gaya hidupkafe dan komunitas digital mewarnai perbincangan mahjongfenomena mahjong masuk obrolan santai pengunjung kafedari meja kafe hingga linimasa perjalanan tren mahjongmahjong dan ruang sosial kafe dalam budaya populermengamati tren mahjong di tengah aktivitas komunitas kafepg soft menghadirkan ciri visual khas dalam game digitalgame digital pg soft dibahas dari sisi animasi dan desainpg soft dan perubahan estetika permainan berbasis mobilemengenal tema visual dalam koleksi game pg softindustri game digital menyoroti karya pg softpg soft dalam pengamatan tren hiburan interaktifdesain karakter menjadi identitas game digital pg softmembahas pg soft melalui perspektif teknologi dan komputasigame pg soft dan perkembangan grafis di perangkat mobilemedia digital mengulas identitas permainan pg softgame online jadi sorotan baru dalam pemberitaan teknologiindustri game online mencatat pergeseran minat pengguna internetgame online dan kebiasaan baru di kalangan pengguna mobilelaporan digital mengamati perubahan arah game onlinekomunitas internet membahas inovasi game online terkinigame online menghadirkan pendekatan berbeda dalam desain interaktiftren game online terlihat dari perkembangan grafis dan audiomedia teknologi menelusuri fenomena game online masa kinigame online dan dinamika baru industri hiburan internetpengalaman pengguna menjadi sorotan dalam evolusi game onlinegame digital mengubah cara kreator merancang pengalaman interaktifinovasi grafis membawa game digital ke arah yang berbedaekosistem game digital tumbuh bersama teknologi perangkat mobilegame digital dalam catatan perubahan budaya populerdesain suara dan animasi mewarnai industri game digitalpengembang game digital mengeksplorasi konsep visual yang unikgame digital dan peran komunitas dalam membentuk trenteknologi interaktif mendorong eksperimen di dunia game digitalmedia kreatif menyoroti identitas baru game digitalperjalanan game digital dari hobi menuju industri kreatifmemahami algoritma pg soft dari sudut pandang komputasipg soft dan cara kerja sistem acak dalam game digitalmengenal peran rng pada permainan digital pg softalgoritma pg soft dan batas prediksi hasil permainanmembedakan pola visual dan probabilitas game pg softteknologi di balik sistem permainan digital pg softmitos algoritma pg soft yang sering dibahas penggunaanalisis statistik untuk memahami sistem game pg softpg soft dalam pembahasan data acak dan peluang digitalmenelaah algoritma game pg soft tanpa asumsi prediksimahjong online masuk sorotan tren hiburan digital terkinikomunitas internet mengulas fenomena mahjong onlinemahjong online dan pergeseran gaya visual game mobileberita digital menelusuri popularitas mahjong onlinemahjong online mengangkat inspirasi motif budaya klasikperbincangan mahjong online meluas di ruang komunitas digitalmahjong online dalam pengamatan industri game interaktifdesain antarmuka menjadi sorotan pada mahjong onlinefenomena mahjong online dan perubahan kebiasaan pengguna internetmahjong online dibahas dari sisi teknologi dan budaya populerpragmatic play dan pg soft menawarkan karakter visual berbedamengapa penggemar game digital membandingkan pragmatic play dan pg softanimasi dan tema unik menjadi identitas game pragmatic play dan pg softdua provider game menghadirkan pendekatan berbeda pada permainan mobilepg soft dan pragmatic play dalam persaingan kreativitas game digitaldari desain hingga fitur interaktif daya tarik game kedua providerpragmatic play dan pg soft mengapa gaya permainannya sering diperbincangkanpengalaman pengguna menjadi sudut pandang perbandingan pg soft dan pragmatic playtema cerita dan efek visual membedakan karya dua provider game1membedah daya tarik pragmatic play dan pg soft tanpa mitos menangmahjong dan perubahan selera penggemar game berbasis mobilesimbol mahjong menghadirkan inspirasi bagi desain game modernfenomena mahjong online dalam pemberitaan industri hiburan digitalmahjong dan perjalanan motif tradisional menuju layar interaktifkomunitas digital mengamati popularitas tema mahjongmahjong dalam sorotan kreativitas visual dan teknologi permainanmengapa tema mahjong terus hadir dalam perbincangan gamemahjong online dan pergeseran budaya hiburan di internetmenelusuri identitas mahjong lewat simbol warna dan animasimahjong menjadi bahan observasi tren game digital masa kinipanduan pemula memahami aturan dan kombinasi tile mahjongbelajar mahjong online dari pengenalan simbol hingga gilirancara mengenali susunan tile dalam permainan mahjonglangkah awal memahami logika permainan mahjong onlinestrategi dasar mahjong berawal dari mengenali kombinasimengenal perbedaan aturan mahjong tradisional dan digitalkesalahan yang sering ditemui saat belajar mahjong onlinecara memahami alur permainan mahjong bagi pemain barumempelajari tile mahjong dan menyusun kombinasi secara tepatdasar mahjong online dari pemahaman aturan hingga praktikmahjong ways dan gates of olympus punya identitas visual berbedafortune tiger dan sweet bonanza dalam perbincangan game mobilemahjong ways 2 dan starlight princess mengusung tema visual unikfortune rabbit dan the dog house dengan karakter permainan berbedamahjong wins dan big bass bonanza dari sisi desain gamefortune dragon dan gates of gatot kaca mengangkat tema mitologifortune ox dan sugar rush menampilkan pendekatan grafis berbedamahjong treasure dan joker jewels dalam ulasan game digitalfortune mouse dan wild west gold menghadirkan tema kontrasways of the qilin dan fire strike dalam koleksi game provider