Sunday, May 19

PRESTASHOP 1.5.4 - CUSTOMIZE BLOCK HEADER PART 3 – BLOCK TOP MENU




Merubah tampilan Block Top Menu Prestashop 1.5.4 sesuai dengan keinginan kita
1. Merubah warna Menu Bar
Bukalah dengan notepad++ file superfish-modified.css pada folder C:\xampp\htdocs\presta1541\modules\blocktopmenu\css
arahkan cursor ke baris  15 edit script tersebut  seperti dibawah ini, lihat script dibawah  yang merupakan bagian dari superfish-modified.css

Sebelum dirubah :
.sf-menu {
        margin: 10px 0;
        padding:0;
        width:980px;/* 980 */
        background: #383838;
}

Setelah dirubah :
.sf-menu {
        margin: 10px 0;
        padding:0;
        width:980px;/* 980 */
        background: blue;
}



Arahkan cursor ke baris 92 ( Hover ) dan rubahlah warna yang anda inginkan


Sebelum dirubah :
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:#4e4e4e;
}
Sebelum dirubah :
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background: magenta;
}


Block Top Menu seperti Vista version
Untuk merubah Block Top Menu seperti Vista Version pada prestashop 1.5.4 diperlukan sedikit modifikasi pada module Block Top Menu seperti dibawah ini :
Download file dibawah ini
  1.  superfish-modified.css    tempatkan dalam folder C:\xampp\htdocs\presta1540\modules\blocktopmenu\css
  1. Seluruh isi folder IMG salin/copy kedalam folder  IMG prestashop anda, folder ini berisi :
../img/menu.png
../img/hover.png
../img/hover_left.png
../img/arrows-ffffff.png
../img/shadow.png
../img/search.gif
../img/menu.png
../img/hover.png



Jalankan browser anda dan preview dari hasil penambahan tersebut seharusnya seperi ini :
 
 
 
Selamat mencoba, semoga berhasil..


-------------- Perhatian dan Sangat PENTING--------------------------------------------------
1. Sebelum anda melakukan customze back-up lah terlebih dahulu
2. Setiap perubahan yang di lakukan di CMS ini harus di re-compile agar dapat berjalan dengan optimal 

caranya : Login ke Dashboard/Control Panel – pilih tab Advanced Parameters – 
               Perfomance - Template cache click force compilation
-----------------------------------------------------------------------------------------------------

Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

No comments:

Post a Comment