Внешний вид форума складывается из нескольких компонентов:

• Графика
• CSS
• Шаблоны
• Общий шаблон

В совокупности эти компоненты и составляют стиль или «скин». Изменяя отдельные компоненты, Вы можете вносить как тончайшие изменения (например, менять шрифты), так и полностью перерабатывать дизайн вашей конференции — Вы ограничены лишь собственными навыками и временем, которое Вы можете посвятить этому увлекательному процессу.

Базовый шаблон IP.B по умолчанию создан и поддерживается IPS, будет продолжаться работа над его улучшением и обновлением от версии к версии. Он понятный и нейтральный, работает с рядом платформ и браузеров. Кроме того, он соответствует всем стандартам. Некоторые стили вносят небольшие изменения в изначальный дизайн, а некоторые создают новый и отличающийся внешний вид.

Пример изменения внешнего вида форума:

Пример более темного стиля:

Нажав вкладку Внешний вид, первое что вы увидите – это список стилей, средство, отображающее все установленные стили и позволяющее редактировать каждый.

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

Такая система имеет три преимущества:

Более легкое обновление – Предположим, вы создали дизайн стиля и хотите иметь несколько разноцветных вариантов этого стиля. Достаточно создать стиль, а затем создать дочерний стиль для каждого цвета, изменяя только CSS и графику. Несколько недель спустя, вы хотите внести изменения в HTML шаблон ваших стилей – благодаря наследованию, достаточно внести изменения в родительский стиль, все дочерние стили автоматически унаследуют эти изменения.

Уменьшенное занимаемое место – Поскольку при изменении части шаблона, копируются только измененные части, место, занимаемое стилями на диске, значительно уменьшается. Если вы не вносили изменения в шаблон, достаточно одной копии шаблона для всей коллекции ваших стилей!

Легкое обновление до следующих версий – При установке новой версии IP.B, вам будет легче обновлять стили. Корневой стиль будет обновлен обновленными шаблонами стилей, а все стили вашего форума унаследуют эти изменения, за исключением измененных вами частей. В списке стилей справа от каждого стиля расположены три значка.

1. Используется в форумах – если значок подсвечен, значит, этот стиль установлен в качестве стиля форума в одном или нескольких форумах. Чтобы просмотреть форумы, где включен данный стиль, задержите курсор мышки над значком до появления всплывающей подсказки.
2. Шаблон скрыт от пользователей – если значок подсвечен, значит, пользователи могут выбирать этот стиль в Личных данных. Если значок недоступен для выбора, значит, стиль виден только внутри АЦ (полезно, пока стиль находится в разработке).
3. По умолчанию – если значок подсвечен, значит, этот стиль является стилем форума по умолчанию.

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

Опции в низу страницы позволяют вернуть все изменения к значениям по умолчанию для мастер/родительского стиля, экспортировать стиль, чтобы дать возможность сохранить резервную копию или поделиться стилем, сгенерировать отличия, чтобы можно было увидеть изменения по сравнению с родительским стилем, а также удалить стиль. Остальные опции объяснены ниже.

Общий шаблон существует для того, чтобы содержать HTML код, задающий внешний вид IP.B. Он использует подстановочные переменные там, где определенный код будет заменен системой обработки шаблонов. Это позволяет добавлять собственный код перед элементами стилей, такими как заголовки, уведомление о правах собственности, или даже удалять единовременно все элементы.

Редактирование общего шаблона похоже на редактирование обычного HTML документа, с элементами заголовка и тела. Подстановочные переменные обозначаются в виде <% ИМЯ %>, где ИМЯ – название соответствующей переменной. Эти названия говорят сами за себя, при отображении форума пользователю они будут заменены кодом из шаблонов стилей. Нажмите Сохранить общий шаблон (Save Wrapper), чтобы сохранить изменения и вернуться в список стилей. Чтобы сохранить изменения и перегрузить редактор, нажмите Сохранить и обновить общий шаблон (Save and Reload Wrapper).

Шаблоны — это кусочки HTML-кода, из которых состоит любая часть IP.B, которая отображается на экране. Когда IP.B генерирует отображаемую страницу, то собирает воедино все фрагменты HTML-кода, требуемые для данной страницы, вставляет в них нужную информацию, и лишь затем отображает результат пользователю.

