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

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

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

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

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

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

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

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

Вот как выглядят хлебные крошки по умолчанию в 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 3. Как сделать мультиязычный сайт на 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;
}

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

Читайте также:  Как установить Joomla на локальный сервер

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

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

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

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

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

1 балл2 балла3 балла4 балла5 баллов (6 оценок, среднее: 4,17 из 5)
Загрузка...

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

Система Orphus

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

  • Xplane Авг 28, 2015 в 14:41

    Спасибо за мануал, все получилось. Единственно у меня почему то фраза «Вы здесь» показывается в конце списка, а не в начале. Пока в настройках «Вы здесь» отключил ее. Joomla 3.4

    • Заур Магомедов
      Заур Магомедов Авг 29, 2015 в 11:57

      Эту фразу можно переместить средствами CSS, либо правкой шаблона вывода хлебных крошек.

      • Владимир Фев 23, 2016 в 1:11

        Если можно пожалуйста поподробнее как переместить «Вы здесь».

        • Заур Магомедов
          Заур Магомедов Фев 23, 2016 в 1:12

          Правки нужно сделать в файле шаблона хлебных крошек. В joomla 3.x можно создать переопределение модуля Breadcrumbs в менеджере шаблонов. Об альтернативных макетах Joomla 3 я уже писал здесь. Ну и также не обойдется дело без css.

          • Владимир Фев 24, 2016 в 13:07

            Переместить в начало. У меня как и у «Xplane» фраза «Вы здесь» показывается в конце списка. Пока тоже ее отключил. Работает все прекрасно и спасибо Вам великое, но вот хотелось-бы, чтобы народ знал что это такое и как с ним бороться. Ведь многие люди сидя на сайте и внимания не обращают на Навигатор. Но когда написано «Вы здесь» более привлекает. Вы написали «Эту фразу можно переместить средствами CSS, либо правкой шаблона вывода хлебных крошек.» Пожалуйста подробнее какими средствами CSS и где править шаблон. Я не очень силен в программировании, но до установки Ваших «breadcrumbs» выводилось все нормально. Подскажите пожалуйста где косяк. Joomla 3.4.8

            • Заур Магомедов
              Заур Магомедов Фев 24, 2016 в 13:12

              Надо код смотреть. Покажите сайт.

              • Владимир Фев 24, 2016 в 15:57

                Сайт на локалке. Переношу на хост когда полностью уверен в правельности действий и кода.

  • Сергей Июн 05, 2015 в 16:28

    Полезная статья. Спасибо. Вопрос не совсем по теме, но все же: в настройках крошек все прописано, а они вообще не выводятся? С Джумлой работаю недавно.

    • Заур Магомедов
      Заур Магомедов Июн 05, 2015 в 21:19

      Проверьте в какой модульной позиции вы выводите модуль крошек. Попробуйте перенести в другую позицию, посмотрите выведется или нет.

  • Вячеслав Апр 22, 2015 в 19:33

    Спасибо, все отлично работает!

  • Евгенирй Ноя 14, 2014 в 13:57

    Спасибо за статью. Сначала не получалась. Но внимательно рассмотрев урок, все получилось. В Photoshope отредактировал картинки под свой шаблон и смотрится здорово.

    • Заур Магомедов
      Заур Магомедов Ноя 14, 2014 в 14:16

      Не за что!

  • Алексей Окт 23, 2014 в 12:40

    А для Джумлы 1,5 как сделать?

    • Заур Магомедов
      Заур Магомедов Окт 23, 2014 в 17:51

      В версии joomla особо большой разницы нет. Для 1.5 делается аналогично.

  • Евгения Май 18, 2014 в 21:40

    Огромное спасибо Вам за действительно полезный материал, очень уж по умолчанию хлебные крошки некрасивые.

    • Заур Магомедов
      Заур Магомедов Май 18, 2014 в 21:50

      Спасибо, что понравилось!

  • Анатолий Ноя 29, 2013 в 13:40

    Статья хорошая. И автору спасибо. Но есть ошибки и недоработки.

    • Заур Магомедов
      Заур Магомедов Дек 01, 2013 в 23:47

      Спасибо за отзыв. А что за ошибки?

  • Максим Ноя 21, 2013 в 20:11

    Заур спасибо! очень пригодились Ваши крошки 🙂

    • Заур Магомедов
      Заур Магомедов Ноя 21, 2013 в 21:33

      не за что…

  • Алексей Ноя 08, 2013 в 13:37

    Огромное Вам спасибо. Всё получилось

  • Алексей Ноя 07, 2013 в 19:41

    Помогите пожалуйста с таким вопросом: включил на сайте стандартный модуль «хлебные крошки» но в какую позицию я бы его не поставил информация выводится в столбик а не в строку. А нужно в строку. Joomla 3.1.5. Подскажите как быть

    • Заур Магомедов
      Заур Магомедов Ноя 07, 2013 в 21:56

      Так у вас стили не настроены. Да, в joomla 3.0 хлебные крошки идут ненумерованным списком. Вам надо добавить в ваш файл стилей стили для того, чтобы выставить хлебные крошки по горизонтали.
      Вот примерно следующий код:
      ul.breadcrumb {
      color: #E23E1D;
      font-size: 14px;
      list-style: none outside none;
      margin: 0;
      overflow: hidden;
      padding: 0;
      }
      ul.breadcrumb li {
      float: left;
      }
      ul.breadcrumb li a {
      color: #535252;
      text-decoration: none;
      }

      • Алексей Ноя 07, 2013 в 22:46

        а как файл должен называться? modules.css или искать в папке модуля?

        • Заур Магомедов
          Заур Магомедов Ноя 07, 2013 в 23:32

          Не в папке модуля, а ищите файл в шаблоне вашего сайта. Что то типа style.css или template.css. Воспользуйтесь файрбагом.

      • Алексей Ноя 07, 2013 в 23:31

        В общем вставил этот код и в modules.css и в navigation.css
        но всё по прежнему((

  • Алексей Мар 24, 2013 в 16:38

    Заур, спасибо за очередной урок! Обязательно возьму на вооружение 🙂

    • Заур Магомедов
      Заур Магомедов Мар 24, 2013 в 18:06

      Не за что Алексей. Спасибо Вам…

  • Виктор Мар 23, 2013 в 20:23

    Хорошая статья, буду обязательно применять, так как тема актуальна. Спасибо за ценный урок. Будем ждать и дальнейших уроков.

    • Заур Магомедов
      Заур Магомедов Мар 23, 2013 в 21:23

      Не за что! Спасибо вам! Новые уроки не за горами…

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

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

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

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

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