Intellect Board Pro
Система управления форумами
Объявление

30 ноября 2015 года выпущена окончательная версия Intellect Board 3.00! Перейти к скачиванию
Также доступен конвертор данных для IntB 2.22

Для получения новостей о новых версиях подписывайтесь на наши страницы ВКонтакте и в Twitter.

Привет, гость!

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

Некоторые неочевидные особенности использования CSS в IntB

Настройки отображения темы Показывать по сообщений с сортировкой .
Выводить , отправленные .
Одна страница
Распечатать
4X_Pro
Основатель проекта
Всего сообщений: 205
Зарегистрирован: 22 сен 2014, 18:56
Откуда: Москва, Перово
Рейтинг пользователя: 4

0 +
30 сентября 2014, 03:17#1
Некоторые неочевидные возможности 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}
добавляет буквы М и Ж разных цветов.

Критикуя — предлагай, предлагая — обосновывай!
Для тех, кто живет в Интернете — мой блог о Web-разработке.

Одна страница
Распечатать

У вас нет прав для отправки сообщений в эту тему.

0: Контрольная точка "Конец инициализации". Время выполнения: 0.002. Запросов: 8, время запроса: 0.001 (52.56)%. Памяти использовано: 513616 байтов

0: Контрольная точка "Фиксация действия пользователя выполнена". Время выполнения: 0.002. Запросов: 10, время запроса: 0.001 (54.62)%. Памяти использовано: 513944 байтов

0: Контрольная точка "Основное действие выполнено". Время выполнения: 0.005. Запросов: 17, время запроса: 0.003 (50.12)%. Памяти использовано: 631592 байтов

0: Контрольная точка "Вспомогательные действия выполнены". Время выполнения: 0.005. Запросов: 19, время запроса: 0.003 (50.07)%. Памяти использовано: 639248 байтов

0: Контрольная точка "После срабатывания шаблонизатора.". Время выполнения: 0.008. Памяти использовано: 912008 байтов