В этой статье показано - как сделать стандартный шаблон Beez_20 "резиновым". Чтобы независимо от разрешения экрана, сайт занимал всю ширину экрана. Данный способ проверен на Joomla 1.7 и Joomla 2.5
Если используется файловый менеджер хостинг-провайдера или FTP-менеджер, то надо найти файл стилей "наш_сайт\templates\beez_20\css\position.css ". Если же используется Панель управления Joomla, то нужно перейти в Расширения -> Менеджер шаблонов
Справа перечислены все Таблицы стилей шаблона Beez_20. Находим строку Изменить css/position.css и нажимаем на нее. Откроется окно Менеджер шаблонов: Изменить файл .
Здесь мы сможем отредактировать данный файл.
Находим ширину главного div‘a. Она равна 1050px.
#all
{
margin: 0 auto;
max-width: 1050px;
padding: 0px;
text-align: left;
}
Меняем это значение на 100%.
#all
{
margin: 0 auto;
max-width: 100%;
padding: 0px;
text-align: left;
}
Затем в этом же файле находим ширину футера. Она равна 1020px.
#footer-inner
{
max-width: 1020px;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}
Меняем это значение на 100%.
#footer-inner
{
max-width: 100%;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}
Сохраняем файл и заходим на свой сайт - смотрим, что получилось. Для того, чтобы сразу увидеть результат после изменения CSS необходимо, чтобы новые стили браузер заново загрузил. Для этого нажмите Ctrl+R
Последнее что нужно сделать - это откоректировать шапку. После того как сайт растянулся на всю ширину экрана картинка шапки сместилась вправо, а с лева появился синий прямоугольник. Это произошло потому что ширина картинки составляет 1060px. Картинка шапки находится в папке “наш_сайт\templates\beez_20\images\personal\personal2.jpg ”. Можно создать свою картинку большего размера и заменить файл personal2.jpg на свой (имя файла нужно оставить personal2.jpg). Если нет подходящей картинки, то можно отключить вывод картинки в таблице стилей и вся шапка будет синего цвета.
Для отключения картинки нам нужен файл с настройками стилей, который находится по адресу "наш_сайт\templates\beez_20\css\personal.css ". В нем находим:
Logoheader
{
background: #0c1a3e URL(../images/personal/personal2.png) no-repeat bottom right ;
color:#fff;
min-height:200px;
}
Удаляем URL(../images/personal/personal2.png) no-repeat bottom right. Должно получиться следующее:
Logoheader
{
background: #0c1a3e;
color:#fff;
min-height:200px;
margin:0em 10px 0 10px !important;
}
Сохраняем файл. Вот и все.
Прежде чем углубиться в обсуждение конкретно шаблона давайте еще раз попробуем разобраться что же такое шаблон в joomla. В понимании большинства пользователей шаблон отвечает за внешнее оформление страниц вашего сайта. Однако, шаблон это не только дизайн.
В него также входят механизмы определяющие размещение данных, способы и интервалы отображения различных модулей данных, языковые параметры и т.д.
В предыдущих версиях Joomla использовался базовый шаблон Beez. В последних версиях шаблоны построенные на его основе (Beez5, Beez_20) претерпели существенные изменения в сравнении с ним. Создавая шаблон Beez разработчики вкладывали в него возможные варианты приспосабливания под нужны любого владельца сайта. Исходный код шаблона можно было легко изменить. Внесение изменений в каскадные таблицы стилей позволяло с легкостью создать совершенно новый шаблон оформления не затрачивая значительных усилий. Но в процессе работы дизайнеры старались не пользоваться данным шаблоном, а разрабатывали свои собственные с нуля.
В результате были разработаны два совершенно новых шаблона для версии Joomla 2.5. В обоих шаблонах используется язык JavaScript, в шаблоне beez5 используется язык HTML5, в шаблоне beez_20 не требуются переопределения. При верстке нет необходимости использовать таблицы. Были изменены названия классов каскадных таблиц.
Свойства шаблонов
Новые шаблоны стали широко доступны, появилась возможность выбирать местоположение блока навигации на странице, добавлены функциональные метки WAI-ARIA, модули во вкладках могут выводиться в автоматическом режиме, добавлены сворачиваемые позиции для модулей и для колонок, в шаблоне beez_20 встроены две формы оформления: natural и human, добавлена поддержка языка HTML5 в шаблоне beez5.
Ни для кого не секрет что существуют люди, у которых ослаблены возможности восприятия окружающего мира. Кто-то не способен к зрительному восприятию, кто-то ограничен к восприятию звука. Однако эти люди тоже пользуются информационными ресурсами сети Интернет. И все создаваемые интернет-порталы должны быть рассчитаны и на данную категорию пользователей. Шаблоны Joomla обладают всеми необходимыми инструментами для того чтобы обеспечить людей с ограниченными возможностями возможностью пользования сетью Интернет.
При создании шаблонов необходимо придерживаться основных требований: материалы сайта не должны пересекаться с оформлением этих материалов, структура сайта не должна быть перегружена, переходы по страницам сайта должны поддерживаться командами с клавиатуры, цветовое оформление контента должно быть контрастным.
Наиболее важным моментом с точки зрения разработчика является разделение контента от оформления. Для этого необходимо избавиться от табличного оформления материала на странице. При форматировании используется только CSS. Материал необходимо выстраивать линейно сверху вниз.
Семантическое оформление позволяет осуществлять переход между страницами сайта основываясь на заголовках, списках и т.д., а также складывать общее представление о материале документа.
Однако, при линейном оформлении содержимого страницы существует недостаток - чтобы добраться до необходимой информации может понадобиться время (если информация содержится внизу страницы). Для исправления этой проблемы можно использовать закладки HTML для ускорения перемещения по странице. В этом случае предполагается создание дополнительного меню для перемещения по странице. Для тех кто уже знаком со структурой сайта данное меню можно скрывать.
Например:
- Перейти к основному тексту.
- Перейти к основному блоку навигации и войти в систему.
При создании сайта необходимо уделить внимание цветовой гамме в оформлении. Если для обычного пользователя существенной разницы в контрасте цветов не существует, то для людей с ограниченными возможностями контраст имеет особое значение. В этом случае цвета фона и текста должны быть контрастными. Максимальная контрастность возможна в случае черного текста на белом фоне. Но для избежания проблем с оптическими искажениями фон страницы следует слегка окрасить.
Все файлы замещений компоновок размещаются в папке templates/<имя_шаблонa>/html . Так, если шаблон называется my_beautiful_template , то все файлы заме-щений компоновок будут располагаться в папке templates/my_beautiful_template/html . Это означает, что файлы замещений благополучно сохраняются в папке отдельного шаблона. Но такое "благополучное" сохранение возможно лишь в том случае, если ша¬блон не является базовым.
Базовые шаблоны, входящие в состав Joomla, могут быть изменены при переходе к но-вой версии Joomla. И это не вызывает никаких сложностей, если шаблон используется без всяких изменений в его файлах. Но если в шаблоне производятся замены, то в конечном итоге одни его файлы могут быть изменены как старые, а другие добавлены как новые.
Скопируйте папку шаблона в новую папку. С этой целью воспользуйтесь функцией копирования папок на уровне операционной системы, чтобы переместить папку templates/beez_20 (со всеми входящими в нее подпапками и файлами) в новую папку templates/beez_20_copy. Непременно убедитесь в том, что все файлы исходной папки правильно скопированы в целевую папку.
Обезопасить файлы от замены и обновления при переходе к новой версии Joomla совсем не трудно. Для этого достаточно воспользоваться шаблоном, не включенным в основной вариант распространения Joomla. Ради простоты изложения материала в этой книге будет использоваться копия beez_20 сору исходного шаблона beez_20. Получить копию этого шаблона можно двумя способами.
- Создать собственную копию шаблона beez_20_copy, следуя приведенным ниже инструкциям.
- Загрузить архивный файл beez_20_copy.zip с веб-сайта, посвященного этой книге (http://joomlaprogrammingbook.com/downloads.html), а затем про¬извести установку по команде Extension Manager ^Install (Диспетчер расширений1^ Установить).
Сделать копию шаблона относительно легко и даже полезно, чтобы знать, как это во-обще делается. Для этого выполните следующие действия.
2. Измените имена файлов в XML-файле шаблона beez_20_copy. С этой целью от-кройте XML-файл beez_20_copy/templateDetails.xml для редактирова¬ния. Само же редактирование состоит лишь в глобальном поиске и замене текста beez_20 на текст beez_20_copy. Таких замен должно быть три: в элементе паше и двух файлах языковой поддержки в элементах language.
3. Переименуйте файлы языковой поддержки. В данной процедуре имена файлов были изменены в XML-файле. А теперь нужно переименовать их на уровне файловой системы следующим образом:
- en-GB.tpl_beez_20.ini на en-GB.tpl_beez_20_copy.ini
- en-GB.tpl_beez_20.sys. ini на en-GB.tpl_beez_20_copy.sys .ini
Скопируйте оба эти файла из папки templates/beez_20_copy/language/en-GB/ в папку language/en-GB/, вновь воспользовавшись функцией копирования на уровне операционной системы.
5. Найдите и установите копию шаблона в качестве нового расширения. В версии 1.6 внедрено новое замечательное средство обнаружения программных компонентов Joomla - Discover. Оно предоставляет альтернативный способ установки новых расширений. При установке расширения происходит следующее.
- Файлы расширения копируются в нужные папки текущей установки Joomla.
- База данных Joomla обновляется информацией о новом расширении.
С помощью средства обнаружения Discover можно вручную скопировать файлы в папки, а затем дать Joomla команду найти новые расширения. Как только новое расширение будет обнаружено, его можно установить. Благодаря этому в базе данных Joomla создаются правильные записи. Воспользуемся этим средством, чтобы установить новый шаблон. Если перейти по команде Extension Managers Discover (Диспетчер расширений=>Обнаружить) и выбрать пиктограмму Discover на панели инструментов, то Joomla найдет новый шаблон.
Далее шаблон beez_20_copy требуется сделать выбираемым для веб-сайта по умолчанию. Для этого перейдите по команде Extensions=>Template Manager: Styles (Расширения=>Диспетчер шаблонов: Стили), выберите новый шаблон и щелкните на кнопке Make Default (Сделать выбираемым по умолчанию).
И наконец, если требуется, чтобы новый шаблон выглядел как исходный, нужно из¬менить в нем параметры нового стиля таким образом, чтобы привести его в соответствие со старым стилем оформления. Это делается в экранной форме Edit Style (Правка стиля), открываемой щелчком на имени шаблона (в данном случае - beez_20_copy - Default)
Правка стиля оформления нового шаблона
Поля в открывшейся форме устанавливаются следующим образом.
Не все страницы вашего сайта на Joomla могут иметь одинаковый дизайн и выглядеть одинаково. Некоторые сайты имеют радикально различные цветовые схемы и расположение основных блоков для различных разделов сайта. И Joomla позволяет вам делать это.
В этом уроке мы покажем вам, как использовать различные шаблоны или различные стили одного и того же шаблона, для различных разделов вашего сайта на Joomla.
Шаг 1: Общая информация о шаблонах в Joomla
Joomla имеет три основных шаблона предустановленных по умолчанию: Atomic, Beez5 и Beez2.
Эти три шаблона отмечены как "Site" в столбце "Location" и предназначены для публичной части сайта. Шаблоны Bluestork и Hathor помечены как "Administrator" и предназначены только для админки. Вы можете также установить другие шаблоны сторонних разработчиков или разработать или создать свой собственный шаблон.
Один из шаблонов всегда отмечен как используемый по умолчанию для внешнего сайта и один для админки. Чтобы узнать, какой из них используется по умолчанию, найдите золотую звездочку в колонке "По умолчанию", как показано на рисунке ниже:
Вы можете изменить шаблон по умолчанию в любой момент, просто нажав на одну из пустых звездочек, и тогда она станет золотой, а соответствующий шаблон используемым по умолчанию.
При первой установке Joomla по умолчанию устанавливается шаблон Beez2. Если нажать на название шаблона, вы можете редактировать настройки шаблона.
Как вы можете видеть в этом примере, этот шаблон используется по умолчанию для всех страниц и не требует установки его для каждого пункта меню..
Шаг 2. Вывод различных шаблонов на разных страницах
Давайте взглянем на настройки других шаблонов и посмотрим, как назначить его для определенной категории.
- Откройте Менеджер шаблонов
- Отметьте шаблон Beez5.
- Нажмите кнопку Изменить.
- CMS устанавливает различные шаблоны на разных страницах, основываясь исключительно на ссылках меню. Перейдите в раздел "Привязка к меню", и вы можете выбрать, для каких ссылок меню этот шаблон будет использоваться.
- Для пункта "По умолчанию" установлено значение "Нет", потому что у нас уже установлен другой шаблон по умолчанию.
- Отметьте флажок напротив нужного пункта меню.
- Сохраните эту привязку к меню, а затем проверьте ваш сайт.
- После сохранения вы увидите, что у вас есть шаблон Beez_20, установленный по умолчанию.
- А шаблон Beez5 назначен (Assigned) на отдельный пункт меню и обозначен зеленой галочкой.
Вот так главная страница выглядит с шаблоном по умолчанию - Beez2:
Стоит напомнить вам, что изменение шаблона не влияет на содержание. Тем не менее, это изменит заголовок, логотип, оформление и позиции модулей. Это означает, что вы не можете просто сменить шаблон, не проделав некоторую дополнительную работу.
Вам нужно будет изменить логотип для обоих шаблонов и позиции модулей в соответствии с вашей общей структурой сайта.
Шаг 3. Объяснение различных позиций модулей в разных шаблонах
Позиции модулей Beez5 (вверху) и Beez2 (ниже) почти одинаковы, так что это не вызовет больших проблем при изменении дизайна. Однако есть и различия.
Одним из наиболее очевидных различий между двумя шаблонами является позиция модулей вокруг логотипа. В Beez5 модули position-1 и position-0 находятся ниже логотипа:
В Beez 2 модуль position-0 находится над логотипом, а position-1 - ниже:
Это довольно незначительное различие, но хороший пример того, как шаблоны могут отличаться по своим позициям модулей. В данном случае это довольно простой пример, потому что все модули имеют одинаковые имена.
Но что делать, если позиции модулей совершенно разные, в разных местах под разными именами?
- Вернитесь в Менеджер шаблонов и привяжите шаблон Atomic к другой категории.
- Вы увидите, что он имеет совершенно другие позиции модулей, их вы можете посмотреть на картинке ниже:
На этой странице имеются только следующие позиции модулей:
- atomic-topmenu
- atomic-topquote
- atomic-search
- atomic-sidebar
- atomic-bottomleft
- atomic-bottommiddle
Если вы хотите, чтобы этот шаблон был на вашем сайте, в дополнение к Beez2, то вы должны проделать больше работы.
Шаг 4. Добавляем модуль меню для нового шаблона
- Выбираем в меню Расширения > Менеджер модулей и жмем кнопку Создать.
- Выбираем Меню.
- Привязываем новый модуль к позиции atomic-sidebar.
- Новая функция в Joomla 2.5 - поле Примечание. Это поможет вам не запутаться в модулях, при большом их количестве.
- Теперь мы привязываем модуль к определенным страницам.
- Выбираем "Только на выбранных страницах".
- Устанавливаем флажок рядом с пунктом меню, который вам нужен.
- Теперь у меня меню находится в боковой панели. Вы можете видеть, что это горизонтальное меню и места для него там маловато. Мы должны попробовать найти для него лучшую позицию.
- Перейдите в Менеджер модулей и переместите меню в позицию atomic-topmenu. Теперь меню должно выглядеть как на картинке ниже:
Я привел этот пример просто для иллюстрации того, с какого рода проблемами вы можете столкнуться, когда начинаете добавление шаблонов без предварительного исследования.
Вы так же можете использовать копию имеющегося у вас шаблона в качестве темы для альтернативного раздела или страницы. Большим преимуществом является то, что все будет в одном месте, и вам нужно внести только необходимые изменения с CSS и это позволит избежать серьезных переделываний.
Шаг 5. Стили шаблона vs Различные шаблоны
Вместо того, чтобы использовать совершенно разные шаблоны для разных страниц на вашем сайте, можно просто создать различные варианты вашего шаблона по умолчанию. Это новая возможность в Joomla 2.5. Она позволяет создавать различные варианты дизайна на каждой странице без необходимости проходить все шаги, что мы изложили выше.
- Переходим в Менеджер шаблонов.
- Установите флажок рядом с шаблоном, для которого вы хотите создать копию. В данном случае мы будем использовать Beez2.
- Нажмите на иконку "Дублировать".
- Установите флажок рядом с Beez2-Default (2).
- Нажмите кнопку "Изменить".
- Beez2 поставляется с двумя цветовыми схемами, Personal и Nature. Выберите Nature из выпадающего списка.
- Привяжите шаблон к категории в секции "Привязка к меню".
- Обратите внимание, что там есть и другие опции, вы можете изменить также логотип, название сайта, и положение навигации.
- Теперь у вас есть один сайт с двумя разными стилями одного шаблона, привязанными к различным пунктам меню.
- Вы также можете привязывать шаблон при создании пунктов меню.
- Когда вы находитесь в Менеджере меню, можно установить понравившийся вариант шаблона для этого пункта меню (см. ниже).
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
