Стильные хлебные крошки на сайте под управлением Joomla

Здравствуй дорогой друг! Спасибо, что посетили мой скромный ресурс, посвященный созданию сайта и заработка на нем. В данной заметке я хотел бы затронуть такую тему, как путь на сайте или как его еще называют хлебные крошки. Я надеюсь все знают, что это такое?

Хлебные крошки, на мой взгляд, это очень важный элемент, повышающий юзабилити (удобство) сайта. Более того, хлебные крошки положительно влияют на сео-оптимизацию сайта. Поэтому я предлагаю уделить им некоторое внимание, чтобы это было не только удобно, но и красиво.

Вот как выглядят хлебные крошки по умолчанию в Joomla 2.5.

А вот к какому ввиду можно привести путь на сайте после некоторых манипуляций с шаблоном хлебных крошек и стилями css.

Думаю многие согласятся, что второй вариант смотрится более красивее. Но, здесь как говорится, на любителя. Итак, если вам понравилось и вы захотели видеть у себя на сайте вот такое оформление хлебных крошек, то давайте приступим.

Для начала скачайте исходники файлов.

Первое, что нам необходимо будет сделать это подправить файл шаблона хлебных крошек — default.php. Лежит он по следующему адресу — /modules/mod_breadcrumbs/tmpl/default.php. Но вносить изменения прямо в данный файл будет не совсем правильно, т.к. при первом же обновлении все наши изменения затрутся. Поэтому мы будем переопределять вывод. Как это делается? Мы поместим файл default.php в наш шаблон, чтобы все сделанные изменения сохранились. Путь выглядеть будет так — /templates/ваш шаблон/html/mod_breadcrumbs/default.php. Т.е. в вашем шаблоне вы создаете каталог «html», внутри него создаете каталог «mod_breadcrumbs» и в данный каталог помещаете файл default.php. Вот такой вот подход позволяет сохранить нам все правки в файлах при обновлениях, а joomla ведь обновляется часто.

Зачем вообще вносить правки в файл шаблона?

Это необходимо для создания определенных классов блокам для придания нужных им стилей. Вот, например, первому пункту «Главная» нам необходимо добавить класс «first», а последнему класс «last». Промежуточному пункту класс не присваивается. По умолчанию в хлебных крошках практически никаких классов нет. Мы же добавим не только классы, но и выведем наши хлебные крошки в виде ненумерованного списка. Чем то напоминает горизонтальное меню. Ну а далее дело обстоит за стилями css.

[ad#728x90-middle]

В исходниках я прикладываю файл default.php, уже измененный мной. Его просто необходимо залить в данную директорию — /templates/ваш шаблон/html/mod_breadcrumbs/. Все картинки добавляем в папку «images» вашего шаблона — /templates/ваш шаблон/images/. Следующее, что необходимо сделать это добавить в ваш файл стилей следующий код ниже. Обратите внимание — пути картинок должны быть правильными. У меня файл стилей лежит в каталоге «css», поэтому пути до картинок имеют такой вот адрес.

 /**************************** Хлебные крошки */
.breadcrumbs {
    background: none repeat scroll 0 0 #F5F6F1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    margin:10px 0;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
}
.breadcrumbs ul {
    margin:0;
    padding:0;
    list-style:none;
}
.breadcrumbs ul li {
    background: url("../images/bc-bgt.png") repeat-x scroll 0 0 transparent;
    display: block;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.breadcrumbs ul li a {
    background: url("../images/bcbg.png") no-repeat scroll 0 0 transparent;
    color: #565656;
    display: block;
    margin: 0;
    padding: 0 10px 0 20px;
}
.breadcrumbs ul li.first a {
    background:none;    
    padding: 0 0 0 10px;
}
.breadcrumbs ul li.first a.pathway {padding:0 8px 0 10px}
.breadcrumbs ul li.first a span.first {
    display:block;
    background:url(../images/bcbg-first.png) right center no-repeat #CECBBA;
    padding:0 15px 0 0
}
.breadcrumbs ul li a {
    background: url("../images/bcbg.png") no-repeat scroll 0 0 transparent;
    color: #565656;
    display: block;
    margin: 0;
    padding: 0 8px 0 20px;
}
.breadcrumbs ul li.last {
    background: url("../images/bc-bgta.png") repeat-x scroll 0 0 transparent;
}
.breadcrumbs ul li {
    background: url("../images/bc-bgt.png") repeat-x scroll 0 0 transparent;
    display: block;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.breadcrumbs ul li.last .inner {
    background: url("../images/bc-bgla.png") no-repeat scroll 0 0 transparent;
    display: block;
}

.breadcrumbs ul li.last .inner span {
    background: url("../images/bc-bgra.png") no-repeat scroll right 0 transparent;
    color: #FFFFFF;
    display: block;
    padding: 0 10px 0 20px;
}

Вот в принципе и все, что необходимы было сделать. Конечно, вы можете цветовую гамму поменять на свое усмотрение. Только для этого вам придется нарезать картинки таких же размеров.

Ну а на этом все. Если что непонятно спрашивайте в комментариях. Всем пока!!!