Intellect Board Pro
Расширяемая система управления форумами с открытым исходным кодом
Объявление
Выпущена версия 3.02 с двумя новыми типами разделов: блог и микроблог.
Перейти к скачиванию
Привет, гость!

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

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

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

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}
    добавляет буквы М и Ж разных цветов.

    Критикуя — предлагай, предлагая — обосновывай!
    4xpro.ru — мой личный сайт-мультиблог на Intellect Board.

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

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

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

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

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

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

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