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

2. 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 )