center 2 column

arya pratama · February 17, 2009

Saya kepincut dengan themes 2 column seperti punya mbak Daryl. tapi sayang, templatenya ga bisa jalan di prestashop 1.1
akhirnya saya putuskan untuk membuat 2 column sendiri.
beberapa langkah sudah saya terapkan. yaitu mengosongi right column pada bagian module dan menghapus div id right column pada file footer.tpl
Cuma permasalahannya tinggal bagaimana membuat 2 column itu jadi center seperti themes punya mbak daryl atau rumahkristal.com?

Atau mungkin ada yang punya link untuk download themes dgn 2 column?? (tapi designnya tidak xtrem, agar dapat mempermudah saya untuk redesign tampilannya, contohnya seperti themes darylita)

Salam dan terima kasih

Kowoy · February 18, 2009

Buka global css di folder template.

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}
-----
#left_column {
   clear:left;
   width:190px;
   padding-right: 15px;
}
#center_column {
   width: 556px;
   margin: 0 0 30px 0;
}
#right_column {
   width: 190px;
   padding-left: 15px;
}

Si situ ada righ column kan? lebar 190px, padding 15px, artinya empty yang kosong di kanan ada 205px. Biar jadi full tampilannya, maka center column widthnya diganti. Dalam hal ini 556 + 205px. itung ndiri yach, dan perhatikan apa yang terjadi.

arya pratama · February 18, 2009

terima kasih buat jawabannya mas kowoy..
tapi sayang itu bukan yang saya maksud. saya udah coba cara itu, hasilnya column center jadi melebar ke kanan. yang saya inginkan itu seperti www.rumahkristal.com / themesnya mbak daryl, yg ukuran column kiri dan column tengah tetap default namun kedua column ini letaknya center pada browser. seperti ini :

Kowoy · February 19, 2009

Ooooo jadi anda maunya kolom kanan hilang sama sekali, namun tampilan center column tetap dengan nilai default bukan? Ok, no problem buat saya.

di code yang atas saya sudah kasih bukan? codenya ambil yang ini:

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}

Ok, kemarin sudah dibahas bawa right_column mempunyai nilai width = 190px dan padding = 15px.. Artinya kolom kanan bernilai 205px.

Langkah selanjutnya cari kode di atas, pada #page terdapat nilai width sebesar 980px. Biar centered di browser, nilai tersebut dikurangi 205px, 980px - 205 px = 775px.

Silakan coba dan lihat apa yang terjadi.

Kalau mentok nanti saya buatkan default themes presta menjadi 2 column.

arya pratama · February 19, 2009

sya sangad2 berterima kasih banyak mas kowoy buat bantuannya. mau membantu newbie seperti saya..hehehehe..

cuma sayangnya ada yang kurang mas. saya sudah tambahkan gambar backgroud, jadinya seperti ini (gambar). pengennnya ada backgroud putih (atau warna lain) lagi ditengahnya.. cara bikinnya gmn ya?

maaf ngerepotin..^^

Kowoy · February 20, 2009

Lha itu bisa nambah background, seharusnya anda juga bisa menambahkannya ditengah.

background yang bisa tampil itu masuk ke element body,

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

kode di atas adalah css standar dari prestashop.

Kalau mau menambahkan background ubah spt ini tambahkan background image. background color juga bisa disatukan dengan background image.

body {
   background-color: white; /* Ini warna dari background */
   background-image : url('../img/background.gif') repeat; * Ini background berupa image*/
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

di atas ada dua jenis background kan? artinya apa? jika image tidak ditemukan, maka background menuju ke color.

Code background di atas dapat di gabung:

body {
background : white url('../img/background.gif') repeat; /* gabungan antara background color dan image */
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center;
}
[/code]

Sesuai permintaan bapak, apabila mau menambahkan background lagi, cari idnya. jika yang di tegah mau dikasih backgroun, ambil code ini:

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}

modifikasi dengan menambahkan element background. harusnya nanti spt ini.

#page {
background : white url('../img/background2.gif') repeat; /* ini background buat ditengah */
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}

Segini dulu dari saya, silakan coba-coba.