При выборе опции Изменить HTML шаблоны в списке стилей, отобразится список категорий, содержащихся в шаблоне.

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

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

Нажатие на имя шаблона откроет сверху редактор, который позволяет внести изменения в HTML код. Вы также можете редактировать несколько шаблонов одновременно, выделив ряд имен и нажав Изменить выбранное (Edit Selected).

Значки рядом с каждым шаблоном позволяет просмотреть шаблон в виде текста, т.е. в виде неформатированного HTML, а также просмотреть шаблон как часть стиля форума.

Редактировать HTML шаблона нужно также, как и обычный HTML файл. Как только редактирование закончено, нажмите Сохранить шаблон (Save Template Bit), чтобы сохранить изменения.

Редактор, используемый для внесения изменений в участки шаблона, имеет ряд функций, который позволяют легче работать с HTML кодом. Нажатие на выпадающее меню Настройки Редактора откроет ряд вариантов, которые изменяют вид редактора и способ отображения HTML кода. Можно изменить шрифт, размер шрифта, цвет шрифта, заливку и размеры редактора. Справа, рядом с кнопкой Сохранить шаблон имеется кнопка Плавающее окно (Float). Ее нажатие откроет редактор отдельно от АЦ в новом окне, что позволит легче редактировать код.

Самая правая кнопка отрывает следующие опции:

• Входящие переменные – Речь идет о переменных РНР, которые передаются шаблону при его вызове в коде РНР IP.B. Обычно, их можно игнорировать, но если вы добавляете свой собственный элемент в шаблон и хотите использовать переменные, передаваемые в коде, вам необходимо ввести их здесь. Например, если исходный код содержал такую строку: $html = $this→skin→some_func($data ); , то вам необходимо ввести в это поле $data.
• Проверка макросов – Вы можете быстро найти макросы замены, установленные для данного стиля, вводя имя в поле поиска. Подробно см. раздел Макросы.
• Сравнить версии – Позволяет сравнить текущую версию шаблона с оригинальным шаблоном, являющимся по умолчанию, родительским шаблоном.
• Обратить все изменения – Если при редактировании допущена ошибка, данная опция восстановит версию по умолчанию.
• Просмотр оригинала – Отображает первоначальную версию по умолчанию из родительского шаблона.

В шаблонах IP.B используются некоторые переменные, размещенные прямо внутри HTML-кода. Переменные — это части текста, которые перед отправкой в веб-браузер, пользователя заменяются некоторой другой величиной, которую они представляют. Например, когда отображается сообщение пользователя (пост), IP.B загружает соответствующий шаблон, и содержимое сообщения заменит соответствующую переменную в этом шаблоне. От шаблона к шаблону переменные меняются – различным шаблонам передаются различные переменные, но любые переменные класса ipsclass могут быть использованы в любом шаблоне следующим образом:

{$this→ipsclass→{varhere}}

чтобы распечатать имя форума.

Все установки находятся в ipsclass→vars, все языки – в ipsclass→lang.

Большинство различных внешних видов IP.B управляются посредствам CSS, которые позволяют намного легче настраивать цвета и шрифты под необходимые требования. IP.B предоставляет два варианта редактирования CSS: первый – непосредственное редактирование CSS файла. При выборе данной опции откроется редактор, позволяющий вносить изменения в CSS. Вы можете воспользоваться инструментом Информация об использовании CSS классов (Find CSS Usage), чтобы отобразить список всех CSS элементов и увидеть, где в шаблонах они используются в шаблонах. Можно даже просмотреть эффект от выбранного из выпадающего меню элемента CSS на шаблон.

Если вы не знакомы с CSS, вы можете воспользоваться простым редактором CSS, чтобы внести изменения в цвета и другие параметры CSS.

