Документация IPS4

Режим дизайнера в Invision Community

В Invision Community разработчиками реализована функция под названием Режим дизайнера. Она позволяет упростить создание новых и редактирование уже существующих тем для вашего сайта. Для его активации необходимо перейти по пути админцентр > Кастомизация > Темы и нажмите на кнопку 'Режим дизайнера'. После включения режима, система создаст папки с файлами установленных тем в папку /themes, которая будет создана в корне сайта. Название папки темы будет соответствовать её ID:
themes/
-1/ -- css/ -- images/ -- templates/ -2/ -- css/ -- images/ и так далее.
В папку css будут записаны все css стили (админцентра в том числе), изображения будут в папке images, и шаблоны (файлы с расширением .phtml) в папке templates.
Таким образом, вы можете редактировать файлы напрямую, используя любимый редактор css/html файлов, а так же добавлять любые изображения в папку images.
После завершения редактирования темы, необходимо обратно переключить кнопку 'Режим дизайнера', чтобы применить все изменения и записать их в базу данных.
Введение в темы

Тема представляет собой пакет, изменяющий то, как выглядит Invision Community. По умолчанию, IPS4 имеет тему в синих тонах, с темами мы можете полностью изменить отображение, включая цвета, шрифты, изображения и много другое. Вы можете ограничиться лишь вашим воображением!
Прежде всего, темы являются отличным способом сохранить ваш брендинг основного сайта и вашего сообщества.
Где взять темы?
Темы могут быть взяты из нескольких источников, включая:
Платные или бесплатные темы в Marketplace на сайте разработчика. Создать собственную тему с помощью Простого редактора тем. Создать собственную с помощью полностью ручного редактора (для продвинутых пользователей). Некоторые дизайнеры имеют собственные сайта, на которых вы можете скачать/приобрести тему. Вы можете нанять дизайнера для создания темы специально для вашего сообщества. Найти дизайнера. Вы можете опубликовать задачу на разработку дизайна в нашем специальном разделе - Freelance. Несколько тем
Хотя многие сообщества имеют одну тему, соответствующую их брендингу, вы можете установить несколько тем и позволить вашим пользователяем выбирать тему самостоятельно. Вы можете выбрать вашу основную тему как тему по умолчанию, и пользователи могут выбрать любые другие темы с помощью селектора тем в нижней части страницы. Вы даже можете ограничить доступ к определённым темам для определённых групп, таким образом позволить выбирать "премиум темы" для пользователей, оплативших эту возможность, например.
Установка новой темы

Если вы скачали бесплатную или купили где-либо тему для Invision Community 4, вам нужно её установить для дальнейшего использования.
Большинство тем состоит из одного .xml файла. Если тема более сложная и имеет другие файлы, следуйте инструкциям разработчика темы.
В админцентре перейдите на страницу Кастомизация > Внешний вид > Темы. Нажмите кнопку "Добавить тему", и перейдите на вкладку "Загрузить тему". Укажите .xml файл вашей темы с компьютера.
Установка темы в Invision Community 4

Нажмите кнопку Далее и через несколько секунд Invision Community завершит установку вашей темы и перенаправит вас к списку тем. Ваша тема установлена и готова к использованию.
Установка темы по умолчанию

Тема по умолчанию это тема, которую будут видеть гости и пользователи вашего сообщества, которые не выбрали тему специально. Любая из установленных тем может быть темой по умолчанию. Чтобы установить тему по умолчанию, перейдите на странице Кастомизация > Внешний вид > Темы и нажмите кнопку "Изменить", расположенную справа от темы:
Настройка темы

На вкладке Общее формы изменения, активируйте настройку "Стандартная тема для пользовательской части?" и сохраните настройки. Стоит также заметить, что вы можете эту же тему сделать стандартной для админцентра, если это необходимо.
Изменение стандартной темы не повлияет на пользователей, которые специально для себя уже выбрали тему. Чтобы изменить тему для всех, прочитайте инструкцию: .
Сброс выбранной пользователем темы

В некоторых случаях вы можете захотеть переопределить тему для пользователей, выбравших себе тему (например, когда вы установили новую стандартную тему). Invision Community позволяет вам сделать это легко и просто.
Перейдите на страницу Кастомизация > Внешний вид > Темы вашего админцентра, нажмите на стрелку выпадающего меню, расположенную справа от названия темы. Выберите пункт меню "Сделать тему пользовательской":
Пункт в меню Сделать тему пользовательской

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

Для большинства администраторов создание темы с помощью Простого редактора будет предпочтительным вариантом. Он позволяет изменить стандартную тему с помощью метода «укажи и щелкни» и увидеть изменения в режиме реального времени, при это не требует никаких знаний программирования.
Создание темы
Для создания темы, перейдите на странице Кастомизация > Внешний вид > Темы. Нажмите кнопку "Добавить тему". Во всплывающем окне выберите опцию Простой режим и нажмите Далее.
На следующем экране вы сможете произвести некоторые настройки вашей новой темы:
Имя (обязательно)
Будет отображено пользователям вашего сайта Родитель
Вы можете сделать эту тему дочерней по отношению к другой, то есть она будет наследовать любые изменения в шаблонах/стилях от родительской темы. Стандартная тема на сайте?
Делает эту тему стандартной для гостей и пользователей, которые не изменили себе тему. Доступна для
Устанавливает права доступа для групп, на использование этой темы. Например, тема может быть доступна только для "премиум" пользователей как дополнительно оплачивая возможность. Стандартная тема для админцентра?
Вы можете отдельно создать тему для админцентра и установить её для использования только в админцентре. Нажмите кнопку Сохранить поле настройки необходимых параметров. Ваша тема будет создана и вы будете перемещены к списку тем.
Запуск редактора Easy Mode
Со страницы списка тем в вашем админцентре, вы можете нажать на кнопку волшебной палочки справа от названия темы для запуска визуального редактора (вы должны быть авторизованы на сайте, для его запуска):
Кнопка редактирования темы в редакторе Easy Mode

