Изменение стилей и внешнего вида модуля breadcrumbs – в Joomla 2.5

Итак что мы имеем.  При выборе статьи для  вывода на страницу Joomla 2.5 - видим вот такую не приглядную картину в строке breadcrumbs (строка навигации – «Хлебные крошки») – информация должна выводится в строку, но она выводится блоком:

Ищем  где это можно исправить -  с помощью Mozilla Firefox и Firebug. Оказывается в самом файле стилей, не указано каким образом выводить ссылки в этой строке и вывод   определяется общими настройками шаблона Joomla 2.5. Исправляет это недоразумение, следующим образом:
Это стоит в файле    …\My_site\www\templates\beez_20\css\personal.css
по умолчанию -    a { display:block;}
в результате форматирование строки Breadcrumbs выводится вертикально в столбик и "рвет" весь шаблон страницы.
Для нормального отображения строки - должно быть следующее:
        …\My_site\www\templates\beez_20\css\personal.css
        #breadcrumbs a { display:inline !important;}

И получаем:

   

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

После перевода и правки – статья выглядит следующим образом:

Стилизация модуля Breadscrum - в Joomla 2_5

Один из элементов, который вы не можете стилизировать при проектировании с Artisteer  для  Joomla! -  является модуль Breadcrumbs (горизонтальные стрелки, которые показывают вам, где вы находитесь на сайте ...).
Конечно, "хлебные крошки" отображаются в соответствии с выбранными установками, так что это не выглядит совсем уж плохо ..
- Но часто возникает необходимость в установке индивидуальных стилей. Это один из  стандартных модулей Joomla!.

Наши цели ...

Для этой статьи я приготовил простой Joomla! 2,5 шаблон, с несколькими шаблонными - страницами текста,  а потом при переходах, был выведен модуль «хлебные крошки».
Вы можете увидеть оригинальный внешний вид сайта на скриншоте ниже:

Наша цель заключается в изменении стилей  модуля "Breadscrum" и придания ему большего индивидуального, соответствующего вида.
Давайте начнем ...

Вначале мы хотим посмотрим  на исходник отображаемой странице, уточняю немного ситуацию ...  фрагмент кода, отвечающий за отображение «хлебных крошек» выглядит следующим образом:
<div>
<span>You are here: </span>
<a href="/development/temporary/joomla_2_5/">Home</a>
<img src="/development/temporary/joomla_2_5/media/system/images/arrow.png" alt=""  />
<a href="/development/temporary/joomla_2_5/">Page 1</a>
<img src="/development/temporary/joomla_2_5/media/system/images/arrow.png" alt=""  />
<a href="/development/temporary/joomla_2_5/index.php/ct-horizontal-menu-newpagef3ad/ct-horizontal-menu-newpage79ee">Subpage 1</a>
 <img src="/development/temporary/joomla_2_5/media/system/images/arrow.png" alt=""  />
 <a href="/development/temporary/joomla_2_5/index.php/ct-horizontal-menu-newpagef3ad/ct-horizontal-menu-newpage79ee/ct-horizontal-menu-newpage2922f">New Page 2</a>
 <img src="/development/temporary/joomla_2_5/media/system/images/arrow.png" alt=""  /> <span>New Subpage   1</span>
</div>

Быстрый анализ исходного кода позволяют сделать следующие выводы:
- Breadcrumbs это не список, а только ссылки, следующих друг за другом и разделяющиеся "разделителем в виде изображения»
- разделительное изображение не принадлежат к нашему шаблону - это одно из стандартных Joomla! изображений,  установленных вместе со всей системой.

Неудивительно, что оно выглядит одинаково не зависимо от шаблона! Это стандартная опция в панели управления. Прежде чем мы начнем менять код – давайте проверим, если у нас какие либо  варианты без использования кодирования, в администрации области ...  возможностями, предоставляемыми Joomla! являются:
 

