Время от времени вы зададитесь вопросом как изменить стиль некоторого элемента на определённой странице, не меняя аналогичный элемент на других страницах. Например, представим, что вы хотите изменить отображение элемента .ipsPageHeader на странице просмотра темы форума, раскрасив его в другой цвет или изменив размер, но не затрагивать .ipsPageHeader на других страницах.
Добавление класса - неправильный путь
Одним из методов реализации может быть добавление дополнительного класса к элементу при редактировании шаблона просмотра тем и создание стилевого оформления нового класса, используя селектор. Это работает, однако, у этого способа есть серьёзный недостаток - вы изменили стандартный шаблон, а это значит, что IPS4 не сможет его автоматически обновить для вас при обновлении Invision Community до новых версий. По этой причине мы всегда предлагаем вам избегать таких способов.
Использование селекторов страниц - правильный путь
Лучший способ - каждая страница в IPS4 содержит в себе некоторые специальные атрибуты в теге body, идентифицирующие приложение, модуль и контроллер просматриваемой страницы. Вы можете использовать их для написание CSS селектора, предназначенного для целевых страниц. Обращаясь к нашему примеру, мы можем выделить .ipsPageHeader для страницы просмотра темы следующим образом:
body[data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="topic"] .ipsPageHeader {
...стили
}
Это работает, т.к. просмотр темы генерируется контроллером темы в модуле forums приложения форумов. Все страницы в Invision Community состоят из такой же структуры - контроллер/модуль/приложение.
Вы можете смешивать их и сочетать как угодно. Если вы хотите стилизовать заголовки страниц во всём приложении Форумы, вы можете упростить код:
body[data-pageapp="forums"] .ipsPageHeader {
...стили
}
Чтобы узнать правильные значения для написания селектора, перейдите на необходимую страницу, откройте исходный код страницы и найдите тег body - посмотрите на атрибуты data-page*, использованные на этой странице.
Включая подобные стили в файл custom.css вашей темы, вы можете стилизовать элементы на определённых страницах, при этом не создавая проблем для дальнейших обновлений сайта.