Рецепты и секреты CSS для IntB

Некоторые неочевидные возможности CSS в IntB:
1. Весь контент IntB обернут в <div id="ib_all"> и все селекторы CSS начинаются с #ib_all, чтобы избежать конфликтов имен с CSS при интеграции с другими проектами.
2. Все выводимые внутри блока content данные оборачиваются в <div id="модуль_действие">. Поэтому если требуется изменить вид какого-то класса только для каких-то определенных действий, можно добавить #модуль_действие в селектор. Например, мы хотим покрасить кнопку отправки формы (button внутри <div class="submit">) для формы редактирования профиля пользователя (действие update модуля user) в красный цвет. В этом случае пишем:
#ib_all #user_update .submit { background-color: #fcc }
3. Все темы и разделы оборачиваются в <div class="ид_форума ид_темы">. Поэтому при необходимости можно аналогично изменить правило для отображения конкретного раздела или темы. Так, например, код
#ib_all .topic5 .submit { background-color: #fcc }
покрасит в красный цвет кнопку формы отправки ответа только в теме №5.
4. На многих форумах для отображения статуса пользователя используются графические картинки (звездочки, погоны и т.п.). В IntB это тоже возможно, и делается это с помощью CSS. Для этого нужно определить правила для классов вида groupуровень: #ib_all .group100 { background: url(путь_к_картинке_новичков) bottom no-repeat; line-height: 200% } .... #ib_all .group1000 { background: url(путь_к_картинке_админов) bottom no-repeat; line-height: 200% }
В зависимости от дизайна может потребоваться увеличить/уменьшить line-height.
5. При выводе пользователей в сообщениях на форуме (а в будущем и в списке друзей) прописывается класс с указанием его пола. Соответственно, можно задавать правила, которые будут влиять на то, как отображается имя пользователя в зависимости от пола. Также можно использовать псевдоэлементы before и after для добавления каких-либо эффектов, например: #ib_all .post .pu a.male:after { content: 'М'; color: #003; padding: 5px; font-size: 80%; font-weight: normal } #ib_all .post .pu a.female:after { content: 'Ж'; color: #FCC; padding: 5px; font-size: 80%; font-weight: normal}
добавляет буквы М и Ж разных цветов.