Обратите внимание: вы можете запустить визуальный редактор в любое время, даже через некоторое время после создания темы. Однако, если вы преобразовали Easy Mode в нормальную тему, вы больше не сможете запустить визуальный редактор.
Запуска визуального редактора переместить вас на главную страницу вашего сообщества в режиме редактирования. Ваше сообщество будет отображено слева, а инструменты редактирования в блоке справа:
Боковой блок справа, позволяющий редактировать цвета сайта

Визуальный редактор имеет несколько ключевых функций при создании вашей темы. Мы рассмотрим их ниже.
1. Раскрасить
Этот инструмент позволяет вам мгновенно изменить основные цвета темы. Нажмите кнопку Раскрасить и вы увидите четыре палитры:
Раскрашиватель основных цветов

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

Инструмент Раскрашиватель отлично отлично подходит для первого шага кастомизации темы - если вы знаете, что хотите тему в зелёных тонах (например), вы можете изменить основные цвета темы, о оставшиеся цвета и элементы откорректировать с помощью других инструментов.
Если вам не нравится результат, вы можете нажать кнопку "Вернуть", чтобы отменить изменения.
2. Инструмент выбора
Данный инструмент позволяет вам с помощью метода «укажи и щелкни» выбрать области на ваше сайте, и визуальный редактор автоматически покажет вам редактор цветов данной области.
Выбор области для редактирования цветов

3. Пользовательский CSS
Если вы знакомы с CSS, редактор Easy Mode позволяет вам добавить собственный CSS код в вашу тему без необходимости преобразования её в полностью вручную редактируемую тему. Просто нажмите на кнопку CSS, и вам откроется редактор кода. И да, код будет применять в режиме реального времени!
4. Редактор стилей
Доступные для изменения стили перечислены в главной панели. Нажмите на один из них просмотреть и изменить цвета элемента. Некоторые стили позволяют редактировать только фон, другие могут позволить изменить цвет шрифта.
Выбор основного цвета

Цвет фона может быть градиентом, для этого нажмите соответствующую кнопку, рядом с выбором цвета. Чтобы использовать градиент, для начала укажите его направление, а затем добавьте необходимые цвета для его формирования.
Переключение в режим градиента

5. Построение
Вкладка Построить предназначена для завершения построения своей темы и сохранения всех внесённых изменений. Нажмите кнопку Сохранить.
Изменение логотипа, фавиконки и логотипа для соц. сетей

Темы в Invision Community предлагают простой способ изменения трёх ключевых изображений, используемых этим программным обеспечением - логотипа сайта, фавиконки и изображения для социальных сетей. Разберём как их изменить на свой:
Логотип
Изображение логотипа отображается сверху на каждой странице вашего сообщества. Фавиконка
Маленькое изображение, отображающееся на вкладке браузера пользователя, а также в рядом с закладкой в браузере. Логотип для социальных сетей
Социальные сети обычно прикепляют это изображение к записи, которой пользователь делится с помощью кнопок "Поделиться в социальных сетях". Обычно это укрупнённое изображение вашего логотипа. Для того, чтобы изменить эти базовые изображения, измените настройки вашей темы, для этого перейдите на страницу вашего админцентра Кастомизация > Внешний вид > Темы и нажмите кнопку Изменить:
Кнопка изменения настроек темы

На вкладке Логотипы, вы увидите три поля для загрузки, куда вы можете перетащить ваши изображения. Затем сохраните изменения.
Обратите внимание: Изображение фавиконки должны иметь расширение .ico, не обычное стандартное изображение. А также оно должно быть небольшим и отображается в браузерах в размерах 16 пикселей на 16 пикселей. Вы можете воспользоваться онлайн инструментами для создания собственного изображения фавиконки.
Экспорт темы

Если вы создали тему и хотите поделиться с другими или сохранить для резервной копии, Invision Community позволяет с лёгкостью скачать её. Чтобы сделать это, перейдите на страницу Кастомизация > Внешний вид > Темы вашего админцентра и нажмите на иконку впадающего меню, расположенную справа от названия темы, которую вы хотите экспортировать. Нажмите пункт в меню "Скачать" и через несколько секунд начнётся загрузка .xml файла темы.
Кнопка скачивания темы в IPS4

Этот специальный файл содержит в себе всё необходимое для установки темы в другом сообществе, включая все изображения.
Из чего состоит тема

Тема в Invision Community позволяет практически безгранично визуально кастомизировать программное обеспечение. Темы в основном используются для придания сообществу общий брендинг с основным сайтом или стилем компании, но многие сообщества позволяют своим пользователям выбирать тему по своему вкусу.
Тема состоит из следующих частей:
Шаблоны
Шаблоны визуализируют HTML код в дизайн. Они состоят из простого HTML кода, HTML логики и переменных PHP, а также специальных тегов плагинов. CSS стили
Стандартные CSS файлы, стилизующие страницу. Ресурсы
Обычно изображения, хотя могут быть и другие типы ресурсов. Настройки темы
Специальные предварительно установленные настройки, которые вы можете сами создать для вашей темы. Invision Community позволяет с помощью тем настраивать все перечисленные выше элементы, и предоставляет все необходимые инструменты для этого.
Примечание: Вообще, кастомизация тем с помощью этих расширенных параметров, предполагает знания HTML, CSS и в некоторых случаях Javascript. Внесение изменений без полного понимая последствий может привести к проблемам на ваше сайте. Рассмотрите возможность использования других инструментов редактирования темы, например Создание темы с помощью Easy Mode.
Изменение тем
Существует два основных способа изменения темы, каждый из которых мы рассмотрим в отдельной инструкции.
Template editor
Админцентр предоставляет интерфейсы для редактирования каждого типа ресурсов темы. Режим дизайнера
Специальный режим, который экспортирует тему в файлы на диск, что позволяет редактировать тему с помощью привычных сред разработки.
Редактор шаблонов

