Замена иконок форумов изображениями

В Invision Community 4 с лёгкостью можно добавить иконку к каждому форуму в его настройках в админ-центре. Однако, если вы хотите иметь собственные иконки для каждого форума, загружать их  для каждого форума довольно трудоёмкое действие. Давайте разберёмся как это сделать легко и просто с помощью CSS.

Сперва нужно загрузить необходимую иконку в Ресурсы вашей темы, чтобы можно мы смогли обращаться к ней в CSS. Мы разберём возможность указать одну и ту же иконку для разных статусов форумов (прочитан/не прочитан), а так же указать свою иконку для каждого из статусов. Начнём с первого случая:

Одинаковая иконка для всех форумов

Приведём CSS код для установки иконки для всех форумов сразу:

/* Указываем иконку из ресурсов темы  */
body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large {
	width: 50px;
	height: 50px;
	border-radius: 0;
	background-color: transparent;
	background-image: url('{resource="forumicon.png" app="core" location="front"}');
	background-size: 50px 50px;
}

/* Убираем стандартную иконку fonawesome */
body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large > i {
	display: none;
}

Как видно из CSS кода, мы указали селектор body[data-pageapp="forums"], определяющий, что иконки будут изменены только у приложения форумов. В рамках этого css стиля мы применили ограничение размера нашей иконки в 50px на 50px, которые вы можете изменить на свои. Далее мы обнуляем значение border-radius и указываем прозрачный фон.

Используем другую иконку у форумов со статусов 'Прочитано'

По умолчанию к иконке будет применён эффект затухания (прозрачности), если отметить форум прочитанным, однако можно в этом случае использовать другую иконку:

body[data-pageapp="forums"] .cForumRow .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {
	background-image: url('{resource="forumicon_transp.png" app="core" location="front"}');
}

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

Различные иконки для форумов с перенаправлением и форумов для вопросов

Если вы хотите добавить иконку для форумов с перенаправлением или форумов, предназначенных для вопросов, вы можете использовать в селекторе уникальные классы - .cForumIcon_redirect и .cForumIcon_answers. Таким образом, чтобы добавить иконку для форумов, предназначенных для вопросов, вы должны добавить класс, например:

body[data-pageapp="forums"] .cForumRow .cForumIcon_answers.ipsItemStatus.ipsItemStatus_large {
	background-image: url('{resource="questionicon.png" app="core" location="front"}');
}