Bila kalian merasa kesulitan untuk menambahkan backround? atau mungkin tidak tahu apa itu background di prestashop. Background di prestashop defaultnya di telah diset dengan CSS dengan menggunakan warna putih (#FFF), sangat standar untuk sebuah web background. Lalu, mengapa tidak kita coba untuk mengganti background supaya onlineshop kita tampak lebih keren. Kalau hanya untuk mengganti warna dengan menggunakan warna standar dapat di edit langsung di file CSS yang jika masih menggunakan themes standar filenya berada di folder : “themes/prestashop/css/global.css“. Perhatikan bagian ini:
body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
}
ganti bagian background-color:white; dengan warna yg dikehendaki, misalkan warna biru maka menjadi seperti ini: background-color: blue; atau dengan menggunakan kode warna lain yang diawali simbol “#” (#333 untuk warna abu-abu gelap). Setelah selesai janga lupa untuk di save, lalu lihat perubahan di front office. Sampai disini cukup mudah kan untuk diterapkan.
Setelah kita mencoba merubah warna background tadi, mari kita mencoba teknik lain yang lebih oke daripada hanya merubah warna background yaitu dengan menggunakan gambar / image yang kita mau supaya tampil dengan fullscreen mengikuti ukuran gambar (autosize), teknik background dengan gambar autosize mengikuti ukuran layar monitor di client ini saya terapkan pada www.vortees.com. Untuk memulainya ikuti tahapan berikut: (sebelum memulai sebaiknya anda backup file-file yang akan di edit, jika terjadi kesalahan anda dapat mengembalikan dengan mudah.)
1. Masuk ke folder themes default anda, jika masih menggunakan themes standar dari Prestashop, lokasi berada di “themes/prestashop/“.
2. Cari dan buka file dengan nama “header.tpl” untuk di edit. Lakukan modifikasi dengan menambahkan beberapa syntax html sebagai berikut:
Temukan baris kode seperti ini:
———————————————————————————————
{if !$content_only}
———————————————————————————————-
lakukan modifikasi menjadi seperti ini:
———————————————————————————————
{if !$content_only}
———————————————————————————————-
Jika diperhatikan ada penambahan baris kode:
baris kode tersebut berfungsi sebagai background nantinya. Sesuaikan source dari image yang aka dijadikan background, saran saya jangan menggunakan gambar image yang terlalu besar karena akan membuat loading time menjadi lama. Karena ini mempunyai sifat autosize gambar dengan resolusi kecil dapat me-resize otomatis mengikuti ukuran size di layar monitor. Setelah selesai simpan kembali file tersebut. lanjut ke tahap selanjutnya.
3. Cari dan buka file “footer.tpl“, lalu modifikasi seperti ini:
Cari baris kode seperi dibawah ini :
———————————————————————————————-
{/if}
———————————————————————————————-
edit menjadi seperti ini:
———————————————————————————————-
{/if}
———————————————————————————————-
perubahannya hanya penambahan tag “” saja, karena file “header.tpl” yang tadi belum ditulis tag penutupnya sedangkan untuk menutup tag tersebut berada di file pada tahap ini. Simpan perubahan, lanjut ke tahap selanjutnya.
4. Sekarang kita perlu memodifikasi file “global.css” yang lokasinya berada di: “themes/prestashop/css/global.css“. Tambahkan kode CSS ini di baris paling bawah (sebenarnya dimana saja bisa asal sesuai dengan aturan penulisan kode CSS) :
#bg { width:100%; height:auto; }
img.mybg { width: 100%; height:auto; position: fixed; top: 0; left: 0; }
kemudian edit baris kode yang seperti ini:
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}
menjadi seperti ini:
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
position: relative;
}
Perubahan dengan penambahan “position: relative;“, setelah selesai simpan kembali file terebut.
5. Refresh halaman front office prestashop anda, background akan berubah sesuai gambar / image yang anda tambahkan tadi. Selamat mencoba dan berkreasi.
body {
background-color: white;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
}
ganti bagian background-color:white; dengan warna yg dikehendaki, misalkan warna biru maka menjadi seperti ini: background-color: blue; atau dengan menggunakan kode warna lain yang diawali simbol “#” (#333 untuk warna abu-abu gelap). Setelah selesai janga lupa untuk di save, lalu lihat perubahan di front office. Sampai disini cukup mudah kan untuk diterapkan.
Setelah kita mencoba merubah warna background tadi, mari kita mencoba teknik lain yang lebih oke daripada hanya merubah warna background yaitu dengan menggunakan gambar / image yang kita mau supaya tampil dengan fullscreen mengikuti ukuran gambar (autosize), teknik background dengan gambar autosize mengikuti ukuran layar monitor di client ini saya terapkan pada www.vortees.com. Untuk memulainya ikuti tahapan berikut: (sebelum memulai sebaiknya anda backup file-file yang akan di edit, jika terjadi kesalahan anda dapat mengembalikan dengan mudah.)
1. Masuk ke folder themes default anda, jika masih menggunakan themes standar dari Prestashop, lokasi berada di “themes/prestashop/“.
2. Cari dan buka file dengan nama “header.tpl” untuk di edit. Lakukan modifikasi dengan menambahkan beberapa syntax html sebagai berikut:
Temukan baris kode seperti ini:
———————————————————————————————
{if !$content_only}
———————————————————————————————-
lakukan modifikasi menjadi seperti ini:
———————————————————————————————
{if !$content_only}
———————————————————————————————-
Jika diperhatikan ada penambahan baris kode:
baris kode tersebut berfungsi sebagai background nantinya. Sesuaikan source dari image yang aka dijadikan background, saran saya jangan menggunakan gambar image yang terlalu besar karena akan membuat loading time menjadi lama. Karena ini mempunyai sifat autosize gambar dengan resolusi kecil dapat me-resize otomatis mengikuti ukuran size di layar monitor. Setelah selesai simpan kembali file tersebut. lanjut ke tahap selanjutnya.
3. Cari dan buka file “footer.tpl“, lalu modifikasi seperti ini:
Cari baris kode seperi dibawah ini :
———————————————————————————————-
{/if}
———————————————————————————————-
edit menjadi seperti ini:
———————————————————————————————-
{/if}
———————————————————————————————-
perubahannya hanya penambahan tag “
4. Sekarang kita perlu memodifikasi file “global.css” yang lokasinya berada di: “themes/prestashop/css/global.css“. Tambahkan kode CSS ini di baris paling bawah (sebenarnya dimana saja bisa asal sesuai dengan aturan penulisan kode CSS) :
#bg { width:100%; height:auto; }
img.mybg { width: 100%; height:auto; position: fixed; top: 0; left: 0; }
kemudian edit baris kode yang seperti ini:
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}
menjadi seperti ini:
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
position: relative;
}
Perubahan dengan penambahan “position: relative;“, setelah selesai simpan kembali file terebut.
5. Refresh halaman front office prestashop anda, background akan berubah sesuai gambar / image yang anda tambahkan tadi. Selamat mencoba dan berkreasi.