arya pratama · February 20, 2009

Sedetail itu jelasinnya..terima kasih banyak mas Kowoy..
saya jadi ngefans neh sama anda..hehehehe

ok saya akan coba mas..(ni soalnya ga lagi di rumah)

pertanyaan terakhir mas..(moga2 aja ;-P )
ada 1 lagi yg ganjel di pikiran saya..ga suka liat huruf kapital yang besar2..
pengennya seperti ini (gambar (yg di garis'i warna hijau) Ga pakai huruf KAPITAL semua.
cara gantinya di sbelah mana ya mas?
saya udah coba ganti2..tapi yang berubah cm ukurannya aja.

sekali lagi terima kasih banyak..
salam

Kowoy · February 20, 2009

pelajaran dr thread ini adalah soal css. Nah dr sekarang coba anda pelajari apa itu css dan implementasinya.

Untuk merubah HURUF KAPITAL ke yang lainnya adalah sebagai berikut:

cari tulisan "UPPERCASE" di global css. ganti dengan berikut ini

none : Huruf sesuai aslinya.
capitalize : Setiap awal kata HURUF KAPITAL
uppercase : HURUF KAPITAL
lowercase : HURUF KECIL

cukup sekian dulu, klo ada yang penting pm ane di YM aja.

ahongpek · February 20, 2009

mas kowoy, salam kenal. saya mengikuti langkah demi langkah penjelasan anda. tolong tanya bagaimana mengedit footer, terima kasih sebelumnya

Kowoy · February 23, 2009

mau di edit menjadi bagaimana? saya juga blm pernah edit dan gak kepikiran untuk edit. Saya biasanya hanya memodif aja.

Paling simple, hilangkan saja footer itu caranya? buka footer.tpl lengkapnya isinya sperti ini:

   {if !$content_only}


<!-- Right -->

               {$HOOK_RIGHT_COLUMN}


<!-- Footer -->
{$HOOK_FOOTER}

   {/if}
   </body>
</html>

Kalau mau menghilangkan semua footer hapus saja {$HOOK_FOOTER}, div id="footer" jangan dihapus jika anda ingin mengibah footer anda.

Paling simple adalah saya tambahkan footer baru seperti ini misalnya.

   {if !$content_only}


<!-- Right -->

               {$HOOK_RIGHT_COLUMN}


<!-- Footer -->

                               CopyRight © 2009 - Childkeith.com, Baby Kit Online Store
                               Developed by Kowoy 
                               Crew of Insight Web Studio 
                               and Hosted at Bimahost


   {/if}
   </body>
</html>

Itu hanya satu cara, cara lainnya masih ada. Tergantung kebutuhan.

arya pratama · February 23, 2009

mas kowoy menunjukkan lagi taringnya..
hehehehe

sekali lagi terima kasih banyak bwd ilmunya...^^

Prestafreak™ · February 24, 2009

Wah Mas Kowoy sepertinya ahli CSS, ikutan nanya dong, kalo kita pengen footernya gak ikut bergerak kalo halamannya di scroll gimana yaa?
Jadi posisinya tetep fixed dibawah tanpa terpengaruh scrolling pada saat kita scroll isi halaman. Thanks...

arya pratama · February 24, 2009

loh emang defaultnya footernya ikut bergerak ya?
bergerak kmn? ke atas-bawah / ke kanan-kiri?
ko setauQ klo halamannya di scrool ke atas-bawah, footernya ga ikut bergerak kug..

maaf klo salah..

Kowoy · February 25, 2009

Footer itu positionnya relative, jadi klo halaman kita panjang, footer nya gak keliatan. baru klo kita scroll ke bawah baru muncul, itu klo halaman kita panjang, klo pendek? ya gak ngaruh tetep keliatan langsung.

Bagaimana caranya? nah bukannya gak mau ngajarin, tp sekarang aku kasih kailnya aja. tambahkan di #footer

      position:absolute;

di bawahnya masih ada lagi code yang harus ditambahkan, sprt yang sudah di state di awal, saya kali ini mo kasih kailnya .

Terus bgmn tahu code apa berikutnya? jangan sungkan googling. saya biasa sekolah di sini.

http://www.w3schools.com/Css/pr_class_position.asp

untuk yang ini saya blm coba, tp keliatannya gagal. Namanya juga ngasal.

Solusi lain, gunakan frame, solusi lain gunakan footer beupa image. Ntar di oprek lagi, yang 100% sukses footernya harus pake frame.

Prestafreak™ · February 26, 2009

Mas Kowoy, terima kasih atas reply-nya.
Sebenernya aku juga dah googling Mas, tapi masih juga belum bisa menerapkan code yang dicontohkan. Makanya saya nanya ke forum ini, kan disini banyak ahlinya :-)

Cara mas Kowoy juga pernah aku coba, tapi kayaknya hanya bisa untuk background picture yang pengen dibuat absolute posisinya.

Aku dah coba beberapa code, seperti di http://limpid.nl/lab/css/fixed/footer
Footernya tetep aja ikut tenggelam kalo kita scroll kebawah. Mungkin salah syntaxnya.

Aku juga masih ngoprek kodenya... kalo bisa, aku post deh disini... (tapi kayaknya lama... :cheese: soalnya aku dah pusing gak bisa2)

loh emang defaultnya footernya ikut bergerak ya?
bergerak kmn? ke atas-bawah / ke kanan-kiri?
ko setauQ klo halamannya di scrool ke atas-bawah, footernya ga ikut bergerak kug..

maaf klo salah..

Mas Arya, mungkin saya kurang jelas menerangkan maksud fixed position buat footer, seperti mas Kowoy bilang diatas, kalo halaman panjang footer kita kan ikut tenggelam dibawah page, maksudnya gmana caranya biar footernya tetep kelihatan walaupun sudah kita scroll halamannya, untuk lebih jelasnya lihat di http://limpid.nl/lab/css/fixed/footer
Thanks...

Oh iya Mas Arya, aku juga pake presta 1.1, theme mBak Daryl bisa dipake tuh ditempatku.

Kowoy · February 26, 2009

harusnya jalan, saya udah cek codenya dari http://limpid.nl/lab/css/fixed/footer . Berarti scriptnya om yang gak beres.

Prestafreak™ · February 26, 2009

Thanks Mas Kowoy...
Ternyata saya berpikir terlalu jauh... udah pusing duluan..
setelah menenangkan diri hehe...

kita hanya perlu nambah

position:fixed;
bottom:0px;

pada kode footernya :-)
terus kalo mau ditambah background kita tambahin aja, mau gambar ato warna
Thanks again dah mau bantuin...

