Готовимся к работе

Написание своего собственного стиля, имея на руках лишь шаблон общей системы форума сервиса MYBB, - занятие долгое и трудоемкое, но, тем не менее, ужасно увлекательное и, что самое главное,  - вполне реальное. Но смысл в нём? Мы не состоим в команде разработчиков сервиса и даже не являемся профессиональными веб-дизайнерами или верстальщиками страниц. Мы просто хотим сделать красивую и удобную обложку для своего форума, ведь так? А значит – не стоит углубляться в дебри. Начнем с простого – с переделки уже сделанного стиля, любезно предложенного каталогом MYBB.
Примечание: Просмотреть стили можно по адресу - http://punff.ru/style/

После выбора нужного нам дизайна, мы отправляемся к себе на форум, ожидающий поклейки новых обоев и в Администрирование – Настройки проставляем тот вариант дизайна, что выбрали выше для переработки. Форум окрашивается в нужные цвета, которые – кто знает? – после окончания работы останутся такими же с незначительными изменениями, либо – кардинально переменятся, да так, что господа дизайнеры не узнаю своего детища. Мой поклон Paw…
Вводим в адресную строку пустой вкладки:

XX1 – адрес вашего форума ( к примеру – tainaart.rusff.me)
XX2 – название выбранного стиля (к примеру – MYBB GreenFox)
Следовательно, мы должны ввести

В ходе первой манипуляции мы получаем полный код структуры, в ходе второй – код цветового решения форума. Педантично и аккуратно копируем это в ВОРДовский файл и складываем в папочку «Моя работа в CSS». В данных документах мы и будем работать, проверяя каждый шаг и старательно сохраняя удачные переработки. Удобнее всего поместить два кода в два разных документа. Почему так – я поясню позже, и вы со мною согласитесь.

Итак, подготовка завершена. Мы приступаем уже непосредственно к издевательствам над нашим форумом. Всегда советую вести разработки на тестовом – мало ли что. Напугать своих игроков дикой расцветкой или пропажей форума – конечно, весело, но мне как-то стремно. Да и обливаться каждый раз при малейшей ошибке ледяным потом не очень-то приятно.

Отредактировано Диос (2016-01-12 03:18:57)

Шрифт

Раздел А3 определяет параметры шрифта на вашем форуме.

Каждый их пунктов – А3.1, А3.2, А3.3 и так далее – отвечает за шрифтовые наборы в определенном элементе или группе элементов форума.
Пример:

Первая строка – как водится – кодировка пункта. В этом случае это – А3.3 .
Вторая строка - .punbb textarea, .punbb input, … - в состоянии показать нам, в каком именно элементе вы нынче можете регулировать шрифт.
Третья строка – уже непосредственно задает параметры шрифтовой схемы.
Разберем поподробней:
1em – исходя из размерностей, приведенных в начале урока, это высота шрифта
verdana, arial, helvetica, sans-serif – семейство шрифтов. На данный момент их четыре. Вы можете добавить свои, заменить существующие или вообще – взять и оставить всего лишь один. Если вы придирчиво произведете усечение всех семейств до одного во всех пунктах раздела A3 Text setur, то ваш форум от начала и до конца будет во всех элементах отображать одинаковый шрифт. Лично мне это кажется весьма удобным и гармоничным.
Разберем еще один случай:

Здесь мы видим, как в одном пункте сгруппированы условия для нескольких элементов. Разглядывая код, параллельно косим глазом в ту шпаргалку, что я дал вам в самом начале – с подробной расшифровкой параметров и их значений. Из тьмы разума выплывает осознание, что font-weight: bold; - это утолщенный шрифт, а font-size: 1 em; - всё та же высота букв.

Границы

Я скажу, и, наверное, вы со мною согласитесь, что границы – неотъемлемая и весьма важная часть общего дизайна форума. От себя могу добавить – что случалось и такое, когда великолепно подобранное оформление банально портила плохая работа с границами. Теряется всё впечатление и просто не хочется даже сидеть на ролевой. Обидно, да? Чтобы такого не случилось, мы сейчас пройдемся основательно по границам.
Работа ведется всё в том же разделе А5:

Пересматривать пункты мы начнем с А5.7, когда перед глазами запестрело слово border. Это ключевое слово в разборе полетов в отношении границ, поскольку – оно и есть граница, только по-английски. Вспомним, что CSS америкашка, потому и трепимся с ним исключительно на этом языке.
  Пункт А5.8 – отвечает за обводку  элементов и непосредственно сообщений.
  Пункт А5.9 – отвечает за обводку элементов форума. Сами «контейнера», где и располагается всё остальное. Крайне важный пункт.
  Пункт А5.10 – отвечает за обводку полос с названием локации на странице со списком тем, полосы статистики, категорий, полос профиля.
  Пункт А5.11 – отвечает за обводку полос категорий.
Далее – все уже знакомо, если сверяться со шпаргалкой:
border-width: 1px 1px 0px 1px; - толщина каждой линии из четырех, поскольку любой элемент вписывается в прямоугольник.
border-style: solid solid none solid; - стиль каждой линии из четырех.
padding: 5px 1em 7px 1em; - линия отбивки материнского объекта.
Кроме того, одна из границ, что не входит в раздел А5, а принадлежит разделу В1 – полоска, разграничивающая текст в посте и подпись участника. С ней также можно извращаться, сколько душе будет угодно.

Всё те же параметры: ширина (width - протяженность полосы по странице сообщения), отступ (margin - отбивка), стиль (border-top - здесь описаны и толщина, и стиль, и цвет), отображение (display).
К разделу С2 принадлежит также такая вариация границ, как рамки между графами нам главной странице форума.
Код:

Рекламный баннер

Часто бывает так, что рекламный баннер, чьё размещение вверху справа на шапке(ныне он обитает под названием форума в первой строке) – непременное и обязательное условие существования самого форума, несколько мешает воплощению ваших дизайнерских идей, перекрывая часть рисунка логотипа. Согласен, это некрасиво и раздражает. Но правила сервиса требуют присутствия баннера и потому – нам остается только его переместить. Чуть-чуть. Ибо согласно всё тем же правилам – чрезмерное смещение баннера строго наказуемо. Перестараетесь – Максим Ананьев сделает вашей ролевой харакири, и будет очень обидно.
Кодировка:  /* D1.4 */
Используемая часть кода:

И ее мы переделываем вот в такой вид:

Данный код перемещает баннер посередине форума над шапкой, не перекрывая ее никоим образом. После проделанной манипуляции с кодом мы возвращаемся к разделу А5 и ищем код А5.1, где мы задавали ширину и расположение наших страниц. Вот он:

Теперь отступаем от границ окна браузера сверху чуть-чуть больше, освобождая место для, собственно, размещения рекламного баннера:

Получилось? Должно получиться!

Шлифование и покраска

Итак, ради разнообразия – можете собой немного погордиться, ибо деталь, то бишь форум, мы обточили со всех сторон. С параметрами, определяющими форму и положение форума, мы с грехом пополам разобрались. Теперь стоит вопрос покраски.
Код, который определяет цвета границ, заливки элементов, графические элементы дизайна, носит название «Цвета» и – насколько я могу помнить – сохраняется у нас до поры до времени в отдельном ВОРДовском файле.

Симпатичненько так, и после работы со Структурой – уже даже не пугает. Данный раздел целиком и полностью посвятит себя фоновым рисункам отдельных элементов и цвету отображаемого в них текста.
Общий фон форума:

Не забываем ставить также цвет заливки, поскольку – если у пользователя отключены изображения в браузере – он сумеет узреть на месте вашего красивого фона исключительно один-единственный цвет. Ставьте что-нибудь мягкое, мой совет.

Шапка форума:

Здесь мы можем задать параметры размножения изображения и его положения в месте, которое посредством манипуляций с кодом структуры, мы определили для нашей шапки.

Строка категорий, профиля, темы, статистики:

Меню навигации (Форум – Участники – Поиск – Правила…):

Графа строки «Форум-Тем-Сообщений»:

Заливка цитаты и кода в сообщениях:

Сразу за ним следует отрезок, отвечающий за заливку формы для ввода текста: