Код:
<!--HTML-->
<span class=guest>Гайд по форуму<span>
<style>
.guest {
color: #442734;
display: block;
font-family: Romul !important;
font-size: 16pt;
position: relative;
text-align: center;
text-shadow: 1px 1px 0 rgba(190, 155, 156, 0.2);
text-transform: uppercase;
top: -26px;
margin-bottom: -46px;
}
</style>
<br>
Код:
<!--HTML-->
<div class="mail">
<div id=descr><center><hr><p>Добро пожаловать на форум <b>Terra Incognita: Homo Ludens</p></b>
<p>Это специальный гайд, который поможет Вам разобраться во всем, что работает, шевелится, перенаправляет и упрощает жизнь пользователей.</p> <hr style="transform: scale(1, -1)"></p></center>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>1.</b> Во-первых, самый важный из вопросов: стрелки прокрутки форума до низа и верха есть. Это зеленые лозы на рамке. Используя колесико мыши или ползунок, прокрутите форум, и Вы увидите, что эти лозы остаются на месте. Нажмите на верхнюю - окажетесь в самом верху форума, на нижнюю - в самом низу. В точках предела прокрутки крайняя стрелка-лоза будет отсутствовать.<br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>2.</b> Второе, на что следует обратить внимание - шапка форума. <br>
</p>
<p>
<b>2.1.</b> Слева расположена книга, при нажатии на которую Вы будете перенаправлены в подфорум "Кодекс", где расположена основная информация по сюжету и сопутствующие материалы мат. части. <br>
</p>
<p>
<b>2.2.</b> В центре оранжевый зрачок, который отправит Вас на Ярмарку подарков. Подробнее узнать о работе магазина и даже получить бесплатный подарок можно будет после принятия анкеты в соответствующей теме. <br>
</p>
<p>
<b>2.3.</b> Последний элемент на этой линии - карта. Конечно, за ней скрывается страница с картой нашего мира. Границы едва заметны и прозрачны, что отражает их реальную значимость. Политически мир не разделен, это единое государство, а указанные границы - всего лишь области влияния тех или иных рас. Шарики внутри территорий - это места расположения порталов, из которых приходят переселенцы в строго отведенное время. У каждого из порталов есть небольшие поселения, их названия Вы можете увидеть при наведении. Краткие описания территорий, названия географических объектов можно увидеть при наведении, прочитать о городах - под картой. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>3.</b> Чуть ниже, правее от блока меню, расположены четыре небольших шарика, при помощи которых можно переключить информационные листы. В числе прочих там можно найти цитаты из постов игроков, которые загружаются пользователями самостоятельно. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>4.</b> Следующее, с чем, вероятно, придется столкнуться пользователям - шаблон анкеты. В теме с шаблонами имеется интерактивный и традиционный шаблоны. В интерактивном шаблоне нужно заполнить все необходимые пункты, после чего отправить сообщение - и тема будет создана самостоятельно. Традиционный шаблон анкеты заполняется обычным способом, отдельной темой в форуме "Регистрация". <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>5.</b> После принятия анкеты игроки получают приветственное письмо, в котором будут дальнейшие инструкции по заполнению профиля и личной темы. Для игры и изучения форума очень полезны будут закладки. В левом верхнем углу форума Вы можете увидеть небольшую книжную закладку, которая будет выдвигаться при наведении. В этом блоке будут расположены все закладки, которые Вы сделаете. Для того, чтобы сделать закладку, нужно дважды кликнуть по посту. На полях, напротив поста, появится небольшое перышко. Нажмите на него, чтобы сохранить, изменить название или удалить закладку. Используя блок закладок, можно быстро переходить к запомненным постам. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>6.</b> В самом низу страницы, прямо на камнях, растет цветок - в его бутоне спрятан редактор картинок, которым Вы можете воспользоваться, чтобы обработать картинку или определить цвет. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>7.</b> В форме ответа имеются дополнительные кнопки, которые помогут вам: сделать отступ для начала параграфа, создать рамочку вокруг картинки для оформления эпизода, оставить секретное сообщение для определенных пользователей, сделать текст с подсказкой при наведении, использовать форму для смены аватара в конкретной теме. <br>
</p>
<p>
<b>7.1.</b> Первая необычная кнопка в меню ответа - "Отступы". Просто поставьте курсор в начало параграфа и нажмите на эту кнопку. <br>
</p>
<p>
<b>7.2.</b> Дальше, после кнопок выравнивания текста, расположена "Рамка вокруг картинки в эпизод". Для того, чтобы скрипт верно сработал, нужно взять картинку размером 500px*177px, разместив её на любом доступном хостинге. Требуется прямая ссылка на изображение, без тегов img, url. Только прямая ссылка.<br>
<div class="quote-box spoiler-box">
<div class="spoiler-header" onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">
<span class="forum">Рамка вокруг картинки в эпизод:</span>
<span class="header-forum-stats">
<br>
</span>
</div>
<blockquote class="">
<center><img src="http://s4.uploads.ru/HpKad.jpg"></a><br><br></center>
</blockquote>
</div>
</p>
<p>
<b>7.3.</b> Следующий значок выглядит как сундук с сокровищами. Это "Спойлер персональной информации". Нажмите на кнопку и введите ники адресатов, которые смогут увидеть сообщение. В спойлер можно заключить сообщение. Его увидят только перечисленные пользователи.<br>
</p>
<p>
<b>7.4. </b>Дополнительные возможности кнопки "изображение". При наведении на кнопку появляются дополнительные параметры в виде центрирования текста. Это "обтекание текста картинкой" справа и слева соответственно. Используется точно так же, как и обычный img. Для того, чтобы картинка расположилась слева, текст справа - нажмите левую иконку; для картинки справа, текста слева - правую. <br>
</p>
<p>
<b>7.5.</b> Зеленый плюс - "Всплывающая подсказка". Используйте, чтобы сделать подсказку при наведении. <br>
</p>
<p>
<b>7.6.</b> Последнее в ряду - это "Маска профиля". Она предназначена для того, чтобы сменить аватар, статус, ник и подпись в отдельном сообщении. Заполните все поля, или только те, которые необходимы, и нажмите на кнопку "Вставить маску". Полученный код может быть в самом начале или в конце сообщения, он не требует отступа от текста и красной строки. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>8.</b> Вверху форума, у самого названия, на ветке дерева сидит зеленый жук. Точно не могу припомнить, что он делает. Кажется, для того, чтобы он заработал, нужно подключить динамики и активировать то, что он скрывает. <br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>9.</b> Где-то еще есть ссылка на "Тайную страницу". Неизвестно, где, зато известно, что на странице есть много всякого, что стоит потрогать.<br>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>10.</b> Полумесяц у профиля игрока - не просто элемент декора. Он несет и важный функционал - открывает личную тему персонажа без перехода с текущей страницы.
</p>
<div class="quote-box spoiler-box">
<div class="spoiler-header visible" onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">
<span class="forum">Открываем личную страницу:</span>
<span class="header-forum-stats">
<br>
</span>
</div>
<blockquote class="">
<center><img src="http://s3.uploads.ru/plMGY.jpg"></a></center>
</blockquote>
</div>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>11.</b> Администрация сочла необходимым заранее подстраховать игроков в вопросе возможной потери постов в случае непредвиденных обстоятельств. Написанное сохраняется при отправке и становится доступным при нажатии стрелки в форме ответа. В Mozilla Firefox, при уходе со страницы и возврате на неё по кнопкам Back/Next, нужно обновлять страницу для возникновения кнопки с сохранённой информацией.
</p>
<div class="quote-box spoiler-box">
<div class="spoiler-header visible" onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">
<span class="forum">Возвращаем сохраненный пост:</span>
<span class="header-forum-stats">
<br>
</span>
</div>
<blockquote class="">
<center><img src="http://s4.uploads.ru/Fj3WR.jpg"></a></center>
</blockquote>
</div>
</p>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>12.</b> На форуме есть возможность изменить цвет основного текста и фона форума, чтобы сделать его более удобочитаемым. Для этого достаточно кликнуть на небольшого паучка, повисшего с правого края шапки. Для изменения размеров текста воспользуйтесь шкалой, находящейся в первом сообщении каждой темы под репутацией поста.
</p>
<div class="quote-box spoiler-box">
<div class="spoiler-header visible" onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">
<span class="forum">Цвет и размер шрифта, фон форума:</span>
<span class="header-forum-stats">
<br>
</span>
</div>
<blockquote class="">
<center><img src="http://sg.uploads.ru/1j0oX.png"></a></center>
<center><img src="http://sh.uploads.ru/tGWY1.png"></a></center>
</blockquote>
</div>
<p>
<img src="http://forumstatic.ru/files/0017/50/e4/48420.png" alt="" width="16" height="16" /> <b>13.</b> Пользователи форума теперь могут увидеть в правом нижнем углу блок с интересной информацией. Каждые несколько часов там появляются любопытные факты об истории, языке, расах и форуме в целом.
</p>
<div class="quote-box spoiler-box">
<div class="spoiler-header visible" onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">
<span class="forum">Блок с информацией:</span>
<span class="header-forum-stats">
<br>
</span>
</div>
<blockquote class="">
<center><img src="http://s8.uploads.ru/RSFEi.png"></a></center>
</blockquote>
</div>
</div></div>
<style>
.mail
{
border-width: 90px;
border-style: solid;
border-color: rgba(0, 0, 0, 0) !important;
border-image: url('http://forumstatic.ru/files/0017/7f/09/74498.png') 90 90 90 90 fill;
margin-top: -38px;
}
#descr {
color: #36161f;
font-size: 0.75rem;
line-height: 1.1rem;
margin: -57px;
position: relative;
text-align: justify;
text-shadow: 1px -1px 0 rgba(190, 155, 156, 0.2);
}
.spoiler-box blockquote.visible img {
max-width: 380px;
}
</style>
