Search found 3 matches for breadcrumb

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}

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.

---

Tags: #css #invision #breadcrumb

Code:

/* breadcrumb 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}

---

Tags: #css #phpbb3 #breadcrumb

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}

Tác giả

@Zzbaivong

---

Tags: #punbb #breadcrumb #mod #tutorial