Пункт два. Подготовка к работе

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

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

http://XX1/style/XX2/XX2.css
http://XX1/style.XX2/XX2_cs.css

XX1 – адрес вашего форума ( к примеру – https://spring.bestbb.ru)
XX2 – название выбранного стиля (к примеру – MYBB GreenFox)
Следовательно, мы должны ввести

https://spring.bestbb.ru/style/MYBB_GreenFox/MYBB_GreenFox.css
https://spring.bestbb.ru/style/MYBB_GreenFox/MYBB_GreenFox_cs.css

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

Итак, подготовка завершена. Завтра мы приступаем уже непосредственно к издевательствам над нашим форумом. Всегда советую вести разработки на тестовом – мало ли что… Нашорохать своих игроков дикой расцветкой или пропажей форума – конечно, весело, но мне как-то стремно… Да и обливаться каждый раз при малейшей ошибке ледяным потом не очень-то приятно.
Примечание: Центр “Sacrament of Wilderness” предоставляет тестовый форум для нужд своих участников. Заявки – в личку главному администратору, то есть, мне.

Рассматриваем наш код структуры. Самую верхушку:

    /*************************************************************
    A - SETUP
    **************************************************************/

    /* A1 Import the colour scheme
    -------------------------------------------------------------*/

    /* A1.1 */
      @import url(Mybb_Tiare_cs.css);

Здесь нам следует произвести одну маленькую, но глобально важную замену:

  /*************************************************************
    A - SETUP
    **************************************************************/

    /* A1 Import the colour scheme
    -------------------------------------------------------------*/

    /* A1.1 */
      @import url(style_cs.css);

Сохраняем изменения. Форум приобретает узнаваемые оттенки выбранного стиля оформления

Теперь смотрим сохраненный код Структуры. Просто смотрим. Считайте, что мы с ним знакомимся. Здравствуйте, Скимитар, очень приятно…
Помните: CSS американец, он говорит по-английски, писать и разговаривать мы с ним тоже будем по-английски, русский шрифт недопустим. Закоротит и покусает, собака бешеная…
Помалу вспоминаем правила, изложенные в Пункте Первом, про построения кодов. Видим знакомые черты? Конечно, видим. Начинаем понемногу в этом ориентироваться, это не так уж и сложно. Достаточно желания и крутящегося колесика мышки.

Далее работаем пока только с документом Структура.

Положение страниц и размеры форума

Одним из весьма важных параметров вашего форума будет расположение страниц и их ширина. За сии параметры будет ответственен раздел А5:

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

Первый же код раздела – А5.1 – и будет соответствовать параметрам ширины и расположения ваших страниц.

/* A5.1 */
#pun {
  margin: 20px auto auto auto;
  width : 898px;
  padding: 0px 5px 0px 5px;
}

Разберем поподробней.
Первая строка – что? Верно, кодировка пункта, А5.1.
Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Законы веб-дизайна советуют подобный параметры задавать все-таки в процентах – ведь в наше время различия между разрешениями экранов скачут, как белки, у разных пользователей. Скажем, у меня стандартный LG Flatron F700P с разрешением 1024*768. А вот у подруги – плоский монитор с разрешением побольше, следовательно, картинка, которая мне на экране будет в самый раз, у нее будет смотреться заметно меньше по размерам. Чтобы ваш форум одинаково удобен был на экранах у каждого вашего посетителя – следует задавать ширину страниц в процентах. Хотя для установки логотипа или шапки – наиболее прост и удобен метод ширины в процентах. Тогда страница будет жестко закреплена в каждом из разрешений, вместе с установленным графическим элементов (шапкой или лого). Этот способ аккуратней, но опять же – проблемы мониторов и отображений. Выбирайте самостоятельно.
Пятая строка нашего кода – padding – линия отбивки материнского объекта. По сути своей, не углубляясь в ужасы профессиональной верстки – лучше его не трогать. По крайней мере, в данном случае.
Итак, мы смогли с вами соорудить и разместить страницы вашего форума и обработали основные шрифты. Гоним за второй порцией какао и читаем дальше.

Код, который определяет цвета границ, заливки элементов, графические элементы дизайна, носит название «Цвета» и – насколько я могу помнить – сохраняется у нас д опоры до времени в отдельном ВОРДовском файле.
Помолимся великому Билли Гейтсу, положим цветы к иконе Admin’а MYBB, зарежем овцу на алтаре Фотошопа и приступаем к раскраске.

/* CS1 Background and text colours
-------------------------------------------------------------*/

Общий фон форума:

html, body {
   background: url(../../img/Mybb_Tiare/bg.gif) repeat-xy bottom #EFEFEF;
}

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

#pun-title TABLE {
   background: url(../../img/Mybb_Tiare/header.gif) repeat-x top  #940001;
}

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

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background: url(../../img/Mybb_Tiare/h2.gif) #6C0000 repeat-x;
  color: #fff;
  font-size: 1.1em;
  text-align: left;
  font-family: georgia;
  }

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

 /* CS1.8 */
    #pun-navlinks .container {
      background: transparent;
      color: #006699;
      }

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

.punbb th {
      color: #4B4B4B;
      background: url(../../img/Mybb_Tiare/sub.gif) #E8E8E8 repeat-x;
    }

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

  /* CS1.7 */
    .punbb .quote-box, .punbb .code-box {
      background: #E5E5E5;
      color: #111
      }

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

    .punbb textarea, .punbb select, .punbb input {
      background: #E5E5E5;
      color: #111;
      border: 2px solid #fff;
    }