Хаки и Скрипты Next Generation CMS : Интерфейс, Текст и ссылки, Меню и навигация, Bootstrap 4 : Красивое оформление "хлебных крошек" breadcrumbs

irbees2008 Опубликовано - 27 - февраля Интерфейс

Адаптировал: 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>

Вот и все пользуемся.

Можешь почитать и вот эту статейку "Социальный замок"

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

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