Свой стиль доступен для создания на каждом форуме сервиса. Достаточно перейти в меню "Администрирование" (редактирование стиля доступно только администраторам) и затем выбрать раздел "Стиль".
Перед Вами откроется страница с двумя полями и кодом в них. Первое поле отвечает за расположение элементов форума друг относительно друга и именуется файлом структуры. Второе поле отвечает за цвет и границы элемнтов, оно носит название файл цвета.
Таким образом Вы сможете написать своё собственное оформление. Для этого необходимо знать основы технологии CSS. Для тех, кто слабо владеет этим, небольшое введение.
Код обычно состоит из трёх частей: селектора, параметра и значения. Параметр и значения заключаются в фигурные скобки, сразу после параметра ставится двоеточие, после каждого значения ставится точка с запятой. Если значением является ссылка, то она заключается в обычные скобки. Собирая всё вышесказанное воедино, получаем:
селектор{параметр: значение1; значение2; значение3; url(Адрес ссылкой);}Именно этого принципа необходимо придерживаться при написании исходного кода.
Теперь о том, где брать эти селекторы, параметры и значения. Начнём с конца. Получить полный список различных параметров, а так же их описание можно в словаре: Учебник по CSS (откроется в новом окне). Там же можно найти и все значения, характерные для каждого параметра. Остановимся лишь на двух вещах:
- В процессе работы у Вас возникнет потребность иметь под рукой таблицу веб-цветов. Поэтому, чтоб не отвлекаться от работы, приводим тут ссылку: Палитра Web-цветов (откроется в новом окне).
- Ещё бы мы хотели осветить вопрос хранения графики в интернете. Конечно, есть замечательный сервис Радикал-фото (откроется в новом окне), где все Ваши картинки будут храниться неограниченное количество времени. Однако тут есть одно НО: как и у всех, у этого сервиса тоже бывают сбои, поэтому из-за очередного "перерыва" в работе Вы можете остаться без дизайна форума на неопределённый срок. Чтоб таких "неожиданностей" не случалось рекомендуется загружать графические элементы в тему на форуме, скрытую ото всех, кроме администраторов. Пока работает форум, всё, что Вы "положили" туда будет при Вас!
Теперь переходим к самому важному: где и как узнавать нужный селектор элемента. Будьте внимательны: именно в этом ошибается большая часть пользователей! Ниже приведён список всех селекторов из второго и первого файлов стиля. Находите соответствующие в Вашем стиле и прописывайте для них всё, что посчитаете нужным!
Таблица селекторов файла цвета style_cs.css
| №п/п | Селектор | Описание | Скриншот |
|---|---|---|---|
| /* CS1 Background and text colours | |||
| Элементы без меток | |||
| 1 | body | Основной фон форума. Так называемое тело форума. Иногда используется в паре в виде html, body. Можно так же использовать универсальный селектор - *. | Главная страница:
|
| 2 | #pun | Основная таблица форума. | Таблица форума, верх:
|
| 3 | #pun-title table | Таблица в логотипе форума. | Логотип:
|
| /* CS1.1 */ | |||
| 4 | .punbb .section .container | Все блочные элементы форума, иначе говоря контейнеры. | Блок статистики:
|
| 5 | .punbb .post-body | Тело сообщения. | Сообщение на форуме:
|
| 6 | .punbb .post-links | Пользовательские ссылки в сообщениях (в темах и на странице личных сообщений). | Навигация в сообщениях:
|
| 7 | .punbb td.tc2 | Вторая колонка в главной таблице форума (на всех страницах). | Колонка "Тем":
|
| 8 | .punbb td.tc3 | Третья колонка в главной таблице форума (на всех страницах). | Колонка "Сообщений":
|
| 9 | .punbb .formal fieldset .post-box | Предпросмотр сообщения перед отправкой. | Предпросмотр:
|
| 10 | #viewprofile li strong | Поля с данными в профиле пользователя. | Данные пользователя:
|
| 11 | #viewprofile li div | Блок с аватаркой в профиле пользователя. | Автарка пользователя:
|
| 12 | #setmods dd | Названия форумов (профиль, вкладка "Управление"), на которые пользователь назначен модератором. | Установка прав:
|
| 13 | .punbb .info-box | Информационные блоки на всём форуме. Блоки на странице помощи по BB-code. | Информация при регистрации:
|
| 14 | punbb #pun-main .info-box .legend | Легенды информационных блоков. | Легенда регистраци:
|
| /* CS1.2 */ | |||
| 15 | .punbb .main .container | Главный контейнер форума. С этим селектором связана большая часть элементов форума, поэтому применённый здесь цвет будет основным. | Колонка "Форум":
|
| 16 | .punbb .post .container | Информация об авторе сообщения, рейтинг поста, ссылки профиля. |
Автор сообщения:
|
| 17 | .punbb .post h3 | Ник автора сообщения. | Автор сообщения:
|
| 18 | .punbb-admin #pun-admain .adcontainer | Элементы страниц меню "Администрирование" форума. | Администрирование:
|
| /* CS1.3 */ | |||
| 19 | #pun-stats h2 | Заголовок статистики форума. | Статистика форума:
|
| 20 | .punbb .main h1 | Все заголовки первого уровня на форуме. | Заголовок списка участников:
|
| 21 | .punbb .main h2 | Все заголовки второго уровня на форуме. |
Заголовок категории:
 |
