Hướng dẫn (tùy vào từng skin mà việc tùy chỉnh sẽ khác nhau)
Đầu tiên các bạn vào: Style Manager -> Main CSS -> Additional CSS Definitions
Thêm đoạn CSS này vào cuối cùng của ô đầu tiên trong Additional CSS Definitions
.breadBoxTop, .breadBoxBottom { padding: 10px 5px; overflow: hidden; zoom: 1; clear: both; } .breadcrumb .crust:first-child a.crumb { padding-left: 20px; border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -khtml-border-top-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -khtml-border-bottom-left-radius: 4px; } .breadcrumb { font-size: 11px; background: #FFFFFF; border: 1px solid #cccccc; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; overflow: hidden; zoom: 1; } .breadcrumb .jumpMenuTrigger { background: transparent; margin: 5px; display: block; float: right; white-space: nowrap; text-indent: 9999px; overflow: hidden; width: 13px; height: 13px; } .breadcrumb .crust { display: block; float: left; position: relative; zoom: 1; } .breadcrumb .crust .arrow { border: 12px solid transparent; border-right: 1px none black; border-left-color: #cccccc; display: block; position: absolute; right: -12px; top: 0px; z-index: 50; width: 0px; height: 0px; } .breadBoxTop { } article, aside, footer, header, hgroup, nav, section { display: block; } .breadcrumb .boardTitle { display: none; } .breadcrumb .crust:hover a.crumb { background-color:#ededed; } .breadcrumb .crust:last-child a.crumb { font-weight: bold; } .breadcrumb .crust a.crumb { text-decoration: none; background-color: #ffffff; padding: 0 10px 0 18px; margin-bottom: -1px; border-bottom: 1px solid #cccccc; outline: 0 none; -moz-outline-style: 0 none; display: block; line-height: 24px; _border-bottom: none; } .breadcrumb .crust:hover .arrow span { border-left-color: #ededed; } .breadcrumb .crust .arrow span { border: 12px solid transparent; border-right: 1px none black; border-left-color: #ffffff; display: block; position: absolute; left: -13px; top: -12px; z-index: 51; white-space: nowrap; overflow: hidden; text-indent: 9999px; width: 0px; height: 0px; } fieldset .breadcrumb { display: block; -webkit-margin-start: 2px; -webkit-margin-end: 2px; -webkit-padding-before: 0.35em; -webkit-padding-start: 0.75em; -webkit-padding-end: 0.75em; -webkit-padding-after: 0.625em; border: 2px groove threedface; border-image: initial; } .breadBoxTop fieldset { margin: 0; padding: 0; }
Sau đó các bạn vào: Edit temp của skin bạn đang dùng -> Navigation / Breadcrumb Templates -> navbar
Tìm đoạn:
Thay bằng:<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
Tiếp theo các bạn vào: Navigation / Breadcrumb Templates -> navbar_link<div class="breadBoxTop">
<nav>
<fieldset class="breadcrumb">
<span class="crumbs">
<span class="crust" itemscope="itemscope" itemtype="index.php">
<a href="index.php" class="crumb" rel="up" itemprop="url"><span itemprop="title">Diễn đàn</span></a>
<span class="arrow"><span></span></span>
</span>
$navbits[breadcrumb]
<if condition="$navbits[lastelement] != ''">
<span class="crumbs">
<span class="crust" itemscope="itemscope" itemtype="">
<a class="crumb" rel="up" itemprop="url"><span itemprop="title">$navbits[lastelement]</span></a>
<span class="arrow"><span></span></span>
</span>
<else />
</if>
</span>
</span>
</fieldset>
</nav>
</div>
Thay toàn bộ code của phần này bằng:
<if condition="$show['breadcrumb']">
<span class="crumbs">
<span class="crust" itemscope="itemscope" itemtype="$nav_url">
<a class="crumb" itemprop="url" href="$nav_url"><span itemprop="title">$nav_title</span></a>
<span class="arrow"><span></span></span>
</span>
<else />
$nav_title
</if>
Nguồn: Camnhan.vn