Jump to content

how make this breadcrumb?


Recommended Posts

  • 5 months later...

of course its possible, i have modified the breadcrumb myself (refer to this thread (in Bahasa): http://www.prestashop.com/forums/viewthread/31643/pengembangan_dan_modul/styling_breadcrumb) but i'm using the style from this site:

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

here's how ..

In your theme folder:

1. backup breadcrumb.tpl
2. open breadcrumb.tpl and paste following code

>
<!-- 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 the CSSbelow to 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. download and extract background.zip and copy the image files to img folder (download the file from above thread).


cheers.

  • Like 1
Link to comment
Share on other sites

×
×
  • Create New...