Стандартным способом редактирования темы является использование инструмент редактирования шаблонов, который доступен в вашем админцентре. Он обеспечивает лёгкий доступ к шаблонам и CSS стилям и не требует каких-либо специальных настроек.
Для начала редактирования темы, перейдите на страницу Кастомизация > Внешний вид > Темы и нажмите на иконку кода справа от темы, которую хотите изменить.
Если тема, которую вы хотите изменить, изначально создана с помощью Простого редактора, иконка кода будет расположена в выпадающем меню.
Кнопка редактирования шаблонов темы

После этого вы увидите следующее:
Редактор кода шаблонов и CSS файлов

1. Список файлов
Боковая панель содержит список доступных шаблонов/CSS файлов в данной теме. В списке тем шаблоны сперва сгруппированы по их приложению, затем по front/global, и, наконец, по области применения.
front - используется в публичной части сайта; global - используется как в публичной части, так и в админцентре. Четыре различные иконки могут отображаться справа у каждого элемента в списке, обозначающие статус элемента:
M - Этот файл был изменён в предыдущей версии Invision Community и может быть устаревшим. M - Этот файл был изменен в текущей версии the Invision Community. I - Этот файл наследуется от родительской темы. Изменения в файле родительской темой будут отражены применены и здесь. C - Этот файл является уникальным для данной теме (т.е. он был добавлен вручную). Вы можете переключаться между шаблонами и CSS файлами с помощью вкладок, расположенных сверху списка элементов. Оба типа файлов могут быть одновременно открыты в редакторе.
2. Редактор
Основное окно редактирования может иметь вкладки, сам редактор подсвечивает синтаксис кода и позволяет вам редактировать код шаблонов и CSS файлы одновременно. Откройте вкладку, кликнув на файл в боковом блоке; закройте вкладку, нажав на X на вкладке.
Если файл содержит несохранённые изменения, вместо X во вкладке будет отображена жирная точка, напоминающая вам об этом.
3. Поиск
Легко найти любой шаблон или CSS файл с помощью данной формы поиска. Эта форма производит поиск по названию шаблона и его содержимому.
4. Вернуть
Если текущий выбранный файл имеет сохранённые изменения (то есть она отличается от этого же шаблона в стандартной теме), кнопка Вернуть будет доступной для нажатия на неё. Клик по ней вернёт данный файл в исходное состояние - любые изменения в нём будут удалены. Это может быть полезно после обновления, когда данный файл может стать устаревшим. В подобных ситуациях лучшим выходом будет возврат файла в исходное состояние и повторное применение внесённых ранее изменений.
5. Переменные
Большинство шаблонов имеют переменные, передаваемые в них серверным кодом; эти переменные часто используются для отображения необходимых данных или контроля отображения в в зависимости от обстоятельств.
Нажав на кнопку Переменные, вы увидите всплывающее окно со списком переменных, используемых в данном шаблоне, таким образом вы можете знать, какие данные передаются в шаблон.
Не следует добавлять, изменять или удалять переменные из всплывающего окна, если вы не разрабатываете приложение и знаете что делаете. Изменение переменных здесь приведет к ошибкам, потому что это больше не будет соответствовать тому, что сервер передаёт в движок шаблона.
6. Настройки редактора
Настройки редактора представляет из себя выпадающее меню, содержащее несколько опций, которые влияют на поведение редактора. Вы можете настроить их в соответствии с вашим собственным вкусом.
7. Новый файл
Кнопка "Новый" позволяет вам добавить собственный HTML шаблон и CSS файл в тему. Это отличный способ, чтобы держать ваши изменения изолированными от стандартных шаблонов/css файлов, что позволяет легче переносить обновление сайта, об этом мы поговорим в другой инструкции.
Использование Режима дизайнера

В то время, как стандартный редактор шаблонов полезен для небольшого редактирования, для более больших и комплексных изменений, редактирование с использованием привычных программных средств (IDE) является более предпочтительным. Invision Community позволяет это сделать с помощью Режима дизайнера.
Что такое Режим дизайнера?
Режим дизайнера позволяет вам использовать привычную среду разработки путём экспорта всех шаблонов и CSS файлов на диск в качестве отдельных файлов, а затем повторного импорта файлов обратно, когда вы закончите разработку.
При активном Режиме дизайнера, программное обеспечение позволит менять файлы шаблонов и CSS стилей и видеть изменения в режиме реального времени.
Режим дизайнера не должен использоваться на живом сообществе, т.к. будет сообщество будет иметь некоторые последствия использования ресурсов. Мы всегда рекомендуем производить разработку тем в Режиме дизайнера на тестовых установках.
Включение Режима дизайнера
Первый шаг активации - создать директорию под названием "themes" в корневой директории вашего сообщества (там же, где расположен ваш файл conf_global.php). Установите CHMOD для директории 777.
Далее, перейдите на страницу вашего админцентра Кастомизация > Внешний вид > Темы. В верхней части страницы нажмите на кнопку Режим дизайнера. Переключите настройку после прочтения информационного сообщения и сохраните изменения. IPS4 начнёт запись файлов темы на диск.
После завершения, вы увидите структуру директорий, подобную этой в директории /themes на вашем сервере:
Список файлов тем на диске

Все установленные темы экспортируются при включённом Режиме дизайнера; родительская директория в этой структуре носит название ID темы. Вы можете увидеть ID темы после включения режима дизайна на странице списка тем:
Просмотр номеров ID тем

