Поиск сообщества

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

Хотя система тем позволяет применить практически неограниченное количество возможностей, здесь мы разберём некоторые приёмы, которые мы рекомендуем вам применить. Это упростит процесс создания и использования тем. Не редактируйте стандартные 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.

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

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

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

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

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