Styling Breadcrumb

[prestanesia]

Pengen ganti breadcumb bawaan prestashop dengan style breadcrumb yang mirip2 punya-nya website apple disini :

http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

diaplikasikan di Prestashop ternyata tidak sulit, gini caranya :

1. Di folder theme yang Anda pake, backup dulu breadcrumb.tpl
2. Buka breadcrumb.tpl dan isi dengan text dibawah ini*

>
<!-- Breadcrumb -->
{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}
</pre>
<ul>

{$path}
</ul>
<br><div> </div>
<br><!-- /Breadcrumb --&gt

3. Paste kode CSS dibawah ini kedalam css\global.css.*

/* Breadcrumb */
#breadcrumb {
   font: 11px Arial, Helvetica, sans-serif;
   background-image:url('../img/bc_bg.gif'); 
   background-repeat:repeat-x;
   height:30px;
   line-height:30px;
   color:#888;
   border:solid 1px #cacaca;
   overflow:hidden;
   margin:0px;
   padding:0px;
}
#breadcrumb li {
   list-style-type:none;
   padding-left:10px;
   display:inline-block;
   float:left;
}
#breadcrumb a {
   display:inline-block;
   background-image:url('../img/bc_separator.gif'); 
   background-repeat:no-repeat; 
   background-position:right;
   padding-right: 15px;
   text-decoration: none;
   color:#333333;
   outline:none;
}
.home {border:none;margin: 7px 0px;}
#breadcrumb a:hover {color:#35acc5;}

4. extract background.zip dan copy 2 file image yang ada ke folder img.
UPDATE 5. Masuk ke menu Preferences - Appearance , isi Navigation page dengan satu spasi

* folder img dan css diatas itu yg ada di folder theme yang sedang Anda pake.

Itu doang. Hasilnya bisa dilihat di result.jpg

catatan : belum dicoba jika breadcrumb nya lebih dari 2 level, tapi kalopun ada kekurangan di layout tinggal modif breadcrumb.tpl tadi.

Cheers.

[Ardian Yuli Setyanto]

wah, sip dah. dah ada yg nyoba untuk beberapa level kategori ?

[wallacept]

not working!

[prestanesia]

Sure it works. For demo, please check http://shop.afasyah.web.id/music-ipods/7-ipod-touch.html

Cheers!

[Ardian Yuli Setyanto]

maksudnya untuk sublevel kategori apakah tampilannya masih normal ataukah tidak, jadi kalau dibawah Ipods dibuat subkategori baru, maka kalau subkategori tersebut di klik, breadcrumb akan menampilkan kategori,subkategori, dan product dengan baik.
Maaf belum sempat coba.

[prestanesia]

Barusan cek, kalo pake defaultnya paling dalem kyknya 3 level. g ada masalah kecuali image yg rada kebawah itu. Lagi dicek. (kasus image yg nyasar kebawah kalo pake default theme presta).

[prestanesia]

humm, ga ketemu akhirnya si icon home diilangin aja ...

Untuk 4 level dst sepertinya jalan ga masalah, cek attachment.

demo : http://shop.afasyah.web.id/accessories-ipod/9-ecouteurs-a-isolation-sonore-shure-se210-blanc.html

Perubahan :

breadcrumb.tpl

>
<!-- Breadcrumb -->
{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}
</pre>
<ul>
{l s='Home'}
{$path}
</ul>
<br><div> </div>
<br><!-- /Breadcrumb --&gt

global.css

/* Breadcrumb */
#breadcrumb {
   font: 11px Arial, Helvetica, sans-serif;
   background-image:url('../img/bc_bg.gif'); 
   background-repeat:repeat-x;
   height:30px;
   line-height:30px;
   color:#888;
   border:solid 1px #cacaca;
   overflow:hidden;
   margin:0px;
   padding:0px;
}
#breadcrumb li {
   list-style-type:none;
   padding-left:10px;
   display:inline-block;
   float:left;
}
#breadcrumb a {
   display:inline-block;
   background-image:url('../img/bc_separator.gif'); 
   background-repeat:no-repeat; 
   background-position:right;
   padding-right: 15px;
   text-decoration: none;
   color:#333333;
   outline:none;
}
#breadcrumb a:hover {color:#35acc5;}

[kik-off]

Thanks danni

[wallacept]

kik-off you style is cool. where you find?

[dwiputras]

work well. thanx br

http://prumpungonline.com

[jeffreywinmart™]

Bro kenapa background bc_bg.gif gak bisa tampil ya..
padahal background bc_separator.gif bisa tampil.
coba cek deh ke sini

[ipz elhakim]

thanks broo...

[ipz elhakim]

@ bang tobi :: setelah di gunakan,, bru nyadar ko ada yg aneh,, kalo di web saya tampil nya ko cma sampe level 2 aja ya,,
misalnya 'Home > Accesoris' , ga bisa smpe level 3 dan strusnya,,misal 'Home > Accesoris > Mouse' kira2 knpa y bang???

plisss help... (siapapun yg udh tau..)