Skip to content
Ilya A. Zhulin edited this page Sep 7, 2023 · 15 revisions

Logo SB Template

Спасибо, что используете Simple Blank Template - простой и гибкий шаблон для Joomla на фреймворке Uikit 3. SB Template имеет в основе стандартные функции Joomla и не должен представлять особых проблем в использовании, если Вы знакомы с шаблонами Joomla.

Состав шаблона

--simple_blank
---css
---fonts
---html
---images
---includes
---js
---language
---less
---themes
---vendor
---component.php
---error.php
---index.php
---offline.php
---template_preview.png
---template_thumbnail.png
---template_details.xml
Вся работа с шаблоном должна осуществляться в каталоге /themes/ваша_тема, созданного в настройках шаблона с помощью механизма создания тем. Ваша работа во всех остальных каталогах может перезаписаться при обновлении шаблона.

Позиции шаблона

Просмотр основных позиций шаблона

Основные позиции шаблона представлены на рисунке выше. Можно их использовать без каких-либо дополнительных настроек. Также, есть возможность генерации своих, более сложных и узко направленных позиций с дополнительными опциями (см. Настройки шаблона)

Настройки шаблона

Темы

Для подключение пользовательских стилей, шаблон поддерживает механизм тем. На вкладке "Темы" пользователь видит два поля:

  • Выбрать тему - в этом поле появляются уже созданные темы и можно выбрать ту тему, которая будет использоваться
  • Создать тему - в этом поле надо написать название темы на латинице, такое, которое может использоваться для названия каталогов и файлов вашей темы.

Для создания новой темы требуется написать название темы в поле и нажать кнопку "Создать". После этого поле очистится, а в поле для выбора темы появится название новой темы. Для выбора темы для использования надо выбрать нужную тему и сохранить настройки шаблона. После создания новой темы в каталоге /themes/ будет создан каталог с названием вашей темы и с файлами, дублирующими структуру шаблона, в которых можно вносить изменения, касающихся Вашей темы и которые не будут перезаписаны при обновлении.

Подключение пользовательской favicon

image

Шаблон поддерживает два режима подключения favicon:

  1. Подключение в шаблоне - в этом случае иконка будет единая для всех тем.
  • favicon шаблона по-умолчанию расположены в каталоге шаблона images/template_favicon. Не нужно их заменять или удалять, т.к. они снова восстановятся при обновлении. Шаблон ждёт правильного подключения вашего favicon и автоматически переключится согласно настройкам.
  • файлы своего favicon необходимо поместить в папку images/favicon шаблона. При наличии в этой папке основного файла favicon.ico шаблон автоматически подхватит все файлы, содержащиеся в этом каталоге.
  1. Подключение favicon из темы - в этом режиме для каждой темы шаблона можно задать свой favicon. Также его можно использовать, если хотите, чтобы все файлы темы лежали в одном месте.
  • Расположите файлы в папке images/favicon вашей темы. При наличии в этой папке основного файла favicon.ico шаблон автоматически подхватит все файлы, содержащиеся в этом каталоге.

Если вы хотите прописать подключение favicon самостоятельно, вы можете выбрать в настройках подключение из темы, а папку images/favicon в теме создать пустой. В этом случае шаблон не будет ничего отображать для подключения favicon. Воспользуйтесь head_top.php или head_bottom.php в вашей теме, чтобы прописать в них своё подключение favicon.

Согласно этой статье и по личным наблюдениям, современным браузерам не требуется большое количество favicon в разных размерах и для разных ОС и браузеров. Поэтому в шаблоне убрана поддержка mstitle и Safari mask-icon иконок. Вы можете подключить их отдельно в head-файлах темы. Файлы для android-устройств подключаются через файл манифеста *.webmanifest

Шаблон автоматически подхватывает следующие файлы:

  • файл favicon.ico
  • SVG файлы
  • файлы webmanifest
  • файлы формата favicon-XXxXX.ico, где XX - это размер иконки. Например, favicon_16x16.ico
  • файлы формата apple-touch-icon_XXxXX.png, где XX - это размер иконки. Например, apple-touch-icon_favicon_16x16.png. Также поддерживаются файлы без размеров, например apple-touch-icon.png
  • файлы формата favicon-XXxXX.png, где XX - это размер иконки. Например, favicon_16x16.png. Также поддерживаются файлы без размеров, например favicon.png

Разделители перед размерами в имени файла значения не имеют.

Error Page

Страница ошибок также может быть кастомизирована в теме. Для удобства, в шаблоне есть две страницы ошибок - для ошибки 404 и для остальных ошибок. Таким образом, пользователь может кастомизировать страницу 404 удобным для себя способом - например, расположить на неё ссылки на другие страницы и т.п., а остальные ошибки будут отображать просто номер ошибки. Или, если есть необходимость, также кастомизировать вид всех страниц ошибок в стиле сайта. Скопируйте файлы /includes/error.php и /includes/error404.php в каталог вашей темы и напишите в них необходимый html/php код или сделайте перенаправление на нужный адрес вашего сайта.

Позиции

Существует возможность генерации своих позиций шаблона для каждой секции. Для этого, на соответствующей вкладке настроек существует возможность добавлять неограниченное количество позиций. В каждой позиции вы можете сделать персональные настройки и выбрать секцию, в которой будет отображаться данная позиция. Для компонента Navbar будут работать позиции с суффиксами -left, right и center для правильного отображения модулей в html UIkit. Учтите, что, если вы начали использовать суффиксы, то их надо проставить для всех ваших модулей, иначе разметка может отображать ваши модули неверно.

Предопределённые шаблоны модулей

Dropdown

Шаблон использует заголовок модуля как активатор Dropdown, поэтому заголовок в таком модуле должен быть включён. Содержимое модуля отображается непосредственно в выпадающей панели. В случае, если dropdown активируется от другого элемента, то можно отключить заголовок. В этом случае нужно будет установить как target id выпадающей панели, который задаётся автоматически по шаблону dropdown-content-{id модуля}. ID заголовка при этом задаётся также автоматически по шаблону dropdown-title-{id модуля}.

К заголовку применяются дополнительные классы из настроек модуля. Классы, указанные как суффикс CSS класса модуля, применяются к внешней выпадающей панели dropdown, дополнительно к классу uk-navbar-dropdown. В поле настроек модуля Позиция назначения, не имеющем смысла в данном шаблоне, можно указать дополнительные параметры компонента Dropdown.

При необходимости, к заголовку можно добавить подзаголовок (Navbar Subtitle). Для этого нужно в описании к модулю (module note) прописать тест подзаголовка в тегах *subtitle*. Например *subtitle*Подзаголовок*/subtitle*. В этом случае текст Подзаголовок будет отображён под основным заголовком.