Будем откровенными - из здесь не много... Мы можем только изменить изображений по умолчанию сепаратор  используя  эквивалентный текст ("Text разделитель" поля).

Хорошо, давайте попробуем ввести там "->".
 Мы сохраняем  изменения  и ...

Ну разве - это перемены! -  может сказать Оптимист... Действительно изменения внесены, но результаты не впечатляющие ... Отмените изменения. У нас нет выбора - мы должны кодировать для себя ...

Внутри кода ...
Мы можем изменить код в двух местах:
- Мы можем изменить код стандартного модуля Joomla - Breadcrumbs!
- Или мы можем попытаться сделать изменения в области наших шаблонов.

Если мы выбираем первый вариант - изменения затронет весь Joomla!
- Не важно, какой шаблон установлен. Это не кажется, лучшим решением - мы должны стараться работать в рамках наших  собственных шаблонов, насколько   это возможно.   Мы не повлияем на внешний вид других шаблонов ...  Кроме того, если мы изменим исходный код в Joomla! - Есть риск, что во время   обновления, наша модификация будет   заменена новым оригинальным файлом. Тогда мы должны будем сделать правку  еще раз.

 

Возвращаемся к нашему коду. Мы видим, что весь "Breadscrum" отображается внутри одного элемента DIV, DIV и то  что принадлежит к классу «хлебных  крошек» . Давайте проверим, если у нас что-то в нашем файле таблицы стилей, в нашем шаблоне.: (Joomla-path/templates/breadcrumbs/css/template.css) Хм ... у нас есть что-то ..:

 
.breadcrumbs img {  margin: 0;  padding: 0;  border: none;  outline: none;}

и еще:
.art-breadcrumbs {  margin: 0 auto; }

Как мы видим, Artisteer © не определяет класс «хлебные крошки». Давайте напишем, это определение в конце файла. Просто чтобы проверить, работает ли оно, - мы создаем красный задний фон:
/***** My modifications *****/
.breadcrumbs { background-color: red; }
Сохраните файл, обновите страницу и естественно ... оно работает!
Мы теперь знаем, как изменить фон основного контейнера с «хлебными крошками» (и, конечно же - границы, отступы,  обивки и так далее ...).

Напишем нечто, имеющее немного больше смысла:
/***** My modifications *****/
.breadcrumbs
{
background-color: #ffffff;
border: dotted 1px #44445A;
padding: 10px 5px 10px 5px;
}
В настоящее время у нас есть белый фон, пунктирные границы в цвет букв в заголовке и немного отступов. Это лучше :)

