Thêm vào CSS:

Code:

    .pun-crumbs {display: none;}
    .dc_n {border: 1px solid #ccc;clear: both;width: 1017px;font-style: normalline-height: 37px;overflow: hidden;padding: 0;text-shadow: #fff 0 1px 0;margin: 5px -5px 5px 0;font-size: 0;background: #fff;}
    .dc_n p.n_crumbs {color: #666;font-size: 1.11em;line-height: 1.5;margin: 0;}
    .dc_n .n_crumbs a {-moz-border-radius: 3px 0 0;-webkit-border-top-left-radius: 3px;background: url(http://i72.servimg.com/u/f72/17/19/90/23/second10.png) no-repeat 100% 0;border-radius: 3px 0 0 0;color: #3677e0!important;display: block;float: left;font-size: 11px!important;height: 37px;line-height: 37px;margin-left: -0;outline: none;padding-left: 12px!important;padding-right: 17px;text-decoration: none;}
    .dc_n .n_crumbs a:hover {background-position: 100% -43px;}


Tìm trong overall_header:

Code:

<div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>

thay bằng:

Code:

    <div class="dc_n">
    <p class="n_crumbs">
    <a class="nav" href="/forum">Trang chủ</a>{NAV_CAT_DESC}»</p>
    </div>

Thanh breadcrumb giúp người dùng dễ dàng điều hướng, biết được vị trí trong diễn đàn. Trong phiên bản PunBB thì nó gặp lỗi nhỏ ở các trang phụ, và cũng khó tùy chỉnh giao diện. Hướng dẫn này sẽ dùng Javascript điều chỉnh lại cấu trúc của breadcrumb trong PunBB và thêm CSS để có được giao diện thân thiện hơn.

Hướng dẫn

Trước tiên hãy xóa hết CSS và JS liên quan đến breadcrumb (thanh đường dẫn) mà bạn đã thêm vào, rồi làm theo hướng dẫn sau:

Bước 1

Trong template overall_footer_begin, tìm:

Code:

<div id="pun-foot">

Thêm vào trước đó, code sau:

Code:

<script type="text/javascript">
//<![CDATA[
/* breadcrumb for punbb - devs.forumvi.com */
$(".pun-crumbs").each(function() {
    var $crumbs = $(this);
    $crumbs.find("strong").has("a").replaceWith(function() {
        return this.innerHTML;
    });
    var $items = $crumbs.find(".crumbs").children(),
        $navstrip = $('<ul class="navstrip clearfix"></ul>');
    $crumbs.empty().html($navstrip);
    $items.not(":empty").appendTo($navstrip).wrap("<li></li>");
    $items.first().parent().addClass("begin");
}).html(function() {
    return this.innerHTML.replace(/(»\s|&nbsp\;»&nbsp\;)/g, "");
});
//]]>
</script>

Bước 2

Thêm vào CSS:

Code:

/* breadcrumb for punbb - devs.forumvi.com */
.pun-crumbs{padding:1em 0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#1f537b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}

Thêm vào CSS:

Code:

/* Breadcrumb for Invision - devs.forumvi.com */
#navstrip{background:#fff;margin:20px 0;border:1px solid #2980b9}
table #navstrip{border-left:0 none;border-right:0 none}
#navstrip > li{color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 10px 0 20px}
#navstrip > li.begin{background-color:#2980b9;background-image:none;background-position:center;background-repeat:no-repeat;width:33px;padding-left:4px}
#navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent;width:40px}
#navstrip > li:before,#navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
#navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
#navstrip > li.begin:before{border-left-color:#2980b9}
#navstrip > li:hover{background-color:#333;color:#FFF}
#navstrip > li:hover:before{border-left-color:#333}
#navstrip > li:hover > a{color:#FFF}

Ghi chú:

- Sử dụng cho phiên bản Invision.

- Nếu không thích màu xanh dương thì bạn tìm mã màu #2980b9 và thay lại theo ý thích.