• 231
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет. Вот нашел довольно интересный вариант оформления breadcrumbs "хлебных крошек" на bootstrap . Смотрятся довольно интересно, и настроить под свой дизайн будет легко, кода минимум.
И так приступим .У нас должны быть подключены стили bootstrap и шрифтовые иконки font-awesome как показанно ниже, подключить можно и из других хранилищ или с вашего сайта:

Код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
Далее стили оформления хлебных крошек, добавляем в файл стилей вашего шаблона:
Код:
.breadcrumb li a:hover{
text-decoration: none;
}
.breadcrumb{
padding: 15px 15px 15px 50px;
margin: 0;
background: #12abb3;
border-radius: 5px;
overflow: hidden;
}
.breadcrumb li{
float: left;
position: relative;
}
.breadcrumb li:first-child{
width: 70px;
height: 70px;
border-radius: 50%;
background: #12abb3;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
transition: all 0.1s ease 0s;
}
.breadcrumb li:hover:first-child{ transform: scale(1.1); }
.breadcrumb li:first-child a{
font-size: 30px;
line-height: 70px;
}
.breadcrumb > li:first-child + li:before{ display: none; }
.breadcrumb li.active,
.breadcrumb li a{
font-size: 14px;
color: #fff;
}
Ну и последнее открываем templates\plugins\breadcrumbs\breadcrumbs.tpl и заменяем содержимое файла на вот это :
Код:
<ol class="breadcrumb" itemscope itemtуpe="http://schema.org/BreadcrumbList">
{% for loc in location %}
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ loc.url }}" ><span class="text-el" itemprop="name">{{ loc.title }}</span></a>
<meta itemprop="position" content="1" />
<span class="divider">/</span>
</li>
{% endfor %}
{% if (location_last) %}
<li class="active" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ news.url.full }}">
<span class="text-el" itemprop="name">{{ location_last }}</span></a>
<meta itemprop="position" content="2" />
</li>
{% endif %}
</ol>
Вот и все пользуемся.

Можешь почитать и вот эту статейку "Следующая модификация плагина basket"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element