Jump to content
Sign in to follow this  
prestanesia

Styling Breadcrumb

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

13297_jglQcm0q3Y7Gcod65DOk_t

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

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;}

Share this post


Link to post
Share on other sites

@ 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..) :)

Share this post


Link to post
Share on other sites
Sign in to follow this  

×

Important Information

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