| 22 | #pun-debug h2 | Не виден пользователям сервиса. Не обязателен. | Без скриншота. |
| 23 | .punbb-admin #pun-admain h2 | Все заголовки в меню "Администрирование" форума. | Админ-меню:
|
| /* CS1.4 */ | |||
| 24 | #pun-title | Основной блок логотипа. Полностью совпадает с контейнером логотипа форума. | Блок логотипа:
 |
| 25 | #pun-title .container | Контейнер логотипа форума. | Логотип:
|
| 26 | .punbb .modmenu .container | Модераторское меню в темах форума. |
Модераторское меню:
|
| /* CS1.5 */ | |||
| 27 | .punbb legend span | Надписи в легендах информационных блоков. | Легенда в форме быстрого ответа:
|
| 28 | #viewprofile h2 span | ||
| 29 | #profilenav h2 span | Заголовки списков на страницах личных сообщений и страницах профилей. | Список папок и действий в меню личных сообщений:
 |
| 30 | .punbb-admin #pun-admain legend span | Легенды на страницах меню "Администрирование". | Легенда поля "Информация сервиса":
|
| /* CS1.6 */ | |||
| 31 | .punbb .post h3 span | Заголовок сообщения, содержащий время написания и (или) номер сообщения. | Заголовок сообщения в теме:
|
| 32 | .punbb th | "Шапки" таблиц форума. | "Шапка" таблицы форума, главная страница:
|
| 33 | #viewprofile li | Заголовки пунктов информации в профиле пользователя (видны для гостей). | Пункты информации в профиле пользователя:
|
| 34 | #setmods dl | Название категорий в профиле пользователя, секция "Управление". Доступно для групп "Администратор". | Название категорий при назначении модератором:
|
| /* CS1.7 */ | |||
| 35 | .punbb .quote-box | Блок цитаты в сообщениях. | Цитата пользователя:
|
| 36 | .punbb .code-box | Блок кода в сообщениях. | Код в сообщении:
|
| /* CS1.8 */ | |||
| 37 | #pun-navlinks .container | Главное меню форума. | Главное меню форума:
|
| 38 | .offline li.pa-online strong | Индикатор присутствия пользователя на форуме. Отображается в виде иконки со временем присутствия на форуме. | Индикатор в профиле пользователя:
|
| 39 | .punbb textarea | Текстовые поля на форуме. | Текстовое поле в форме быстрого ответа:
|
| 40 | .punbb select | Выпадающие списки на форуме. | Выпадающий список "модерирование темы":
|
| 41 | .punbb input | Поля ввода данных, а также кнопки на форуме. | Кнопки предпросмотра и отправки сообщения в теме:
|
| Элементы без меток | |||
| 42 | #pun-stats ul.container | ||
| 43 | #pun-stats div.statscon | ||
| 44 | #pun-crumbs2 .container | ||
| 45 | #pun-about .container | ||
| 46 | #pun-title h1 | ||
| 47 | td.tcr a | ||
| 48 | .punbb td.tcl | ||
| 49 | .punbb td.tcr | ||
| 50 | .punbb .main h2 span | ||
| 51 | #pun-stats h2 span | ||