Emeralde, вам не стоит распыляться. Выберите себе систему изучения, раз вы решили продираться через эти дебри качественно, и начинайте методично преодолевать ступень знаний за ступенью.
Представьте себе. Сервис MyBB - это город. В нем есть районы (это партнерские сервисы MyBB), а в районах - гигантские многоквартирные дома, которые в нашей аналогии являются доменами, где каждая квартира - отдельный форум, живущий по адресу: город MyBB (форум располагается на серверах данного сервиса), район Центральный (если это один из домов-доменов MyBB), дом такой-то (конкретный домен), номер квартиры - такой-то (название форума):
Каждая квартира, называемая форумом, это в общем понимании сайт. И как в любой квартире есть отдельные помещения, так на форуме (сайте) есть отдельные страницы. Вы можете по своему усмотрению обставить квартиру, сделав в ней ремонт в едином стиле (поставив дизайн, общий для всех страниц форума), наполнив мебелью (расположив информацию на отдельных страницах (разделах, форумах, темах, постах) с разным назначением) и украсив шторами, коврами и прочими мелочами (внешний вид отдельных элементов на страницах).
Точно также, как для ремонтных работ необходимы определенный алгоритм и правила, так и для оформления форума нужно придерживаться последовательности действий и правил, по которым форум поймет, что вы от него хотите. Чтобы только поклеенные обои не отвалились, вы не открываете окна, пока стены сами не высохнут. Аналогично для форума необходимо чтобы, например, графика, которую вы прописываете в предназначенных для этого местах Админки, была на понятном форуму языке.
Форум, в отличие от человека, понимает не русский или английский языки. Он знает только HTML. И ваша задача, как администратора своей собственной квартиры, научиться разговаривать на понятном форуму языке. Этот язык, как и любой другой в мире, имеет свой собственный синтаксис. Поэтому не стоит изменять никаких "закорючек" в предложенных вам кодах. Лучше пойти и почитать, что каждая из закорючек значит, почему она стоит именно в этом месте и что она сообщает форуму, стоя обособленно или в группе с другими закорючками. Разобравшись с синтаксисом, переходите к "орфографии" и пополнению "словарного запаса".
Теперь пару слов о структуре страниц.
Представьте себе матрешку, от самой большой, внешней, содержащей в себе вложенные, и до самой крохотной. Точно такая же структура присутствует и на любой странице. Блоки с различными элементами вкладываются друг в друга, чтобы создать группы или подчинить несколько элементов одному набору правил.
Посмотрите на свою главную страницу форума.
Все, что вы на ней видите, помещено в самую большую матрешку по имени html. Следующая матрешка такая же большая, она тоже занимает все пространство страницы и содержит в себе всех последующих матрешек. Называется она body. Глубже на один слой идет еще одна большая матрешка - #pun_wrap. Она тоже содержит в себе все последующие матрешки. Следом, чуть более мелкая - #pun. В ней помещены все матрешки, отвечающие за тело форума. И так еще очень долго и ветвисто можно следовать по этому дереву из матрешек, изучая, какая из них внешняя, какая внутренняя, следовательно, какая родительская, а какая дочерняя.
Возможно, вы спросите, зачем столько вложенных друг в друга одинаковых матрешек? Отвечу. Чтобы можно было максимально гибко настроить внешний вид вашего форума. Ведь вам же не понравится, если побеленными будут и потолок, и стены, и пол, и окна с дверью, правда? Вам захочется, чтобы на стенах были обои, на полу - линолеум, а на окнах - шторы. Чтобы обеспечить возможность разнообразия "отделочных материалов", необходимо заготовить места, позволяющие разграничить установку разнообразных "отделочных элементов".
Итак, структура понятна. Перейдем к управлению.
В Админке форума есть всего два места, через которые вы можете "общаться" с форумом. Это
Администрирование → Свой стиль (А-СС) |
Рисунок 1 |
Администрирование → Настройки (А-Н) |
Рисунок 2 |
В А-СС располагаются коды CSS, называемые каскадными таблицами (правила поведения наших матрешек), согласно которым форум знает, какого размера шрифт должнет быть у обычного текста, как должны быть оформлены ссылки, какого цвета заголовки на страницах тем, какой ширины форум и какие картинки, какого размера и в каком месте используются для оформления внешнего вида всех без исключения страниц форума. Абсолютно все, что относится к структуре (Администрирование → Свой стиль → Структура стиля (А-СС-СС)) и цветам (Администрирование → Свой стиль → Цвета стиля (А-СС-ЦС)) форума прописано в этих двух окнах. Прописано правилами верстки каскадных таблиц (CSS).
В А-Н есть несколько окон, куда можно поместить коды.
1. Это так называемый "HTML-верх". Туда преимущественно помещают коды стиля (такие же, как и на странице А-СС). |
Рисунок 3 |
2. А также окно "HTML-низ". Здесь располагают скрипты (коды, отвечающие за функциональность форума). | См. рисунок 3. |
3. "Правила". Окно, в которое можно поместить текст, выводимый пользователю в течение регистрации. |
Рисунок 4 |
4. "Объявление". Место, обычно располагаемое после логотипа и групп ссылок, называемых навигационной панелью ("Форум" "Участники" "Поиск" "Профиль"...) и пользовательской панелью ("Новые сообщения" "Активные темы" "Темы без ответов"...), но до строки приветствия: "Привет, Emeralde. Ваш последний визит: Сегодня 21:20:59." Сюда можно вставлять таблицы с новостями, анонсами, координатами администрации, картинки, рекламу, баннеры и прочие вещи. |
Рисунок 5
Рисунок 5.1 |
5. "Форма ответа". Сюда помещаются коды, которые помогают дополнительно обустроить форму быстрого ответа, отображаемую в каждой теме. |
Рисунок 6 |
Во всех этих окнах работает HTML, и коды, которые туда помещаются, должны быть оформлены согласно синтаксису этого языка. Например, коды стиля (каскадные таблицы или иначе CSS) обязаны помещаться внутри тегов стиля:
<style type="text/css">коды стиля</style>
style - стиль, то есть внешний вид форума, каскадные таблицы CSS
В треугольные скобки заключен начальный тег, и в такие же треугольные скобки - конечный тег. О том, что это конечный тег, говорит слеш, которые всегда стоит первым символом внутри скобок, перед названием тега, в данном случае style.
Коды скриптов, как правило, живущих в HTML-низе, обязаны заключаться в иные теги:
<script type="text/javascript">код скрипта</script>
Здесь, как видно, общие правила те же: в закрывающем теге первым символом в скобках поставлен слеш, давая понять, что код скрипта завершен, но вместо style (стиля) применяется иное название тега: script - скрипт.
По этим характерным признакам можно отличить один тип кодов от других и впредь не путать ни сами коды, ни их назначение.
Помимо Админки, где действует HTML, есть еще и сообщения, набираемые в форме быстрого ответа. Здесь уже работают так называемые bb-теги, которые являются аналогами html-тегов, но, как вам уже объяснил господин Дефф, не позволяющие случайной ошибке в синтаксисе покоробить или даже запороть весь форум. bb-теги, если продолжать серию аналогий, это репродукции картин великих художников. html-теги - оригинальные картины - далеко не все имеют копии-репродукции - bb-теги, а их вид несколько отличается от оригинала. Администратор сервиса (не форума) волен создавать "репродукции" тех html-тегов, которые, на его взгляд, наиболее востребованы для пользователей его ресурса. Набор bb-тегов зачастую одинаков: как и в реальной жизни есть всемирно признанные шедевры искусства, на которые великое множество раз писались репродукции, и которые в итоге вошли в сборники работ известнейших художников мира и пользуются популярностью у подавляющего большинства пользователей.
bb-теги, в отличие от html-тегов, обрамлены в квадратные скобки, но точно так же требуют ответных частей - закрывающих тегов, обозначеных слешем перед названием тега:
<img src="http://forumavatars.ru/img/avatars/0000/14/1c/31687-1381335330.jpg"></img>
[img]http://forumavatars.ru/img/avatars/0000/14/1c/31687-1381335330.jpg[/img]
Первый пример - html-тег картинки. Второй - его bb-код аналог. Первый работает в html-пространстве (Админке), второй - в сообщениях, и имеет более простую форму записи, чем оригинал.
Но вернемся в Админку и к тому, как можно влиять на внешний вид форума.
Мало знать, что существуют блоки-матрешки, из которых состоит любая страница форума. Чтобы ее видоизменить, нужно иметь представление, какие команды можно задавать нашим матрешкам и как. Здесь тоже необходимо принять к сведению и выучить синтаксис обращения.
1. Прежде всего, нужно точно определить, какая из матрешек нам нужна.
2. Следующим шагом выяснить, как зовут эту матрешку (имя матрешки - это так называемый селектор).
3. Затем выбрать действие, которое необходимо произвести над матрешкой, или иными словами, какие параметры или свойства данной матрешки требуется изменить - передвинуть по странице, поменять размер, форму, цвет и т.д.
4. Найти, как звучат эти параметры на языке html
5. И наконец, узнать, какие значения для выбранных параметров возможны и подходят для решения поставленной задачи.
Итак:
селектор {
параметр: значение;
}
Все, что попадает между открытой и закрытой фигурными скобками и оформлено согласно синтактису, воспринимается набором правил, по которому браузер определяет, как нужно видоизменить элемент страницы, идентифицированный благодаря селектору, приведенному перед фигурными скобками.
После каждого параметра обязательно двоеточие, дающее понять, что далее последует перечень значений (значений в некоторых случаях может быть несколько), которые должен принять этот параметр.
Например, мы хотим изменить ширину форума, сделав ее 750px. Определяем, что элемент страницы, вмещающий в себя тело форума, идентифицируется по селектору #pun. Находим, что параметр, способный влиять на ширину, звучит как width. Зная, какое значение нам нужно прописать этому параметру, мы можем составить код:
Если мы намерены разместить этот код в Администрировании → Свой стиль → Структура стиля (в первое окно со структурой, потому что данные изменения внешнего вида элемента относятся не к цветовым решениям, а к стурктуре), то код полностью готов к применению, его нужно лишь вставить в окно к другим кодам (как правило в конец окна). Если же есть необходимость поместить код в Администрировании → Настройки → html-верх, то как и писалось раньше, код необходимо обернуть в теги стиля:
<style type="text/css">
#pun {
width: 750px;
}
</style>
Теперь остается только изучить, какая стандарная мебель имеется в квартире (элементы страниц, идентифицируемые по селекторам), какие ремонтные, дизайнерские и технологические изменения возможны над внешним видом помещений и расставленными по квартире предметами мебели (параметры элементов страниц) и какие краски, шпатели и ткани (значения параметров) есть в наличии, чтобы ваш форум обрел свой неповторимый индивидуальный стиль.