Каждая директория темы содержит четыре ключевые части:
/css
CSS код для темы, сгруппированные сначала по приложению, затем по расположению (front/admin/global). /html
Используемые темой HTML шаблоны с расширением *.phtml, сгруппированные сперва по приложению, затем по расположению (front/admin/global), и по области применения. lang.php
Файл языка, в который вы можете добавить собственные языковые строки, необходимые для вашей темы. Строки должны быть в формате: 'ключ_фразы_без_пробелов' => "Фраза" /resources
Ресурсы для темы (в основном изображения), сгруппированные сначала по приложению, затем по расположению (front/admin/global), затем по типу.
Редактирование шаблонов
Когда вы редактируете *.phtml файл шаблона, экспортированные Режимом дизайнера, вы увидите специальный тег в первой строке каждого файла, похожий на этот:
<ips:template parameters="$title,$html,$location=array()" /> В этом теге содержатся переменные, которые принадлежит данному шаблону. Важно не изменять данную строку в файлах шаблонов, иначе это приведёт к ошибке темы.
Завершение работы в Режиме дизайнера
Когда вы внесли все изменения, вы можете отключить Режим дизайнера для импорта файлов обратно на сайт (обратите внимание, что вы можете включить Режим дизайнера позже, если захотите продолжить).
Чтобы это сделать, вернитесь назад к странице списка тем в меню Кастомизация > Внешний вид > Темы, и нажмите на красную кнопку "Режим дизайнера включён". Когда вы отключите настройку, вы увидите уточняющее сообщение, запрашивающее ваше подтверждение на синхронизацию изменений.
Убедитесь, что опция "Синхронизация изменений" активирована при сохранении, иначе ваши изменения будут утеряны.
Вы можете указать темы индивидуально, чтобы их синхронизировать, или все сразу. Вы также можете автоматически удалить файлы с диска при синхронизации тем.
Пользовательские настройки тем

Настройки тем являются одним из способов настройки переменных, используемых вашей темой и которые отвечают за кастомизацию темы в админцентре. Например, по умолчанию тема IPS4 хранит большинство своих цветов в качестве настроек темы, а также эти настройки представлены в редакторе Easy Mode.
Настройки темы особенно полезны в случаях, когда вы планируете делиться своими темами с другими, но они также будут полезны для применения в собственных нуждах. Например, вы можете захотеть сделать баннер сверху страниц вашего сайта, информирующий ваших пользователей о предстоящих событиях. Вместо постоянного редактирования шаблонов вашей темы для добавления/изменения/удаления сообщения, вы можете создать несколько настроек - одну для скрытия/отображения сообщения, а другую, содержащую сам текст.
IPS4 поддерживает широкий диапазон типов полей для настроек тем, открывая большие возможности для создания собственных тем.
Управление настройками тем
Настройками тем можно управлять только в Режиме дизайнера. Перед продолжением убедитесь, что вы активировали Режим дизайнера.
Управление настройками тем происходит на странице Кастомизация > Внешний вид > Темы в админцентре, нажмите на выпадающее меню напротив названия темы и выберите пункт Пользовательские настройки.
Пользовательские настройки темы

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

Название ключа языка
Настройки темы должны быть переводимы на разные языки. Таким образом, вместо того, чтобы ввести название настройки по-русский или по-английски, вы должны указать ключ языка, и затем создать эту новую фразу. Так как вы находитесь в Режиме дизайнера, в директории темы создан файл языка под названием lang.php, так вы должны создать в нём языковую фразу и указать её ключ в это поле. Для приложения
Соответствующее данной настройке приложение; в большинстве случаев это будет Core. Ключ
Это то, на что будет ссылаться настройка темы в шаблонах и CSS файлах, таким образом ключ должны быть простым и понятным. Тип вкладки
Контролирует группировку настройки. Если вы хотите добавить настройку в существующую группу, выберите её в следующей настройке; иначе, выберите Новая вкладка и введите её название в текстовое поле. Тип
Определяет тип поля, который будет использовать данная настройка. Значение по умолчанию
Поле Значение по умолчанию отображается для всех типов полей, и определяет какое значение будет иметь данная настройка, если администратор её не меняет. Примечание: для типа поля Цвет, указанное здесь значение должно быть в шестнадцатеричном формате со знаком '#' впереди, например #ff0000. Показывать условно?
Укажите исходный PHP код, который, при возвращении функцией eval логического значения, указывает должна отображаться настройка или нет. Сохраните форму добавления настройки, и выйдите из Режима дизайнера когда закончите создавать настройки для темы.
Изменение значений настроек темы
Значения настроек темы изменяются администратором на стандартном экране редактирования настроек темы. перейдите на страницу Кастомизация > Внешний вид > Темы и нажмите кнопку Изменить, расположенную справа от названия темы. Настройки тем доступны на вкладках и могут быть скорректированы в зависимости от типа поля:
Настройки темы

Использование настроек темы
Теперь, когда вы создали настройки темы, они могут быть использованы в ваших шаблонах и CSS файлах. Существует несколько способов из использования.
Тег {theme}
Если вы просто хотите вывести значение настройки (например, в CSS файле установить значение стиля как значение настройки темы), IPS4 предоставляет возможность использовать для таких случаев специальных тег:
{theme="your_theme_key"} Пример его использования:
body { background-color: {theme="page_background"}; } HTML логика
Если вам нужно проверить значение настройки темы в HTML логике (например, чтобы определить, должен ли быть отображён HTML блок или нет), вы можете воспользоваться следующей переменной:
theme.your_theme_key Пример использования переменной в логике шаблонов:
{{if theme.forum_layout === 'grid'}} ... {{else}} ... {{endif}}
Управление ресурсами темы

Тема имеет собственные ресурсы, обычно это изображения, но могут быть и любые другие типы необходимых вам ресурсов. Например:
Изображения Веб-шрифты Видео Ресурсы для тему управляются на странице Кастомизация > Внешний вид > Темы вашего админцентра, выберите пункт в меню "Управление ресурсам", расположенного в выпадающем меню темы.
Вы увидите список всех имеющихся ресурсов в теме.
Список ресурсов темы

Примечание: это применимо только, если вы не в Режиме дизайнера. Если режим включён, вы можете управлять ресурсами темы с помощью директории на диске, загружать ресурсы в админцентр нет необходимости. Однако, стоит иметь ввиду, что метод обращения к файлу ресурса одинаков, независимо от Режима дизайнера.
Добавление ресурсов
Чтобы добавить новый файл ресурса, нажмите кнопку "Добавить ресурс". Хотя форма не имеет ничего сложного для понимания, стоит упомянуть несколько пунктов настроек:
Существующее расположение
Выберите подходящее для вашего ресурса местоположение. Если ресурс предназначен для публичной части, выберите front, если для общего пользования в публичной части и админцентре, выберите global. Директория
Файлы группируются по типу, так же, как вы располагаете файлы на вашем рабочем столе. Мы рекомендуем создать новую директорию для ваших ресурсом, чтобы хранить их отдельно от стандартных ресурсов IPS4. Использование ресурсов
Благодаря тому, как загруженные файлы хранятся в IPS4 (они могут существовать в вашей файловой системе, Amazon S3, или в базе данных в качестве виртуальных файлов), это не даёт гарантируемый URL адрес, по которому можно ссылаться на загруженный ресурс. Вместо этого, вы должны использовать специальный тег, который заменяется на URL адрес ресурса.
Формат тега:
{resource="<folder>/<filename>" app="<app>" location="<location>"} <folder> это название директории, которую вы создали при загрузке изображения (или название существущей директории, если вы выбрали "Добавить в существующую директорию"). <filename> это оригинальное название загруженного файла с расширением. <app> это ассоциированное приложение (в большинстве случаев будет core), и <location> это одно из значений front, admin или global.
Вы также можете найти тег необходимого ресурса в списке существующих ресурсов (описано в начале статьи).
Тег шаблона может быть использован во всех шаблонах и CSS файлах, и будет заменён на URL адрес ресурса. Это означает, что вы можете использовать его следующим образом:
HTML: <img src='{resource="myfolder/myfile.png" app="core" location="front"}'> CSS: body { background: url( {resource="myfolder/myfile.png" app="core" location="front"} ); }
Рекомендации по вашим темам

Хотя система тем позволяет применить практически неограниченное количество возможностей, здесь мы разберём некоторые приёмы, которые мы рекомендуем вам применить. Это упростит процесс создания и использования тем.
Не редактируйте стандартные CSS файлы
Всякий раз, когда изменён файл стандартной темы, процесс обновления сайта становится немного сложнее, потому что должны быть обработаны все изменения. Это просто решить для CSS, т.к. по своей натуре они каскадны - то есть вы можете создать свои собственные CSS файлы, которые могут переопределять значения стандартных CSS файлов, при этом не влияя на процесс обновления CSS при обновлении сайта.
В качестве помощи, в IPS4 поставляется пустой CSS файл под названием custom.css, который вы можете использовать для кастомизации темы. Для простых тем, хранение кастомизаций в данном файле будет достаточным. Однако, вы можете создать несколько кастомных CSS файлов в группе, если хотите, и они будут автоматически подключены (нет необходимости использовать подключение с помощью @import).
Кастомный css файл
Invision Community всегда загружает ваши кастомные CSS файлы последними в очереди загрузки, так вы можете использовать те же селекторы, как в стандартных CSS файлах и ваши новые стили должны переопределять стандартные значения.
Внедряйте минимальные изменения в шаблоны
Редактирование шаблонов также может привести к трудностям при обновлении, поскольку кастомизированные шаблоны могут не иметь новый HTML код для новых функций, или что хуже, нарушать шаблоны, вызывая переменную, которая была удалена.
Тем не менее, в отличие от CSS файлов, шаблоны не каскадны, и в некоторых случаях редактирования шаблона является единственным путём кастомизации. Поэтому, мы рекомендуем вам максимально попытаться минимизировать кастомизацию шаблонов. Существует несколько стратегий для этого:
Используйте CSS, где это возможно
Использование HTML кода в шаблонах для достижения необходимого визуального стиля может быть весьма заманчивым. Мы рекомендуем рассмотреть использование CSS для реализации задуманного где это возможно, т.к. это сделает поддержку вашей темы намного проще в долгосрочной перспективе. Используйте включение шаблонов и пользовательские шаблоны
Если вы добавляете большой блок HTML кода в шаблон (больше нескольких строк), подумайте над размещением этого кода в кастомном шаблоне, затем вызовите этот шаблон в стандартном шаблоне. Таким образом, кастомизация стандартного шаблона состоит только во включении тега вызова, который можно вернуть в исходное состояние и добавить тег вставки шаблона обратно без особых усилий. Для вызова пользовательского шаблона, вы можете сделать: {template="myCustomTemplate" group="<group>" app="<app>"} где <group> и <app> являются ключами для местоположения, которое вы выбрали при создании вашего кастомного шаблона.
Рассмотрите возможность создания хука
Хуки приложения имеет возможность изменять шаблоны с помощью 'перехвата' кода. В некоторых ситуациях, использование хуков может быть более подходящим, чем непосредственное редактирование шаблона.
Помните о поддержке мобильных устройств
Invision Community изначально разработан отзывчивым, то есть стандартная тема корректно работает на всех устройствах, независимо от разрешения экрана, будь то настольный компьютер или мобильный телефон. Когда вы производите изменения в вашей теме, не забудьте о поддержке мобильных устройств и убедитесь в том, что вы также включили адаптивные стили тоже. Вы можете использовать инструмент, подобный веб-инспектору Google Chrome, чтобы имитировать различные размеры экранов, или BrowserStack для тестирования темы на реальных устройствах.
Помните о поддержки справа налево
Invision Community разработан для полноценной работы на типах языков - справа налево (RTL) и слева направо (LTR). Если вы создаёте тему, которой хотите поделиться с другими, помните о поддержки RTL.
Поддержка языков справа налево (RTL)

Invision Community поддерживает языки, которые использую текст справа налево (включая арабский, персидский и другие), и если вы создаёте тему, которой будете делиться с другими, вы должны убедиться в том, что совместима с языком справа налево. Это очень просто.
Специальный CSS для RTL
При отображении RTL, некоторые свойства CSS нужно поменять местами; например, если вы позиционируете что-то слева в языке слева направо, когда тема показана в языке справа налево, это должно позиционироваться справа.
Глобальный шаблон в IPS4 всегда имеет атрибут dir определяющий направление текста (значение будет ltr или rtl), и именно этот атрибут мы можем использовать в стилях, которые основываются на направлении текста.
Давайте представим, у вас есть некоторый CSS в вашей теме, например такой:
.yourClass { font-weight: bold; position: absolute; left: 15px; top: 15px; padding-left: 30px; } Некоторые из этих свойств должны быть переназначены для RTL, иначе тема будет отображена неверно. Так, с помощью атрибута dir в теге html, мы должны написать следующее:
/* Эти стили одинаковы для всех направлений текста */ .yourClass { font-weight: bold; position: absolute; top: 15px; } /* Стили LTR */ html[dir="ltr"] .yourClass { left: 15px; padding-left: 30px; } /* Стили RTL */ html[dir="rtl"] .yourClass { right: 15px; padding-right: 30px; } Языки RTL теперь будут корректно позиционировать элемент на правой стороне экрана, а языки LTR будут отображать элемент слева.
Всякий раз, когда вы используете стили для разного направления текста, вы должны разделить их именно таким образом.
Специальные иконки для RTL
Invision Community активно использует иконки FontAwesome. Некоторые иконки должны быть перевёрнутыми для языков RTL (например стрелки) и если вы используете стандартные имена классов (например, fa-caret-left), мы автоматически переворачиваем её, чтобы она подходила для языков RTL.
Если вы вручную указали иконки в ваших CSS классах с помощью unicode, вы также должны изменить их для поддержки RTL. Например, имеем такой CSS код:
/* Это использует unicode для иконки FontAwesome 'angle-right' */ .nextLink:after { font-family: 'FontAwesome'; content: '\f105'; } Вам нужно изменить на это:
.nextLink:after { font-family: 'FontAwesome'; } html[dir="ltr"] .nextLink:after { content: '\f105'; } html[dir="rtl"] .nextLink:after { content: '\f104'; } Рассмотрите собственный Javascript код
Как правило, это не потребует каких-либо действий. Тем не менее, если у вас есть какие-либо пользовательские JavaScript коды, которые взаимодействуют с пользователем, вы должны сделать соответствующие правки в нём. Например, если у вас есть меню, которое открывается слева страницы, вы должны также продублировать его открытие справа. Если вы используете какие-либо UI виджеты, включённые в Invision Community, они не требуют никакой адаптации.
Обновление тем

При появлении нового программного обеспечения, в нём неизбежно будут внедрены изменения в стандартных шаблонах, которые должны быть перенесены в ваши кастомные темы. При обновлении, только неизмененные шаблоны будут автоматически обновлены, и вам нужно самостоятельно внедрить изменения в необновлённые шаблоны.
Есть несколько инструментов, доступных для вас, чтобы достичь этого. Каждый из которых описан ниже.
Различия тем
Инструмент различия тем это внешний инструмент, расположенный на сайте разработчика по ссылке:
https://invisionpower.com/index.php?app=core&module=system&controller=plugins&do=diff
Этот инструмент позволит вам увидеть различия между 2 версиями IPS4, начиная с 4.0.0 и до текущей.
Инструмент сравнения различий в шаблона IPS4

После того, как вы выбрали версии для сравнения, вы увидите все изменения между шаблонами выбранных версий в формате, показанном на изображении ниже. Красный текст показывает удалённый код, зелёный - добавленный код.
Различия в шаблонах

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

После того, как вы нашли и открыли шаблон, над которым необходимо поработать, вы увидите кнопку Инструменты в правом верхнем углу экрана. При нажатии на неё вы увидите опцию, которая покажет вам стандартный код шаблона.
Настройки шаблонов

После того, как вы выбрали это, вы увидите стандартный шаблон, расположенный рядом с модифицированным, и отображающий все изменения, как показано на изображении ниже. Обратите внимание, что вы не можете редактировать код стандартного шаблона.
Просмотр изменений шаблонов в админцентре
Обновление тем на IPS 4.2

