Jump to content

Bagaimana mengedit tampilan Mobile Site?


Recommended Posts

para suhu yg terhormat,...

 

muter2, oprak-aprik ke sana-sini sy msh ga nemu tuts cara mengedit tampilan mobile site dari BO ataupun via html.

 

mohon pencerahannya master2 prestashop skalian krn sy baru make ps 2-3bulan ini:

  1. gimana cara hook featured/new/special products ke mobile site? ud coba dari BO tp ada error message "This module cannot be transplanted to this hook ato close.png Modul tidak dapat dipasang ke hook ini." post-773117-0-50137600-1397110122_thumb.jpg
  2. di bagian mana kita bisa mengedit font-size ataupun color ataupun bg-color di mobile site? karena tampilan font di mobile site di BB/handheld yg layar kecil msh terlalu besar shg overlaping?  post-773117-0-24823700-1397109883_thumb.jpgpost-773117-0-33732000-1397109884_thumb.jpg

 

 

terima kasih sebelumnya untuk smua responder...

btw: sy menggunakan PS1.5

 

 

warnawarnistore.com

Link to comment
Share on other sites

1. hook untuk mobile terbatas, kalo featured/new/special mau ditempel ke mobile harus dikustom modulnya

2. css buat mobile ada di folder mobile/css di theme yg dipake.

trima kasih u/ respons nya...

kl harus di edit module nya pun spt nya susah ya :D bt awam spt saya. kira2 ad refrensi module yg sudah jadi untuk mobile site. atau ada agan2 di sini yg ngerti & mo share ilmu ato share module ttg hal spt ini?

soal css di mobile site sy ud cb inspect element via firebug tp koq ga nemu ya.. mksdnya mang di firebug ada dikashi acuan file2 nya yg hrs di edit spt global.css ato jquery.mobile-1.3.0.min.css tp ga ad perubahan. ato hrs online wkt editing nya? soalnya sy msh cb di localhost & liat di browser untuk mobile site nya..

 

sory oot.. maklum noobs abis soal css/code. thx

Link to comment
Share on other sites

  • 3 weeks later...

idenya sih sederhana..

sy cm ingin load mobile site lebih cepat (terutama di BB & pake paket lemot) jadi rencananya pengen sy ganti image2 bg ini-itu spt shadow/gradasi di tab "our offer" dll  dengan modified CSS  ajah. jadi cm load css color aj & tidak ad load image sama sekali

 

trima kasih kl ada yg mo share ilmu nya

Link to comment
Share on other sites

gimana cara hook featured/new/special products ke mobile site?

fungsi hook tersebut harus didefinisikan terlebih dahulu dalam core file module yang diinginkan

Jika anda ingin mengkaitkan module "module-saya" ke displayMobileHeader maka definisikan dahulu fungsi hook ini dalam core file module "module-saya"

Bagaimana cara mendefinisikannya ? ... lihat contoh dibawah ini

public function hookDisplayMobileHeader()
{
   // script php anda disini
}

Untuk diketahui, hookDisplayMobileHeader atau HOOK_MOBILE_HEADER bukanlah tempat yang sesuai/baik untuk menampilkan suatu konten untuk dilihat pengguna. Hook ini terletak dalam <head></head> tags dokumen HTML prestashop anda (template file header.tpl), dengan demikian hook ini berfungsi untuk menempatkan instruksi bagi browser termasuk CSS dan sebagian JS files, serta menempatkan informasi tambahan yang disebut informasi meta.

Jadi kalau anda ingin menampilkan sesuatu yang telah diprogram oleh module "module-saya" agar dapat diliihat oleh pengguna, jangan diletakan di hook ini.

 

 

di bagian mana kita bisa mengedit font-size ataupun color ataupun bg-color di mobile site?

color, background, font-size, width, height ... dst yang berkaitan dengan desain dan layout tampilan website anda adalah CSS variable

Dalam Prestashop, CSS variable tersebut sebagian besar ditempatkan/diatur dalam sebuah file bernama global.css sedangkan sisanya diatur dalam file yang ada dalam module atau file lainnya yang berextensi *.css

Untuk kasus tertentu, sebagian kecil CSS variable ini ditempatkan langsung dalam dokumen HTML dan hal ini biasa disebut dengan istilah Inline CSS.

Anda dapat mengatur tampilan website anda di mobile browser dengan mengatur file template/theme mobile-nya (*.css dan *.tpl)

Semua file tersebut ada didalam /themes/NAMA_THEME_ANDA/mobile/

 

Default Prestashop mobile theme menurut saya sudah cukup optimal dan tidak menggunakan banyak file image dalam desainnya.

Misalnya >> arsip pingdom test prestashop 1.5 mobile version lihat tab "Performance Grade"

Jadi apa yang ingin anda lakukan dengan modifikasi CSS menurut saya tidak akan banyak membantu.

  • Like 1
Link to comment
Share on other sites

thx bt reply nya

ternyata lieeer jg ya mastah..

kesimpulannya karena content yg pengen di hook ada di head to head tags maka sangat tidak di anjurkan ya karena header = tempat awal komando ke browser menjalankan css, script dll

sepertinya berlaku jg untuk di displaymobiletopsitemap nya ya

 

oke kl gitu saya ganti pertanyaaan aja:

gimana spy default firstpage di mobile site di arahkan lsg ke new/special product spy cust bs lsg liat produk2 baru/special yg kita tawarkan? kynya kl hal ini tidak perlu modify hook ya. toh di footer nya jg kluar list our offer & sitemap.

 

trima kasih sebelumnya

Link to comment
Share on other sites

Jangan di redirect, lakukan modifikasi pada module blockspesials untuk di hook ke DisplayMobileIndex

nah itu dia, suhu

di list available hook mobile ane cm ada displaymobileheader & displaymobiletopsitemap lho

post-773117-0-51775500-1399015175_thumb.jpg

 

mangkanya ane nanya cm pk info 2hook yg ada aja :D displaymobileheader & displaymobiletopsitemap

 

DisplayMobileIndex bs ditambahin di list available hook?

 

terimakasih

Link to comment
Share on other sites

×
×
  • Create New...