Cara Mengubah Warna Background Menu Evomagz (Solid or Gradient)

KURAZONE ~ Yosh pada kesempatan kali ini kita akan belajar "Cara Mengubah Warna Background Menu Evomagz (Solid or Gradient)", buat sahabat Kurazer yang sekarang ini menggunakan template Evomagz dan ingin merubah warna background pada menu nya. Simak baik - baik ulasan kali ini ya...

Untuk tutor kali ini saya membaginya kedalam 2 cara, yaitu :
1. Background Solid Color (1 warna)
2. Background Gradient Color (2 warna / lebih)

Namun sebelum mengganti background, saya ajak terlebih dahulu untuk mengenali struktur menu yang terdapat pada Evomagz. Lihat gambar dibawah ini :

Dari gambar struktur diatas, semakin kecil dimensinya maka semakin didepan posisi layer nya. Artinya adalah meski kita mengubah warna background pada .dropdowns maka warna pada .dropdowns masih tertutup dengan warna yang ada didepannya yaitu .nav-menu2 dan #search-form

Bingung?
Saya kasih contoh biar gak bingung, lihat gambar dibawah ini :

warna background pada .dropdowns sudah diubah menjadi biru, namun masih tertutup oleh  .nav-menu2 dan #search-form

Untuk itulah dalam mengubah warna background pada menu Evomagz harus berurutan mulai dari yang paling belakang hingga yang terdepan :
[1] .dropdowns
[2] .nav-menu2 dan #search-form
[3] .nav-menu2 > li > a.active

Paham? :) Jika sudah paham, saatnya mengubah background.
Langsung saja : Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML

.dropdowns
mengubah warna background .dropdowns

Cari kode dibawah ini :

.dropdowns {

Sekedar contoh saja, ubah kode background:$(menu.background.color); menjadi background:red; 

HASIL SEMENTARA :

.nav-menu2
mengubah warna background .nav-menu2

Cari kode dibawah ini :

.nav-menu2 {

Sekedar contoh saja, ubah background:$(menu.background.color); menjadi background:transparent;

HASIL SEMENTARA :

#search-form
mengubah warna background #search-form

Cari kode dibawah ini :

#search-form {

Sekedar contoh saja, ubah background:$(menu.background.color); menjadi background:transparent;

HASIL SEMENTARA :

.nav-menu2 > li > a.active
mengubah warna background .nav-menu2 > li > a.active

Cari kode dibawah ini :

.nav-menu2 > li > a.active

Sekedar contoh saja, ubah background:$(menu.navigation.hover.color);  menjadi background:transparent;

HASIL SEMENTARA :

Nah, sampai disini kalian tinggal konsen lagi ke kode .dropdowns untuk menentukan warna yang pas pada menu Evomagz.

1 Background Solid Color
Cara pertama ini digunakan apabila kalian ingin menggunakan Warna Solid (1 Warna)

Cari kode .dropdowns {

ubah warna background nya menjadi warna yang kalian inginkan, misalnya seperti ini :

.dropdowns {
font:$(menu.font);
background:#007BFD;
text-transform:uppercase;
height:48px;
line-height:48px;
}

HASIL :

2 Background Gradient Color
Cara kedua ini digunakan apabila kalian ingin menggunakan Warna Gradasi (2 Warna / lebih)

Cari kode .dropdowns {

ubah warna background nya dengan menambahkan kode gradasi dan warna gradasi yang ingin dipakai, misalnya seperti ini :

.dropdowns {
font:$(menu.font);
background:linear-gradient(to right,#007BFD,#000000);
text-transform:uppercase;
height:48px;
line-height:48px;
}

HASIL :

Direction to right bisa juga kalian ubah sesuai keinginan. Direction ini menentukan kearah mana gradasi terbentuk. Baca selengkapnya disini >> Cara Membuat Background Gradasi Linear CSS3 di Blog

Darisini kalian sudah berhasil mengubah warna background menu Evomagz. 

Namun dikarenakan tadi kita mengubah background pada .nav-menu2 menjadi transparent, maka bagian menu ini akan nampak transparan ketika diakses lewat Mobile.

Untuk mengatasinya, cukup tambahkan @media only screen and (max-width: 768px)
Cari kode .nav-menu2 { lalu hapus backgroundnya, sehingga kode nya akan berubah tanpa background menjadi seperti ini :

.nav-menu2 {
list-style: none;
margin:0 0 0 0;
*zoom: 1;
float:left;
}

Kemudian Copy kode dibawah ini, lalu letakkan tepat diatas kode .nav-menu2 {

@media only screen and (max-width: 768px){
.nav-menu2 {
background:red;
}}

Sehingga Kodenya akan nampak seperti ini :

@media only screen and (max-width: 768px){
.nav-menu2 {
background:red;
}}
.nav-menu2 {
list-style: none;
margin:0 0 0 0;
*zoom: 1;
float:left;
}

Keterangan @media only screen and (max-width: 768px) menandakan bahwa kode yang berada pada lingkup tersebut hanya muncul saat diakses via mobile / handphone. Sehingga .nav-menu2 akan menjadi transparan ketika diakses via desktop dan akan bewarna merah ketika diakses via mobile yang resolusinya dibawah 768px. Keterangan warna red bisa kalian ubah sesuai warna yang diinginkan.

Tutorial Tambahan

box shadow menu

Apabila kalian ingin menghapus box shadow menu :

maka cari kode .nav-menu2 > li > a { dan .nav-menu2 > li > a.active {
lalu hapus bagian box-shadow: nya

HASIL :

menu hover, submenu dan segitiga submenu

HOVER

hover maknanya adalah "peristiwa yang terjadi ketika objek tersentuh kursor".

Untuk mengedit bagian menu hover nya, kalian bisa mencari kode .nav-menu2 > li:hover > a { :

background pada hover menandakan warna yang akan muncul ketika kursor menyentuh menu, sedangkan untuk box-shadow adalah warna garis atas yang muncul pada bagian menu ketika kursor menyentuh menu. Silahkan kalian ganti sesuai selera.

CONTOH :

SUBMENU

submenu adalah isi dari bagian menu utama.

untuk mengedit bagian menu submenu nya, kalian bisa mencari kode .nav-menu2 li ul {

SEGITIGA SUBMENU

segitiga submenu adalah ikon segitiga kecil yang muncul ketika submenu ditampilkan

kalian bisa mencari kode .nav-menu2 > li > ul:before { kemudian ubah warna backgroundnya.

Gimana? Mudah kan? :v
Sisanya bisa kalian explore sendiri.

---

Itulah informasi mengenai "Cara Mengubah Warna Background Menu Evomagz (Solid or Gradient)", selamat mencoba dan semoga bermanfaat. Bagikan artikel ini ya jika bermanfaat. Kalau gak mau bagikan, silahkan sruput cendol - cendol yang ada pada blog ini. Ngerti cendol kan? Makasih :D #damai