Разработчики постарались максимально возможно сохранить совместимость тем для Invision Community 4.1 и 4.2. Однако, учитывая множество изменений в темах и новые функции в 4.2, вам придётся внести некоторые изменения вручную.
Обновление шаблонов темы
Самый простой и эффективный способ обновления шаблонов темы для совместимости с 4.2 это простой возврат его к исходному состоянию (при просмотре шаблона темы в редакторе, нажмите кнопку "Оригинал"). Это приведёт к сбросу всех его модификаций и проблем с устареванием этого шаблона. Соответственно после этого вы должны снова внести все изменения в данный шаблон.
Другой способ - вручную обновить тем шаблоны, которые вызывают ошибки. Это не совсем правильно, т.к. перед этим необходимо выяснить причину ошибки и убедиться, что после внесения изменений в шаблон ошибка полностью устранена.
Следуйте данному руководству
В этом руководстве описаны основные области, которые должны быть обновлены для достижения совместимости. Однако оно не является полным, т.к. в зависимости от степени кастомизации вашей темы, могут быть не описанные здесь правки. Кроме того, в этом руководстве не описаны изменения для обновления ваших шаблонов к новым возможностям 4.2. Цель руководства попытаться избежать фатальных ошибок и визуальных проблем после обновления. Мы по-прежнему рекомендуем следовать сравнению всех исправленных вами шаблонов, чтобы внести изменения.
Однако, перечисленные в данном руководстве области позволят минимизировать ошибки в последствии обновления.
Изменение структуры основной навигации
HTML структура бара основной навигации была немного переработана, чтобы позволить ему быть в полную ширину страницы. Тег <nav> больше не содержит класс ipsLayout_container. Вместо него данный класс приобретает элемент ipsNavBar_primary. Таким образом:
Отрывок кода шаблона 4.1.19:
{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}} <nav class='ipsLayout_container' data-controller='core.front.core.navBar'> <div class='ipsNavBar_primary {{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} ipsClearfix'> Отрывок кода шаблона 4.2:
{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}} <nav data-controller='core.front.core.navBar' class='{{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}}'> <div class='ipsLayout_container ipsNavBar_primary {{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} ipsClearfix'> Не забывайте, что это отрывок кода, соответственно закрывающие теги тоже присутствуют.
Бар основной навигации также имеет отрицательное верхнее значение в 4.2, чтобы способствовать новому позиционированию. Таким образом, в кастомных темах это может привести к завышенному расположению навигационного бара, чем там, где он должен быть. Если в вашей теме наблюдается данная проблема, вы можете сбросить верхнее позиционирование:
.ipsNavBar_primary { top: 0; } Ну и наконец, в стандартной теме установлен фон к #ipsLayout_header (используется настройка темы main_nav_tab). На кастомных темах это может вызвать цветной блок, отображающийся за навигационным баром. Вы можете исправить это путём добавления этого CSS:
#ipsLayout_header nav { background: transparent; } Нет цвета у фона контента
Стандартная тема 4.2 более не имеет фонового цвета у элемента #ipsLayout_contentWrapper. Если ваша тема использует цветной фон страниц и опирается на фон contentWrapper, вы можете добавить цвет для фона обратно, путём добавления стиля в ваш custom.css файл:
#ipsLayout_contentWrapper { background-color: #ffffff; } Нет внешнего отступа у #ipsLayout_mainArea, бокового блока или хлебных крошек
Если вы столкнулись с проблемой выше с #ipsLayout_contentWrapper, скорее всего, у вас также возникнет и эта проблема. Стандартная тема 4.2 больше не включает отступы у #ipsLayout_mainArea, элементов в боковом блоке, или хлебных крошек. Если вы применили фоновый цвет к #ipsLayout_contentWrapper, вы, скорее всего, увидите контент, касающийся сторон фоновой области. Вы можете изменить это путём добавления отступов:
#ipsLayout_mainArea { padding: 0 20px; } .ipsBreadcrumb { margin-left: 20px; margin-right: 20px; } #ipsLayout_sidebar { padding-left: 0; padding-right: 0; } html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarleft, html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarright { padding-left: 20px; } html[dir="ltr"] #ipsLayout_sidebar.ipsLayout_sidebarright, html[dir="rtl"] #ipsLayout_sidebar.ipsLayout_sidebarleft { padding-right: 20px; } По умолчанию цвет фона основной навигации не задан
Из-за нового стиля заголовка и навигации в 4.2, бар основной навигации больше не использует цвет фона, определённого в настройках темы (вместо этого он прозрачный, а цвет заголовка окружает навигацию). Если ваш дизайн темы зависит от этого цвета фона, вы можете добавить его обратно с помощью CSS:
.ipsNavBar_primary { background: {theme="main_nav"}; padding: 5px 5px 40px 5px; } Необязательные заголовки теперь скрыты по умолчанию
Чтобы скрыть лишние элементы дизайна со страницы, 4.2 скрывает множество заголовков (так же называемые 'maintitle'), которые расположены над таблицами/областями контента. Почти по всех случаях разработчики оставили разметку для этих заголовков в коде темы, что позволяет вам включить их отображение, если в этом есть необходимость.
.ipsApp .ipsType_sectionTitle.ipsHide { display: block; } Изменён параметр подключении шаблона хлебных крошек
Мы рассмотрим изменённые параметры в следующей области, но мы должны рассмотреть важный параметр в шаблоне хлебных крошек, т.к. он встречается в глобальном шаблоне globalTemplate. Ранее первым параметром шаблона было boolean значение. Это изменено, соответсвенно вам нужно обновить все вызовы данного шаблона с:
{template="breadcrumb" app="core" group="global" params="FALSE, 'top'"} на
{template="breadcrumb" app="core" group="global" params="'top'"} Тоже самое применено для второго вызова хлебных крошек в этом шаблоне, который отображает нижние хлебные крошки - просто удалите первый параметр.
Изменена логика ссылки Обратная связь
Если ваша тема имеет изменённый шаблон футера, вы, скорее всего, получите внутреннюю ошибку на каждой странице вашего сообщества из-за вызова метода, который больше не существует. Этот вызов оборачивает ссылку Обратная связь и проверяет разрешение пользователей. Вы должны обновить код:
{{if \IPS\core\modules\front\contact\contact::canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' )}} должен быть:
{{if \IPS\Member::loggedIn()->canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' )}} Обратите внимание на новый метод canUseContactUs.
Изменены параметры шаблонов
Некоторые шаблоны имеют новые или изменённые параметры, передаваемые из PHP фреймворка. Проверьте список шаблонов ниже, если вы изменили один из этих шаблонов, вы должны вручную изменить параметры шаблона, чтобы избежать фатальных ошибок. Это делается путём перехода в окно редактирования кода шаблона и нажатием на кнопку "Параметры". Возможно, вам также потребуется обновить контент шаблона, чтобы использовать новую переменную.
Core > Global > Forms > address; Core > Front > Forms > editContentForm; Core > Global > Forms > editorAttachmentsPlaceholder; Core > Global > Forms > node; Core > Global > Forms > nodeCascade; Core > Front > Global > breadcrumb; Core > Global > Global > pollForm; Core > Front > Global > reputationMini; Core > Global > Login > mfaRecovery; Core > Front > System > searchResult; Core > Front > System > settingsOverview; Core > Front > System > settingsProfileSync; Forums > Front > Forums > forumPasswordPopup; Forums > Front > Index > indexButtons; Blog > Front > Submit > submit; Calendar > Front > Submit > submitPage; Calendar > Front > View > view; Gallery > Front > Browse > album; Gallery > Front > Global > embedAlbums; Nexus > Front > Global > embedProduct; Nexus > Admin > Support > request. В репутацию добавлены реакции
Invision Community 4.2 включает в себя Реакции как обновление и дополнение к текущей системы репутации. В результате этого появились новые дополнения к шаблонам и устаревшие методы, влияющие не темы. Это изменение повлияет на любой шаблона, вызывающий метод $content->reputation(), включая:
Forums > Front > Topics > postContainer; Forums > Front > Topics > post; Blog > Front > Widgets > blogCommentFeed; Pages > Display > Database > comment; Pages > Display > Database > commentContainer; Core > Front > Global > comment; Core > Front > Global > commentContainer; Core > Front > Statuses > statusReply; Downloads > Front > Widgets > downloadsCommentFeed. Эти шаблоны необходимо обновить для корректной проверки/отображения реакций на контент с использованием нового метода. Разработчики добавили обратную совместимость для метода reputation(), где это возможно, чтобы предотвратить ошибки. Однако, старый метод reputation() уже устарел и будет удалён в следующем обновлении, поэтому вам необходимо при первой же возможности обновить любые пользовательские шаблоны, вызывающие метод reputation().
В дополнение к этому новому методу, изменился способ проверки шаблонов, в которых поддерживается репутация/реакции, т.к. реакции используют PHP трейты.
Вместо такого:
{{if $comment instanceof \IPS\Content\Reputation and settings.reputation_enabled}} {template="reputation" group="global" app="core" params="$comment, 'ipsPos_right ipsResponsive_noFloat'"} {{endif}} Код теперь выглядит так:
{{if \IPS\IPS::classUsesTrait( $comment, 'IPS\Content\Reactable' ) and settings.reputation_enabled}} {template="reputation" group="global" app="core" params="$comment"} {{endif}} Если вы определили, что один из ваших пользовательских шаблонов требует обновления в связи с использованием реакций, мы рекомендуем воспользоваться инструментом сравнения шаблонов, чтобы корректно применить новый код.
Новые настройки тем
В 4.2 добавлены некоторые новые настройки. Хотя они не должны оказать существенное влияние на существующие пользовательские темы, вы можете увидеть, что добавились некоторые цвета, не вписывающиеся в ваш дизайн темы, т.к. они контролируются новыми настройками темы. Вы можете просмотреть цвета, установленные этими настройками, и настроить их в соответствии с вашими требованиями.
тег (цвет фона тега); префикс (цвет фона префикса); widget_title_font (цвет текста строки заголовка виджетов); comment_count (фоновый цвет кол-ва комментариев, иногда показываемый вместе с контентом); comment_count_font (цвет текста выше); featured (цвет, используемый для определения рекомендуемого / популярного контента); pagination_active (цвет фона активной страницы в постраничной навигации); link_button (обводка и цвет текста кнопок ссылок). Просмотр форума сеткой теперь не настройка темы
В 4.1 и ниже, опция просмотра форума в виде сетки была выполнена в виде отдельной настройки в теме. В 4.2 теперь это системная настройка, которая связана с новым Отзывчивым видом форума. Если вы делали проверку на просмотр сеткой в шаблонах темы, вы должны обновить конструкцию проверки. Вместо:
{{if theme.forum_layout === 'grid'}} //.... нужно
{{if \IPS\forums\Forum::getMemberView() === 'grid'}} //... Админцентр теперь менее зависит от пользовательской темы
Разработчики решили уйти от концепции темизации админцентра на равне с темизацией сайта. Это значит, что в 4.2 админцентр по-прежнему загружает тему в том же порядке, что был в 4.1, однако теперь не может быть изменён. - многие области темы админцентра теперь жёстко закодированы в своих собственных CSS файлах и не будут наследовать настройки темы сайта. В следующих версиях админцентр нельзя будет кастомизировать, его тема будет использоваться как есть на всех сайтах.
Обновление тем на Invision Community 4.4

По большей части темы, созданные для Invision Community 4.3, должны работать без изменений в Invision Community 4.4. Однако, для сайтов с достаточно крупными изменениями темы может потребоваться внесение изменений вручную, чтобы обеспечить совместимость.
На данной странице указаны необходимые изменения, которые будут пополняться по мере выявления конкретных изменений, которые могут вызывать проблемы при обновлении.
includeJS требует два новых ключа для ленивой загрузки
Если вы изменили шаблон includeJS.phtml, вам потребуется добавить два новых ключа в основной блок настроек ipsSettings, чтобы ленивая загрузка медиа контента работала правильно:
lazyLoadEnabled: {{if \IPS\Settings::i()->lazy_load_enabled}}true{{else}}false{{endif}}, blankImg: "{expression="\IPS\Text\Parser::blankImage()"}",

Войти

Новое сообщество

Лицензия

Системные требования

Установка

Обновление

Перенос с других платформ

Приложения

Форумы

Страницы

Галерея

Загрузки

Блоги

Календарь

Коммерция

Продвижение

Продвижение в социальных сетях

Общее использование

Знакомство

Общие настройки

Контент

Пользователи

Модерация

Авторизация через сайты

СЕО оптимизация

Управление файлами

Индивидуализация

Темы и дизайн

Языки и переводы

Редактор сообщений

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

CSS фреймворк

Javascript

Советы и трюки

Расширение возможностей

Конфигурация

Управление сервером

IPS Connect

Разработка

Приложения

Плагины

Сторонние приложения

Automation Rules

Важная информация