Kowoy · February 26, 2009

good, gara2 situ ngomongin fixed footer, akhirnya kepikiran juga untuk bikin templateku itu fixed untuk header dan footernya. Thanks idenya.

arya pratama · February 26, 2009

Mas Arya, mungkin saya kurang jelas menerangkan maksud fixed position buat footer, seperti mas Kowoy bilang diatas, kalo halaman panjang footer kita kan ikut tenggelam dibawah page, maksudnya gmana caranya biar footernya tetep kelihatan walaupun sudah kita scroll halamannya, untuk lebih jelasnya lihat di http://limpid.nl/lab/css/fixed/footer
Thanks...

Oh iya Mas Arya, aku juga pake presta 1.1, theme mBak Daryl bisa dipake tuh ditempatku.

oh gtu toh maksudnya..maklum newbie..hehe :cheese:
wah jadi kepincut juga nie.pengen ky gtu..hehehe

klo ganti themenya lewat di back office/preferences/appearance, ga bisa jalan normal tuh themesnya.seperti script AJAX ga jalan dan pada block kategorinya juga ga ada tulisannya. tapi klo cm di copy aja images ato global CSSnya baru bisa jalan.

maaf klo salah ^^

Prestafreak™ · February 27, 2009

Seingat saya normal2 aja (sorry aku dah lama gak pake theme itu...), Daryl sendiri bilang di threadnya:

"Saya mau sharing sebuah theme baru untuk Prestashop v1.1, theme ini menggunakan 2 kolom. Tampilannya sangat girly karena saya menamakannya dengan nama saya “Darylita” theme. This is my first theme, coming up new themes from me for all of you for free."

