< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Joomla » Стильные хлебные крошки на сайте под управлением Joomla

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

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

Пост был обновлен: Сен 09, 2013

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

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

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

Хлебные крошки на сайте Joomla

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

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

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

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

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

Читайте также:  Как обновить Joomla 2.5 до Joomla 3.x.x?

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

Это необходимо для создания определенных классов блокам для придания нужных им стилей. Вот, например, первому пункту «Главная» нам необходимо добавить класс «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;
}

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

Читайте также:  Как сделать резервную копию сайта на joomla 3? Akeeba backup - резервная копия сайта по шагам в картинках

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

Пост был обновлен: Сен 09, 2013

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 5, средний бал: 4,00 / 5
Загрузка...

Проверка орфографии

Система Orphus

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

  • Роман Сен 26, 2015 в 0:28

    Извиняюсь за флуд, проблема решена. Люди что-бы не было ошибок с данным модулем breadcrumps, отключайте кэширование во вкладке «дополнительные опции»

    • Заур Магомедов
      Заур Магомедов Сен 26, 2015 в 1:20

      Да, такое случается, если включено кеширование в общих настройках сайта.

  • Роман Сен 25, 2015 в 23:32

    Забыл сказать что у меня отредактированный файл router.php который убирает id из ссылок, может в этом причина…

  • Роман Сен 25, 2015 в 23:23

    Здравствуйте Заур. Частенько к Вам заглядываю за советом и что-то поискать. Залил файлы хлебные крошки согласно инструкции на хост, все отображается и работает. Но происходит маленькая беда, порядок действий:
    Жму Главная > Микрозаймы > 24 Финанс (24 финанас начинает отображатся лишь после чистки кэша в джумле) Далее после чистки кэша перехожу просто Главная > Микрозаймы ( Но теперь уже на странице «Микрозаймы» отображается «24 Финанс» чего не должно быть).

    P.S. — В общем в целом отображение происходит после чистки кэша и с ошибками. Что делать?

  • Владимир Сен 16, 2015 в 12:49

    Здравствуйте!
    Заур, спасибо, очень толковая статья!
    Крошки в J3 какие-то не внятные. Хорошо, что есть люди разбирающиеся в вопросе и желающие делиться, спасибо!
    Подскажете?
    Джумла 3.4.3, Beez_20. Крошки в столбик.
    в шаблоне в папке css есть файл template.css но в нём очень мало букав))

    body
    {
            background: #fff;
            color: #000000;
            font-size: 100.1%;
            padding: 0px;
            text-align: center;
    }
    
    body.contentpane {
    		width:auto;
    		margin:10px;
    		text-align: left;
    }
    img { border: 0 none; }
    

    и всё.
    Вставил, пропустив одну строку Ваш код из комента — Заур Магомедов 07/11/2013 в 21:56, ни чего не изменилось.
    В настройках модуля «путь на сайте» пробовал ставить: no, well и другие указанные там стили, не помогло.
    Хотя чуть раньше следуя другим советам уже создал папку mod_breadcrumbs (так как не было такой)
    мой сайт/templates/beez_20/html/mod_breadcrumbs
    и скопировал/перенёс туда файлы default.php и index.html из
    мой сайт/modules/mod_breadcrumbs без добавлений и исправлений, крошки всё так же в столбик.

    • Заур Магомедов
      Заур Магомедов Сен 16, 2015 в 12:53

      Значит не в тот файл стилей вставили. Нужен рабочий файл стилей. Проинспектируйте Firebug’ом или встроенным инспектором кода и определите главный файл css. Вообще зачем вы стандартную тему используете, после первого обновления у вас все файлы затрутся.

      • Владимир Сен 16, 2015 в 13:35

        Вроде нашёл, layout.css в этот файл вставил и поиск стал в линию, только пока просто текст… Со стилями попробую разобраться.
        На счёт стандартной темы не понял, создать копию этого шаблона и переименовать его, чтоб не затирался??

        • Заур Магомедов
          Заур Магомедов Сен 16, 2015 в 14:28

          На счёт стандартной темы не понял, создать копию этого шаблона и переименовать его, чтоб не затирался??

          Совершенно верно.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]