Modifikasi Css Template Colormag

Seperti yang sudah saya jelaskan pada artikel sebelumnya perihal Modifikasi Template WordPress bahwa memang memodifikasi tampilan template yang terpasang di WordPress relative lebih praktis alasannya biasanya sebuah template yang terpasang menyertakan file CSS kedalamnya dan kita juga sanggup dengan praktis melaksanakan sebuah perubahan terhadap tampilan website yang kita miliki spesialuntuk dengan mengedit file css nya saja.

Template yang akan saya modifikasi kali ini yaitu Template ColorMag v 1.1. Template ini didistribusikan secara gratis, Anda sanggup mendownload template ini di situs penyedia template WordPres. Template ColorMag v 1.1 sangat cocok sekali untuk jenis situs diberita dan meskipun gratis, fitur – fitur yang terdapat pada template tidak mengecewakan anggun dan kita spesialuntuk cukup mengatur tiruana itu lewat sajian Tampilan > Sesuaikan maka selanjutnya akan muncul sebuah tampilan/halaman penyesuaian ibarat diberikut :

Template ColorMag ini memang sangat praktis untuk diadaptasi tapi ada beberapa hal yang tidak sanggup kita rubah melalui halaman penyesuaian ini ibarat pada dikala kita ingin merubah ukuran font, merubah warna/menu pada dikala hover atau pada dikala sajian terpilih. Oleh alasannya itu kita perlu mengedit file cssnya.

Perubahan yang saya lakukan pada template ini tidak terlalu banyak diantaranya :

1. Merubah warna sajian pada dikala hover (mouse diatas menu) dan warna

pada dikala sajian terpilih. File css-nya menyamakan warna pada dikala hover

ataupun pada dikala sajian terpilih
2. Memdiberikan border/garis pada dikala sajian hover di bab pinggir kiri,

kanan, dan bawah menu
3. Merubah tampilan background sub menu
4. Memdiberikan border (atas, bawah) pada sub sajian sebelum hover
5. Memdiberikan warna dan border (atas, bawah) pada dikala sub sajian pada saat

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

hover
7. Merubah warna background judul widget footer

Dibawah ini ialah aba-aba css yang yang akan pertanda ketujuh bab aba-aba 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 dikala hover

border-bottom: 2px solid #FFFF00; -------> Penambahan border dan warna

pada dikala hover di main sajian

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

                                                   pada dikala hover

border-left: 2px solid #FFFF00;---> Penambahan border kiri pada dikala hover

}
.main-navigation ul li.current-menu-item > a {
background-color: #289dcc; ---> kode ini .main-navigation ul li.current-menu-item asalnya bab dari aba-aba atas, kini dipisah sehingga kita sanggup mendefinisikan sendiri jenis warna pada dikala sajian terpilih
}

/* =DROP DOWN

----------------------------------------------- */

.main-navigation .sub-menu,
.main-navigation .children {
background-color: #990099; -----> background sub sajian

}

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

bab atas pada dikala hover

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

bab bawah pada dikala hover

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

pada dikala 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 melaksanakan perubahan itu sendiri maka Anda sanggup mendownload file css hasil modifikasi ini, kemudian menerapkan atau mengganti file css dari template ColorMag tersebut memakai file css hasil modifikasi

Download Template ColorMag

Download CSS Template ColorMag Hasil Modifikasi

Modifikasi Template WordPress