Prestashop Blog : Editing Prestashop dengan Firebug

Pada tutorial kali ini saya akan membagi sedikit ( tapi emang sedikit banget yang saya punya … :-D ) pengalaman saya dalam meng-edit thema Prestashop dan memang banyak diantara rekan-rekan Prestashoper yang bingung, pusing dan mungkin juga frustasi … dan sekarang akan saya beri resep-resepnya

Hal pertama yang harus dipersiapkan dalam meng-edit thema prestashop adalah
1.    Sedikit pengetahuan mengenai CSS ( Cascading Style Sheet )
2.    File-file yang berkaitan dengan prestashop seperti file .TPL ( Smarty Template ) yang berisi XML
   script
3.   Text Editor Notepad++ dan browser firefox versi terbaru ( sdh include firebug ) jika tidak ada
       silakan anda download di www.getfirebug.com dan klik install

Nah sekarang kita bahas yang no.1 mengenai CSS file karena kita akan meng-edit thema maka sebagian besar file CSS ada pada sub folder C:\xampp\htdocs\presta1540\themes\default\css seperti :

global.css
grid_prestashop.css
scenes.css
maintenance.css
Contoh syintax CSS :

h1 {color: white; font-size:11px;}    -- header 1 warna putih size 11 pixel

atau

h1 { color: white;}            -- header 1 warna putih
h1 { font-size:11px;}             -- header 1 size 11 pixel

untuk lebih jelasnya silakan kunjungi http://www.w3schools.com/css/default.asp

Didalam file global.css inilah seluruh pengaturan website dilakukan seperti :

Background color
Font size
Adjusting Style Sheets ( CSS )
Font family
Color
Text alignment
Paragraph format and pagination

Untuk pembahasan no. 2 file-file .TPL biasanya file-file ini berada pada sub folder module seperti module home featured yaitu homefeatured.tpl, file .tpl ini berkaitan dengan file .css dan proses peng-edit-an dilakukan di file .tpl ini seperti jumlah product per baris, besar dan kecil product dll

contoh script nya sebagai berikut :

Untuk pembahasan no. 3 gunakan text editor yang power full dan free, sangat saya sarankan untuk menggunkan Notepad++ bisa anda download di http://notepad-plus-plus.org/news/notepad-6.4.5-release.html atau versi yang lebih tinggi dan gunakan browser mozilla firefox versi terbaru download di http://www.mozilla.org/en-US/firefox/all/

Bagaimana menggunakan Firebug

1. Bukalah XAMPP Server Control Panel yang ada di desktop, kemudian aktifkan Apache Server dan
MySql dengan meng-klik tab Start
2. Bukalah Browser Firefox dan jalankan aplikasi prestashop 1.5.4.0 atau versi berapapun prestashop
anda
3. Aktifkan Firebug pada menu bar klik Tools, Web Developer, Firebug, Open Firebug lihat gambar

4. Setelah Firebug aktif akan muncul halaman dialog seperti berikut ini

Halaman dialog ini memiliki 2 jendela yaitu jendela kiri dan jendela kanan, untuk bagian kiri berisi page source berupa HTML sedangkan yang kanan page source berupa CSS yang dipergunakan oleh halaman web yang sedang aktif.

Keterangan :
1.    Button “ Click an element in the page to the inspect ” fungsi ini dipergunakan ketika anda hendak
   mengetahui element apa saja yang dipergunakan
2.    Button “HTML” pilihan ini menyajikan page source berupa HTML
3.    Button “Style” pilihan ini menyajikan page source berupa file pendukung dalam bentuk CSS
       misal : global.css

Contoh penggunaan Firebug untuk mengetahui warna background dan merubah warna tersebut menjadi yang kita inginkan

1.    pada jendela sebelah kanan klik <body id=”index” class=” ”> lihat gambar

Pada gambar diatas setelah bagian <body id=”index” class=” ”> di bagian kanan akan ditampilkan file css-nya lihat bagian kanan dilingkari merah rubah warna “black” ( default : putih ) menjadi warna yang anda suka ( perubahan ini secara live, hanya untuk saat itu atau hanya sebagai percobaan ) jika anda sudah cocok dengan bankground-nya bukalah dengan notepad++ file global.css pada baris ke 53 untuk mengetahui lokasi file global.css klik file tersebut dan carilah tanda curet/contreng lihat gambar berikut

Ini berarti global.css berada pada direktori localhost/presta1540/themes/Hcraft/css/ maksudnya file tersebut berada di direktori C:\xampp\htdocs\presta1540\themes\HCraft\css lihat gambar dibawah ini file global.css yang saya buka dengan notepad++

Anda juga dapat menggunakan button no.1

untuk melakukan pengecekan element yang digunakan, lakukan hal sebagai berikut klik button no. 1 arahkan mouse ke object pada website misal pada block header atau pada module tertentu maka anda akan disajikan halaman HTML dan CSS module tersebut

Contoh penggunaan button no.1 “Click an element in the page to the inspect”