Jump to content
kondangmurah

HELP : BAGAIMANA CARA MEMPERLUAS HALAMAN PRESTASHOP VIA CSS ?

Recommended Posts

Mau tanya para master... :mellow:

Bagaimana cara agar halaman prestashop menjadi full screen [ margin dengan tepi layar kira2 15px ] menggunakan CSS..

 

Saya sudah mencoba edit global.css sedemikian rupa tetapi hasilnya nihil..

 

presta saya ada di

 

www.indogadgetstore.com

 

Thanks master. :D

Share this post


Link to post
Share on other sites

Mungkin yang dimaksud adalah Full width ya ... bukan Full Screen :P

Prestashop pada dasarnya menggunakan themes dengan aturan Fixed Width.

Dengan demikian tampilan halaman menjadi full width atau tidaknya tergantung target monitor client.

Qlo width diatur ke 980px lalu client menggunakan monitor 1280px, ya tidak akan tampil full width.

Dan jika client menggunakan monitor lama yang resolusinya masih 800px, maka lebar halaman akan overlapping.

 

Jika ingin tampilan websitenya selallu full width tanpa peduli berapa resolusi monitor client, maka theme-nya harus di rubah menggunakan aturan layout Fluid yaitu menggunakan nilai relative (persentase) untuk nilai width-nya

 

Misalnya sebuah halaman website dibagi dengan html division seperti dibawah ini :

<div id="page">
   <div id="left_column">LEFT CONTENT</div>
   <div id="center_column">CENTER CONTENT</div>
   <div id="right_column">RIGHT CONTENT</div>
</div>

Kalau ingin tampilannya sellalu Full Width, maka CSS-nya dibuat seperti ini :

#page {width: 100%}
#left_column, #right_column {width: 10%}
#center_column {width:75%;margin: 0 5px;}

Namun ... kemudian yang harus anda cermati adalah kontennya, terutama gambar.

Bila semua kolom diatur secara fluid, maka lebar masing-masing kolom tsb akan berubah mengikuti lebar monitor client, namun isi atau konten dalam masing-masing kolom tsb terutama gambar ukurannya adalah fixed. Konten gambar yang ukurannya fixed tidak akan ikut menyesuaikan sehingga kemungkinan besar tampilan konten menjadi tidak enak dilihat atau bahkan acak-acakan.

Nah hal inilah yang harus anda perhitungkan baik-baik, apa dan bagaimana agar tampilan tetap baik dan enak dilihat.

 

Untuk lebih jelasnya mengenai Layout Fluid, silahkan merujuk ke : http://matthewhartman.github.io/base/docs/grid.html

CSS kodenya menurut saya sangat baik serta support mobil browser sehingga biasa saya gunakan/terapkan untuk website klien

  • Like 2

Share this post


Link to post
Share on other sites

Misi gan sya mau tnya sya kan sudah menghilangkan smua block module yg ada dibagian kiri dan kanan

Jadi di tampilan index cma ada image slider dan featured product

 

Nah yg sya mau tanyain

Bgaimana ch cara ya membuat featured product satu halaman dari kiri smpai kanan ,, atau gak bagaimana cara ya menambahkan featured product menjadi 5 atau 6 ke samping ya

Kan default ya cma 4 yg ditampilin difeatured product.

Mksi sblm ya

Mhon bantuan ya :D

 

Sya pakai prstashop 1.5.6

Edited by Rizki22

Share this post


Link to post
Share on other sites

Mungkin yang dimaksud adalah Full width ya ... bukan Full Screen :P

Prestashop pada dasarnya menggunakan themes dengan aturan Fixed Width.

Dengan demikian tampilan halaman menjadi full width atau tidaknya tergantung target monitor client.

Qlo width diatur ke 980px lalu client menggunakan monitor 1280px, ya tidak akan tampil full width.

Dan jika client menggunakan monitor lama yang resolusinya masih 800px, maka lebar halaman akan overlapping.

 

Jika ingin tampilan websitenya selallu full width tanpa peduli berapa resolusi monitor client, maka theme-nya harus di rubah menggunakan aturan layout Fluid yaitu menggunakan nilai relative (persentase) untuk nilai width-nya

 

Misalnya sebuah halaman website dibagi dengan html division seperti dibawah ini :

<div id="page">
   <div id="left_column">LEFT CONTENT</div>
   <div id="center_column">CENTER CONTENT</div>
   <div id="right_column">RIGHT CONTENT</div>
</div>
Kalau ingin tampilannya sellalu Full Width, maka CSS-nya dibuat seperti ini :
#page {width: 100%}
#left_column, #right_column {width: 10%}
#center_column {width:75%;margin: 0 5px;}
Namun ... kemudian yang harus anda cermati adalah kontennya, terutama gambar.

Bila semua kolom diatur secara fluid, maka lebar masing-masing kolom tsb akan berubah mengikuti lebar monitor client, namun isi atau konten dalam masing-masing kolom tsb terutama gambar ukurannya adalah fixed. Konten gambar yang ukurannya fixed tidak akan ikut menyesuaikan sehingga kemungkinan besar tampilan konten menjadi tidak enak dilihat atau bahkan acak-acakan.

Nah hal inilah yang harus anda perhitungkan baik-baik, apa dan bagaimana agar tampilan tetap baik dan enak dilihat.

 

Untuk lebih jelasnya mengenai Layout Fluid, silahkan merujuk ke : http://matthewhartman.github.io/base/docs/grid.html

CSS kodenya menurut saya sangat baik serta support mobil browser sehingga biasa saya gunakan/terapkan untuk website klien

Misi gan sya mau tnya sya kan sudah

menghilangkan smua block module yg ada

dibagian kiri dan kanan

Jadi di tampilan index cma ada image slider

dan featured product

Nah yg sya mau tanyain

Bgaimana ch cara ya membuat featured

product satu halaman dari kiri smpai kanan ,,

atau gak bagaimana cara ya menambahkan

featured product menjadi 5 atau 6 ke

samping ya

Kan default ya cma 4 yg ditampilin

difeatured product.

Mksi sblm ya

Mhon bantuan ya

Sya pakai prstashop 1.5.6

Share this post


Link to post
Share on other sites

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More