Jadi mestinya bisa dipake buat v1.1, Tapi gak tahu juga :-), ato mungkin downloadnya versi file lama, karena emang setahu saya dulu dibuat buat v1.0

coba theme IRIS aja, sama2, dua kolom.

arya pratama · February 27, 2009

aq sndiri sebenare agak bingung..di postnya, mbak Daryl bilang itu buat presta 1.1. tapi ko di judul treadnya tulisannya "Darylita - free theme for pretashop v1.0"..? :roll:

klo boleh tau bang, linknya bwd download theme IRIS dmn ya?
sbenare dah bisa buat 2 kolom sendiri(berkat mas kowoy)..y buat resensi aja..hehe :-P

Prestafreak™ · February 27, 2009

Theme IRIS

contoh lain 2 kolom

Theme Theme Atchworks

search aja di forum ini english...
coba ikuti thread ini

arya pratama · February 28, 2009

makasie bang buat infonya.
tapi ternyata yang IRIS itu udah pernah liat. klo yang Atchworks malah udah pernah donlod..hehehehe
yang Atchworks kasusnya tambah parah, klo pake themes itu layoutnya malah berantakan.. :-S

Prestafreak™ · March 1, 2009

Aku pake dua theme itu, semuanya bekerja baik2 aja, dah aku coba diberbagai browser ie6,7 opera, firefox, kecuali safari, dicoba juga tidak hanya satu komputer, sudah dipake di live site juga, bukan hanya di local installation, memang ada perbedaan tampilan dikit pada atchwork di ie. tapi gak merusak tampilan secara umum... kalo emang bener berantakan... saya harus coba lagi dari komputer lain...

Mas Arya, untuk template atchworknya, waktu install baca readme pdf-nya gak? Kalo gak, emang situsnya bakal berantakan (pasti), soalnya ada beberapa setting yang harus dirubah. Atchwork emang gak bisa langsung dipake tanpa adjustment yang diberikan di pdf installation instructionnnya... (seperti ukuran gambar dll). Kalo sudah dilakukan dengan benar seperti instruksinya... pasti themenya bekerja dengan baik.

Kan lucu juga kalo ternyata orang lain buka web kita, ternyata berantakan isinya... sedangkan kita adminnya gak tahu :-)
Thanks infonya...

arya pratama · March 1, 2009

waduh...Installation.pdf nya pake bahasa alien gtu mas..mana saya ngerti!..hehehehe..
jgn2 masnya juga alien ya?..
walah.. :-)

tapi dengan liat gambarnya bisa ko di pahami dikit2.. ;-)

thakz juga infonya..

Prestafreak™ · March 2, 2009

beeep...beeep.... aliennya pake google translate... hehehe... :-)

arya pratama · March 5, 2009

bang..saya udah coba pake google translate..
tapi...

ko ga ada bahasa alien di translate ke indonesia ya?... :coolsmile:

walah...
tambah kacau nie topiknya..hehehehehe :-)

pratama · March 18, 2009

Biasanya sih untuk ngerubah colom dn menghilangkan sesuai shar saya dengan salah satu temen saya di forum ini yaitu mengotak atik di modul, cms, dn memboyong beberapa css (global.css) ke dw atau notepad dn merubahnya disana ..
dn syukur walopun gak optimal saya udah ngewujutin sesuai dengan keinginan themes yg saya harapkan..

di global.css aja otak atik,, juga kata mas senior tsb .. yaitu di bagian
#page
bla bla ..

tinggal di oprekk ,,

arya pratama · March 18, 2009

betul bang..

klo boleh saran nie om, untuk web balineseproduct.comnya, menurut saya terlalu mepet backgroud putihnya sama panel categories dan information. coba di kasih space putih dikit mungkin lebih ok..hehe ;-)

waduh..
namaQ pasaran iki..hehehe %-P

pratama · March 19, 2009

ok bro...
kita oprek lagi nich,,,
btw pratama kok nama udah pasaran banget ya, wah jd rada gak pde nich,,,

