navigacja.css
#secondary_navigation{
background: #e0e0e0 url(images/styl/secondary_nav_bg.png) repeat-x 0 0;
border: 1px solid #d6d6d6;
text-shadow: #fff 0px 1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,0.05) 0px 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.05) 0px 1px 2px;
box-shadow: rgba(0,0,0,0.05) 0px 1px 2px;
overflow: hidden;
line-height: 37px;
margin-bottom: 15px;
}
#secondary_navigation a{
color: #757575;
line-height: 37px;
height: 37px;
}
#secondary_navigation a:hover{ color: #222; }
#secondary_navigation #breadcrumb li {
float: left;
}
#secondary_navigation #breadcrumb li a {
padding-left: 12px;
margin-left: -15px;
background: url(images/styl/secondary_nav.png) no-repeat 0 0;
display: block;
outline: none;
text-decoration: none;
}
#secondary_navigation #breadcrumb li.first a{
margin-left: 0;
background: none;
padding-left: 0px;
}
#secondary_navigation #breadcrumb li span{
display: block;
padding-right: 17px;
padding-left: 4px;
background: url(images/styl/secondary_nav.png) no-repeat 100% 0;
}
#secondary_navigation #breadcrumb li > span{ padding-left: 4px; background: none transparent; }
#secondary_navigation #breadcrumb li.first a span{
padding-left: 12px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
}
#secondary_navigation #breadcrumb li a:hover{
background-position: 0 -43px;
}
#secondary_navigation #breadcrumb li a:hover span{
background-position: 100% -43px;
}
#secondary_navigation #breadcrumb li a:active{
background-position: 0 -86px;
}
#secondary_navigation #breadcrumb li a:active span{
background-position: 100% -86px;
}
.breadcrumb {
color: #777;
font-size: 11px;
}
.breadcrumb a { color: #777; }
.breadcrumb li .nav_sep { margin: 0 5px 0 0; }
.breadcrumb li:first-child{ margin-left: 0; }
/*.breadcrumb.top { margin-bottom: 10px; }*/
.breadcrumb.bottom { margin-top: 10px; width: 100%; display: none; }
#secondary_links{ overflow: hidden; }
#secondary_links li{ float: left; margin: 0; }
#secondary_links a{
padding: 0 12px;
display: block;
}
#secondary_links img {
vertical-align: top;
width: 16px;
height: 16px;
position: relative;
margin: 10px -4px 0 -4px;
}
#secondary_links a:hover img { opacity: 0.7; }
nawigacja -> nav:
<div id="secondary_navigation" class="clearfix">
<ol class="breadcrumb top ipsList_inline left" id="breadcrumb">
{$nav}
{$activebit}
</ol>
<ul id='secondary_links' class='ipsList_inline right'>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew" title="New Posty">Wyświetl nową zawartość</a></li>
</ul>
</div>
nav_bit:
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{$navbit['url']}" itemprop="url"><span itemprop="title"> {$navbit['name']}</span></a>
</li>
nav_bit_active:
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">
<span itemprop="title"> {$navbit['name']}</span>
</a>
</li>
Grafike sam załatw. Ostatni raz daję kod z moich szablonów.
I proszę. Nie rób stylów na takiej zasadzie. Bo potem na mojej reputacji też się to odbija.