1. Название элемента – Название элемента в фале CSS.
2. Цвет шрифта – Введите шестнадцатеричный HTML код цвета в данной поле для установки цвета.
3. Просмотр цвета шрифта – Шестнадцатеричные коды сложно запоминать, так что после первого сохранения данный цвет будет сохранен.
4. Подбор цветов шрифта – Если вам не приходилось пользоваться шестнадцатеричными HTML кодами, нажмите этот значок, чтобы воспользоваться интерактивным инструментом подбора цветов, который автоматически сгенерирует шестнадцатеричный код выбранного вами цвета.
5. Другие атрибуты CSS –Здесь вы можете ввести любые другие атрибуты CSS. Ими часто бывают шрифты и размеры шрифтов.

Как только все изменения внесены, нажмите Изменить (Edit) внизу страницы, чтобы сохранить изменения.

В разделе Общий шаблон форума упоминались переменные подстановки, которые сродни макросам подстановки и отличаются от них только тем, что они глобальные и функционируют в шаблонах. Это, например <{name}>. Нажмите Добавить макрос (Add Macro), чтобы добавить новый, или опцию Изменить (Change), расположенную рядом с существующим макросом. Если вы ввели ключ green_font и замену для него <font color='green'>, то везде, где встречается <{green_font}>, этот элемент будет заменен на <font color='green'>.

Изменение настроек стилей позволяет настроить компоненты и различные детали каждого стиля.

Название

Название стиля, в каком виде оно будет отображаться в АЦ и Личных данных пользователя.

Скрыть от пользователей?

Если включено, то пользователи не смогут видеть данный стиль и выбирать его в Личных данных. Обычно эта опция используется, когда вы хотите доработать стиль перед тем, как сделать его доступным для всех пользователей форума.

Сделать его стилем по умолчанию? Если включено, то данный стиль станет стилем по умолчанию, а значит, если гость или пользователь форума не выбрал стиль явно в своих Личных данных, то для отображения будет использован именно этот стиль.

Стиль имеет родителя? Определяет родительский стиль для данного стиля в терминах наследования. Если установлено значение Нет родителя (No Parent), то этот стиль сам будет являться родительским стилем.

Кэшировать CSS стили в файл? Если включено, то таблица CSS этого стиля будет сохраняться в отдельный файл, который затем будет подключаться на каждой сгенерированной форумом странице. Основное преимущество такого метода заключается в том, что браузер пользователя будет кэшировать (то есть сохранять локальную копию) внешнего файла, поэтому не будет необходимости перезагружать файл при каждой загрузке новой страницы. Это снижает объем используемого трафика.

Директория с изображениями Определяет директорию с изображениями (или набор), которые будет использовать этот стиль. Все директории для изображений создаются в папке style_images/ вашего форума.

Используемые смайлики Определяет набор смайликов, которые будет использовать этот стиль. Каждый набор располагается в отдельной подпапке внутри папки style_emoticons/ вашего форума.

Имя Имя создателя стиля (если вы создали стиль с нуля, то ваше). Используется в информационных целях при экспорте стиля.

E-mail адрес Адрес электронной почты автора стиля (если вы создали стиль с нуля, то ваш). Используется в информационных целях при экспорте стиля.

Домашняя страница автора Веб-страница автора стиля (если вы создали стиль с нуля, то ваша). Используется в информационных целях при экспорте стиля.

Выберите Инструменты (Skin Tools) из левого меню, при этом откроется ряд полезных инструментов, которые можно использовать при редактировании ваших стилей. IP.B кэширует много файлов, чтобы уменьшить количество запросов в базу данных и улучшить скорость работы, но эти фалы иногда случайно могут оказаться устаревшими. Нажатие Запустить (Run Tool) запустит работу скрипта.

Обновление HTML шаблонов главного стиля

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

Обновление компонентов главного стиля

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

Обновление макросов главного стиля

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

Обновление кеш-файлов

Эта опция позволяет обновить все кеш-файлы всех HTML шаблонов, CSS стилей и макросов выбранного стиля, а также всех вложенных шаблонов.

Переустановка стиля у пользователей

Заставить пользователя, использующего определенный стиль (выбранный в специальном поле), использовать вместо него другой стиль (выбранный из выпадающего меню). Эта опция очень удобная, если вы хотите удалить стиль и перевести всех пользователей на стиль по умолчанию.

Переустановка стиля у форумов

Форумы могут иметь различные стили, соответственно выбору пользователей. Вы можете изменить стиль, используемый форумом или форумами.