Теперь это временный стиль ссылки в «хлебных крошках» ...
Их вид зависит от класса "путь", который также не входит в наши Artisteer © шаблон. Определение этого класса является более важным, чем просто определение элемента привязки в нашем "beadcrumbs" классе,  поэтому мы должны использовать "!important" параметр. Вы пишете:
 .breadcrumbs a { color: #44445A !important; font-size: 12pt;  }
 и mouse-over еффект (“hover” псевдо - class):
  .breadcrumbs a:hover { color: #0026FF !important; font-size: 12pt; }
 

 

Мы можем видеть, что внешний вид всех ссылок изменилось, кроме последней. Это потому, что последний элемент не является ссылкой, а просто текстом. Для стиля - мы должны включать правильное определение внешних границ класса «хлебные крошки» .
 Вся наши изменения должны выглядеть следующим образом:
 /***** My modifications *****/
.breadcrumbs
{
    background-color: #ffffff;
    border: dotted 1px #44445A;
    padding: 10px 5px 10px 5px;
          color: #44445A;
          font-size: 12pt;
}
 .breadcrumbs a
 {
    color: #44445A !important;
    font-size: 12pt;
 }

  .breadcrumbs a:hover
 {
    color: #0026FF !important;
    font-size: 12pt;
 }
 

 

Внешним элементом является текст "Вы находитесь здесь". Он относится к классу "showHere".
 Давайте сделаем эго "жирным" и запишем этот класс в наш файл:
 .showHere
{
    font-size: 12pt;
    font-weight: bold;
}

Наши «хлебные крошки» должны выглядеть так как на следующем скриншоте:

Осталась последняя часть, чтобы решить проблему, c разделителем изображения. Это то, что мы должны сделать, к сожалению, модифицируя оригинальной Joomla! файлы. Помните, что наша цель это не влиять на другие шаблоны, поэтому мы не можем просто поменять картинку по умолчанию ...
Давайте предположим, что название этой картины будет всегда "separator.png", и что эта картина будет храниться в  "images" папке нашего шаблона. Моя картина выглядит следующим образом:


 
Отредактируйте файл / модули / mod_breadcrumbs / helper.php и посмотрите на
следующий фрагмент кода:

public static function setSeparator($custom = null)
    {
        $lang = JFactory::getLanguage();

        // If a custom separator has not been provided we try to load a template
        // specific one first, and if that is not present we load the default separator
        if ($custom == null) {
            if ($lang->isRTL()){
                $_separator = JHtml::_('image', 'system/arrow_rtl.png', NULL, NULL, true);
            }
            else{
                $_separator = JHtml::_('image', 'system/arrow.png', NULL, NULL, true);
            }
        } else {
            $_separator = htmlspecialchars($custom);
        }

        return $_separator;
    }
    

Это функция, которая возвращает изображение разделителя. Если Adminsitrator сайта набрал что-то  в  поле "Текст разделитель"(в административной области Joomla!) - Возвращает этот текст разделителя. В другом случае - он возвращает изображение по умолчанию. Измените эту функцию следующим образом:
    
     public static function setSeparator($custom = null)
{
$lang = JFactory::getLanguage();
// If a custom separator has not been provided we try to load a template
// specific one first, and if that is not present we load the default separator
if ($custom == null) {
if ($lang->isRTL()){
$_separator = JHtml::_('image', 'system/arrow_rtl.png', NULL, NULL, true);}
            else{
$_separator = JHtml::_('image', 'system/arrow.png', NULL, NULL, true);
    -------------------------------------------------------------------------------------------
    /***** My modification *****/
                 //if a template contain file "breadcrumbsSeparator.png" then use it...
               $getapps= & JFactory::getApplication();
$template = $getapps->getTemplate();
$ourSeparatorFile = JPATH_ROOT.DS.'templates'.DS. $template.DS.'images'.DS.'separator.png';
   if (file_exists($ourSeparatorFile))
{
$app = JFactory::getApplication();
$templateDir = JURI::base() . 'templates/' . $app->getTemplate();
                   $_separator = '<img src="'.$templateDir.'/images/separator.png" alt="Separator" />';
   }
/***** End of my modification *****/
    -----------------------------------------------------------------------------------------------------------
    }
} else {
$_separator = htmlspecialchars($custom);
}

return $_separator;

}

    

С помощью этой новой линии мы достигли следующих функций:
    когда "текст разделитель" поле пустое - функция проверяет, является ли изображение "separator.png" существующим  (в "images" папке текущего шаблона). Если это так - он показывает это изображение в качестве разделителя. Если нет (еще один шаблон без изображения) - он возвращает изображение по умолчанию. Поэтому мы уверены, мы не будем выглядеть плохо в любом другом шаблоне.

    

Заключение
    По сути - мы изменили "Breadscrum" модуль и сделали его выглядящим следующим образом: 

 

Окончательный эффект нашей работы, что также важно - наше решение является нейтральной для других шаблонов.

 

P.S.
1)    Ну и не менее важно то, что в качестве разделителя можно сделать свои оригинальные изображения.
2)   Ссылка на оригинальную статью и автора:    Jakub Sanecki
      http://www.artisteer.fajnyblog.eu/2012/08/03/styling-breadcrumbs-module-in-joomla/
3)  Ссылка на скачивание модифицированного модуля «Breadcrumbs»