How to creative a Breadcrumbs bar for phpBB3

Please help to teach me How to create a Breadcrumbs bar for phpBB3 forum.


The original:



The Breadcrumbs bar i need:



Thank you & Regards,

tonetone

@Ange Tuteur I need your help. 

Bump

CSS Stylesheet:

Code:

/* breadcrumbs for phpBB3 */
.topic-actions > .search-box,.pathname-box{margin:0;float:none}
.pathname-box .nav[href=""]{display:none}
.topic-actions > p:not(.right),.pathname-box > p{background:#fff;border:1px solid #A8A8A8;padding:0;margin:20px 0;font-size:0}
.topic-actions > p:after,.pathname-box > p:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.topic-actions > p> a,.pathname-box > p > a{float:left;font-size:12px;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#DDD;padding:0 10px 0 20px}
.topic-actions > p> a:first-child,.pathname-box > p > a:first-child{background:url(http://i18.servimg.com/u/f18/14/64/86/06/home_p11.png) no-repeat center center #2980b9;width:30px;padding-left:4px}
.topic-actions > p> a:first-child > span,.pathname-box > p > a:first-child > span{display:block;text-indent:-9999px}
.topic-actions > p> a:before,.topic-actions > p > a:after,.pathname-box > p > a:before,.pathname-box > p > a:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#DDD;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.topic-actions > p> a:after,.pathname-box > p > a:after{border-left-color:#999;right:-13px;z-index:5}
.topic-actions > p> a:first-child:before,.pathname-box > p > a:first-child:before{border-left-color:#2980b9}
.topic-actions > p> a:hover,.pathname-box > p > a:hover{background-color:#333;color:#FFF}
.topic-actions > p> a:hover:before,.pathname-box > p > a:hover:before{border-left-color:#333}
.topic-actions > p> a:hover > span,.pathname-box > p > a:hover > span{color:#FFF}