IP.B позволяет организовывать простой поиск шаблонов, чтобы дать возможность найти определенную часть HTML, которую вы хотите изменить. Вы можете ввести ключевое слово или фрагмент HTML, который необходимо найти, и выбрать определенны набор стилей, в котором производить поиск. Произвести поиск можно, нажав Искать (Search). Можно также произвести операцию поиска и замены, если вы знаете, что конкретно вы ищете. Эту функцию, например, удобно использовать для замены определенных слов в шаблонах.

Поиск по…

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

Заменить на…

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

Поиск в стиле… Набор шаблонов, в котором необходимо производить поиск. Поиск и замена работают только, если указан набор шаблонов, где необходимо производить операцию. Поиск и замена НЕ будут производиться в родительских или мастер наборах стилей.

Только тестирование запроса?

Если выбран вариант Да, замены производиться не будут, и вы сможете предварительно просмотреть изменения.

Включить регулярные выражения?

Если выбран вариант Да, вы можете использовать регулярные выражения при поиске и замене. Например, что бы заменить все <br> или <br /> на <br clear='all' /> Искать: <(br)\s?/?> Заменить на: <\\1 clear='all' />

Любые изменения, внесенные вами в стиль, могут быть экспортированы в формат XML, что позволяет поделиться ими или сохранить резервную копию. Аналогично, можно импортировать изменения стилей или полностью новые стили, созданные другими людьми. Опция Импорт и экспорт стилей (Skin Import/Export) в левом меню позволяет выполнить эти действия.

Поскольку стили состоят из различных элементов, их необходимо экспортировать по отдельности. Три элемента, которые необходимо экспортировать, – это стили, изображения и макросы. IP.B предоставляет три инструмента для выполнения данных действий. Для каждого из них выберите стиль, элементы которого необходимо экспортировать, а затем нажмите Экспортировать (Export). Вскоре откроется опция загрузки, позволяющая сохранить файл на ваш компьютер.

Снова, есть три опции для импорта трех составляющих частей стиля - шаблонов, изображений и макросов подстановки. Однако при импорте файлов имеется несколько опций. Во-первых, можно загрузить файлы с вашего компьютера. Это можно сделать, нажав Обзор (Browse), и указав место расположения файла на компьютере. Второй вариант – это загрузить файл в корневую директорию IP.B, а затем ввести имя файла в соответствующее поле. Как только указано место файла, нажмите Импортировать (Import), и вы загрузите файл и импортируете стиль в ваш IP.B форум.

Если вы хотите импортировать на ваш форум новый стиль и хотите посмотреть, какие были внесены изменения, вы можете воспользоваться инструментом нахождения различий, чтобы просмотреть, какие будут внесены изменения после импорта. Нажатие Сравнение (Skin Differences) в левом меню откроет страницу загрузки XML файла нового стиля. Здесь необходимо ввести имя отчета, а затем использовать Обзор (Browse), чтобы найти файл ipb_templates.xml на вашем компьютере. Так же можно выбрать галочку «Пропускать все новые/ошибочные шаблоны?». Эта опция удобна для сравнения старого файла стиля с новой версией IP.B, поскольку могли быть добавлены новые элементы шаблона по сравнению со старым стилем. Нажмите Импортировать (Import), чтобы получить отчет о различиях.

Если вы не хотите вносить значительные изменения в стиль, а просто хотите быстро сменить логотип, отображаемый на вашем форуме, вы можете воспользоваться инструментом смены логотипа, чтобы изменить логотип IP.B по умолчанию на свой собственный.

К какому шаблону добавить логотип?

В выпадающем меню выберите стиль, в котором необходимо заменить логотип. Можно иметь различные стили, в которых будут отображаться одинаковые или различные логотипы. В таком случае, необходимо загрузить логотипы для каждого из них.

Ссылка к логотипу

Если логотип уже где-то в сети, то здесь можно указать полный URL. Если же логотип загружен на ваш веб-сервер, то можно указать относительный URL.

ИЛИ загрузить новый логотип

В случае, если логотип все еще на вашем компьютере, нажмите Обзор (Browse), чтобы указать на него.

Нажмите Установить (Complete Edit), чтобы внести изменения.