hendrat · May 14, 2009

terima kasih buat jawabannya mas kowoy..
tapi sayang itu bukan yang saya maksud. saya udah coba cara itu, hasilnya column center jadi melebar ke kanan. yang saya inginkan itu seperti www.rumahkristal.com / themesnya mbak daryl, yg ukuran column kiri dan column tengah tetap default namun kedua column ini letaknya center pada browser. seperti ini :

hehehehe.. aduh..cuman mau konfirmasi seh.. aku nggak pake templatenya daryl hehe, daryl malah terinspirasi template itu kali

.. wong duluan rumahkristal.com aka grapebeads.com.
piss.. ya kan ryl? hehehe

daryl · May 14, 2009

Seingat saya normal2 aja (sorry aku dah lama gak pake theme itu...), Daryl sendiri bilang di threadnya:

"Saya mau sharing sebuah theme baru untuk Prestashop v1.1, theme ini menggunakan 2 kolom. Tampilannya sangat girly karena saya menamakannya dengan nama saya “Darylita” theme. This is my first theme, coming up new themes from me for all of you for free." ..

Maaf saya salah ketik yang benar versi 1.0 (tepatnya 1.0.8). Saya sudah buat khusus Versi 1.1 silahkan cari topiknya.

hehehehe.. aduh..cuman mau konfirmasi seh.. aku nggak pake templatenya daryl hehe, daryl malah terinspirasi template itu kali .. wong duluan rumahkristal.com aka grapebeads.com.
piss.. ya kan ryl? hehehe

Ember! (baca:Betul!)

have a nice day

arya pratama · May 14, 2009

Ember juga..wong aq ya udah tau ko dari awal seblum bwd tread ini..aq kan bilang theme yang mirip rumahkristal.com / themenya mbak dryl..

loh..akhirnya muncul juga..kangen mbak..^^

pratama · May 14, 2009

udah gak perlu rebutan sapa yg duluan mengenai themes ini broo.. yg penting semua senang dn berguna bagi member yg membutuhkan .. udah too...

Kowoy · May 26, 2009

ada apa sih? dah berbulan-blan gak nengok nih web jd bingung sendiri.

myusuf · August 10, 2009

Saya suka theme mbak darryl. Tapi sayangnya yang untuk v 1.2 nggak jalan? Adakah seperti mbak Darryl tapi bisa jalan di PrestaDShop 1.2?

oceanserv · August 25, 2009

Mas kowoy,

body {
background-color: black;
background-image: url('../img/background.gif');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #0C0B0C;
text-align:center;
}

saya sudah bisa mengeluarkan gambarnya dan gak jadi sambung2 gambarnya. pertanyaan saya sama dengan kawan kita yang tanya ke mas gimana kalo imagenya bisa ditangah2 ? saya sudah coba masukin kode yang mas kowoy kasih di page 1 thread ini cuma kok gak jalan ya ?

Kowoy · August 26, 2009

mmmm ngejelasin lagi nih jadinya. gpp deh, mumpung lagi senggang.

Sebelum tak kasih full, mohon untuk mempelajari css. cukup ini saja:
- Body

- Div

Itu dulu dipelajari. Nanti paham kapan harus kasih background kapan nggak.

Dari penjelasan saudara, anda pengin memberikan background utama hitam, tapi malah anda pasang gambar. ini yang membuat jadi berantakan.

Membuat halaman utama mempunyai background hitam, background utama itu adalah background seluruh halaman.

body {
   background-color: #000; /* #000 atau #000000 sama juga dengan black */
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

coba liat halaman anda sekarang. ho kok hitam semua? ya it's normal itu artinya it's works. Trus saya mau mau background saya yang gambar itu ada di tengah bagaimana? berikut stepnya. Content utama prestashop itu mengganakan div, yaitu div page. jadi tinggal di ganti saja element-element yang ada div page-nya.

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
   background: #fff url('../img/background.gif') no-repeat center; /* artinya background warna putih ditimpa dengan gambar background dengan posisi di tengah */
}

segini dulu yach, next time dilanjutin.

center 2 column

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment