http://dless.rusff.me/ С любовью от Зефира ru-ru Thu, 03 Apr 2014 16:22:55 +0400 MyBB/mybb.ru http://dless.rusff.me/viewtopic.php?pid=3#p3 <p><img class="postimg" loading="lazy" src="http://vk.com/images/stickers/65/48.png" alt="http://vk.com/images/stickers/65/48.png" /></p> mybb@mybb.ru (Джи) Thu, 03 Apr 2014 16:22:55 +0400 http://dless.rusff.me/viewtopic.php?pid=3#p3 http://dless.rusff.me/viewtopic.php?pid=2#p2 <div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Свернутый текст</div><blockquote><p>Скидываю просто чтобы не потерять и твои заметки, и статью х) </p><div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">Свернутый текст</div><blockquote><p>Начинаем с верха наш урок - как поставить шапку а) по размеру форума; б) которая шире самого форума. Далее фон форума а) цвет; б) повторяющаяся картинка в) фиксированная картинка. Тело форума, ну тут варианты - цвет и картинка) Футер форума - цвет, картинка и как настроить при фиксированом фоне (как ты на амартии делал). Переходим к наполнению. Как установить иконки -слева или в центре. Цитаты - как сделать фон, фоновую картинку или рамку. Оформление провиля, как настроить, как сделать рамку и пр. Можно к уроку приложить описание основных кодо и как ими пользлваться, к примеру колор - это цвет, ставится через # или ргб)) как-то так)</p> <p>О, я про категории забыл и поля ввода) и менюшки)</p></blockquote></div></blockquote></div><p><span style="display: block; text-align: center">[mod]<strong><span style="font-size: 16px"><span style="font-family: Lucida Console">Введение</span></span></strong>[/mod]</span><br /><span style="display: block; text-align: left">Доброго времени суток, уважаемый читатель! На сей день мы, команда юного Зефира, дадим тебе более подробное описание на самом деле простых вещей css. Сразу скажу, что урок не для ленивых, и вы должны сразу решить для себя, хотите ли вы читать и практиковать свои навыки, али нет. Если да - то рады вас приветствовать, если нет, то на нет и суда нет.&#160; <img class="postimg" loading="lazy" src="http://vk.com/images/stickers/71/48.png" alt="http://vk.com/images/stickers/71/48.png" /> <br />Итак, давай те же обсудим, что входит в наш большой урок.<br /><strong>1.</strong> Мы разберем на большом примере установку разных дизайнов на коды;<br /><strong>2.</strong> Вы сможете просто и наглядно увидеть, как работает этот код с помощью ссылки &quot;Просмотреть код&quot;;<br /><strong>3.</strong> Шаблон кода, как и шаблон дизайна, свободен для использования;<br /><strong>4.</strong> Помимо слов, для вашего саморазвития будет создано приложение, в которое будет входить порядка 20 упражнений, в том числе и установка дизайнов;<br /><strong>5.</strong> Вы получите бесценный опыт в обращении с кодами.<br />Вам интересно? Тогда я вас люблю, продолжайте читать <img class="postimg" loading="lazy" src="http://vk.com/images/stickers/86/48.png" alt="http://vk.com/images/stickers/86/48.png" /> <br />Мне дали немалый список того, что нам нужно пройти в ходе этого урока. Я решила пойти по порядку расположения на форуме - сверху вниз. Итак, читаем содержание:<br /><strong>1.</strong> как установить фон форума а) цвет; б) повторяющаяся картинка; в) фиксированная картинка; <br /><strong>2.</strong> как поставить шапку а) по размеру форума; б) которая шире самого форума;<br /><strong>5.</strong> как установить меню а) фон цветом; б) фон картинкой; в) прозрачный фон;<br /><strong>3.</strong> как установить и отрегулировать тело форума а) цветом; б) картинкой;<br /><strong>4.</strong> как установить категории а) скриптом; б) css-кодом;<br /><strong>5.</strong> как установить иконки а) обтекание слева; б) обтекание справа;<br /><strong>6.</strong> как установить футер/подвал форума а) цвет; б) картинка; и как настроить при фиксированом фоне;<br /><strong>7.</strong> цитаты - как сделать фон, фоновую картинку или рамку;<br /><strong>8.</strong> оформление профиля: как настроить, как сделать рамку и пр;<br /><strong>8.</strong> оформление полей ввода: как настроить, как сделать рамку, фон&#160; пр;<br /><strong>9.</strong> то, что может быть вам полезно.<br />Немало, согласитесь. И этот список исключительно от нашей Нафани, а ещё же есть я, автор сия текста. Так что настраивайтесь, включайте любимую музыку (я пишу эту статью под Billy Talent, например), и внимательно читайте всё, что будет описано ниже. Надеюсь, что на протяжение&#160; всего урока вам не будет скучно <img class="postimg" loading="lazy" src="http://vk.com/images/stickers/64/48.png" alt="http://vk.com/images/stickers/64/48.png" /> <del><span style="font-size: 8px">Ах да. в статье будет много котиков, я их фанат *-*</span></del></span></p> <p><span style="display: block; text-align: left">Для этого урока я подобрала и подправила фэнтезийный (с <a href="http://l2design.ru/" rel="nofollow" target="_blank">l2</a>) шаблон, который мы и будем верстать. Он достаточно сложный, но просто для того, чтобы вам сейчас было трудно, а потом - просто&#160; Смотрим, в общем.<br />*тут таблица и 2 первью*<br />Настраиваемся, настраиваемся на волну и, глубоко вздохнув, читаем дальше.</span></p> <p>[mod]<strong><span style="font-size: 16px"><span style="font-family: Lucida Console">Урок I. Учимся правильно составлять код.</span></span></strong>[/mod]<br /><span style="display: block; text-align: left">Не удивляйтесь, прошу вас. Подготовка кода в некоторой части даже более важная, чем графика. <br />От составленного кода зависит скорость загрузки страницы(количество строк/колонок), поэтому мы будем учиться сжимать код.<br />Также мы будем учиться правильно сортировать код для более быстрого и удобного редактирования.<br />Пока что это все задачи, которые я перед вами поставила. Наверняка песня проиграла буквально минуту, поэтому не тратьте время и руки в ноги - создаем тестовик. <del>Все это умеют делать, надеюсь, что не нужно то объяснять.</del><br />Мой тестовик - <a href="http://dless.rusff.me/">http://dless.rusff.me/</a> <br /><strong>Шаг 1.</strong> Заходим администрирование -&gt; свой стиль. Удаляем <strong>всё</strong> второе окно стилей, а также блок A1 в первом окне. Примерно так должен выглядеть блок с кодом: *ссылка*. Естественно, жмем кнопку &quot;Сохранить&quot;<br /><strong>Шаг 2.</strong>Пришло время разбора кода от и до. Достаточно долгий шаг, набираемся терпения с: <br /><span style="font-style: italic">Подсказка.</span> Можете имзенять комментарии к блокам, называя их как удобно лично вам. Например, для html и body /* Фон */, для ссылок собственно /* Ссылки */ и тд.</span></p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.1 */<br />html, body {margin: 0; padding: 0}</p></blockquote></div><p>Первое, что мы видим. Это дело отвечает за отсутвие внешних и внутренних отступов для элементов, где они не нужны, то есть где нет значения. В этот же блок мы будем устанавливать нужные фоны и настройки дл них.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.2 */<br />.punbb * {margin: 0}</p></blockquote></div><p>Это дело отвечает за... в общем-то не знаю за что, выпендреж ума устраивать не будем. : ) Сюда же мы будем складывать и писать оформление ссылок, наиболее компактное, чем при обычных кодах майбба.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.3 */<br />.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt { padding: 0; list-style: none; }</p></blockquote></div><p>Это дело убирает значки в списках (черные квадратики такие). Если интересно - пробуем, увидите, где и что убирают. Сюда мы приписывать ничего не будем, сносим пока что эту часть во второе окно стилей.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.4 */<br />.punbb img { border:none }</p></blockquote></div><p>Это убирает рамки у изображений. Тут тоже ничего не нужно, сносим во второе окно.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.5 */<br />.punbb .main table { table-layout: fixed; width: 100%; }</p></blockquote></div><p>Это дело устанавливает ширину блока категорий. Кому интересно - пошаманьте, увидите, за что именно отвечает.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A2.6 */<br />.checkfield input[type=&quot;checkbox&quot;], .radiofield input[type=&quot;radio&quot;] {margin: 0 0.3em;}</p></blockquote></div><p>Это чекбоксы. Для непросвященных путь в google. А мы сносим это во второе окно.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>* A2.7 */<br />p[class=&quot;checkfield&quot;] *,<br />div[class=&quot;checkfield&quot;] *,<br />fieldset[class=&quot;radiofield&quot;] * { height: 1.8em; vertical-align: middle }</p></blockquote></div><p>Это те же чекбоксы и радиобоксы. Непросвященные - марш в гугл. Сносим во второе окно.</p></blockquote></div><p>Далее нас ждет текст. Одно из самых важных дел при верстке. Блоки для сноса во второе окно стилей здесь не указаны или указаны с припиской &quot;Сносим во второе окно&quot;. Всё должно быть кроссбраузерно и по стандартам веба. Непросвященные&#160; в гугл, пожалуйста. </p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A3.1 */<br />body { font-size: 100.01%; }</p></blockquote></div><p>Устанавливает размер текста(в т.ч. и ссылок). Оставляем здесь, но сюда ничего не вписываем.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A3.2 */<br />.punbb { font: normal 68.75% verdana, arial, helvetica, sans-serif; }</p></blockquote></div><p>Устанавливает шрифт и размер для всего форума, зависит также и от значения боди.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* 3.3 */<br />.punbb textarea, .punbb input, .punbb select, .punbb optgroup { font: 1em verdana, arial, helvetica, sans-serif }</p></blockquote></div><p>Устанавливает шрифт и размер для формы ответа.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* A3.10 */<br />.punbb a { text-decoration: underline }</p></blockquote></div><p>Важная для нас часть - ссылки. Сюда мы будем приписывать стили для ссылок, в т.ч. и при наведении, и для каких-то определенных классов (например, для оформления ссылок в объяве или некоторых постах)</p></blockquote></div><p>Далее идет блок A4. Не знаю, для чего этот блок предназначен. Можете удалить его и посмотреть, что без него происходит. Сносим во второе окно<br />А сейчас будем разбирать блок B1. Сразу по нему видно (post-content), что отвечает за отображение в темах. Давайте разбираться.</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.1 */<br />.punbb .post-content {padding: 0; margin: 0; width: 100%; overflow: hidden;}</p></blockquote></div><p>Собственно, это часть отвечает за часть поста, где содержится сообщение, т.е. сюда не входит ни профиль, ни дата, ни рейтинг сообщения, ни ссылки. Для саморазвития - припишите значение фона red, посмеемся&#160; <img class="postimg" loading="lazy" src="http://vk.com/images/stickers/71/48.png" alt="http://vk.com/images/stickers/71/48.png" /> Оставляем его в первом окошке</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.2 */<br />.punbb .post-sig dt { display: block; border-top: 1px solid #888; width: 250px; margin: 5px 0; }</p></blockquote></div><p>Эта часть кода - это подпись. Ширина, высота, цвет, расположение - всё регулируется здесь. Оставляем здесь</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.3 */<br />.punbb .post-content p {margin: 0;padding: 0 0 1em 0; line-height: 150%; }</p></blockquote></div><p>Эта часть отвечает за стилизацию каждого абзаца в сообщении. Кто хочет что-то здесь менять - оставляйте, я же предпочту это снести.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.4 */<br />.punbb .post-content img { vertical-align: text-bottom }</p></blockquote></div><p>Тег .post-content img отвечает за изображения в посте. Установленный здесь css-параметр устанавливает расположение текста: он будет расположен по нижнюю границу изображения. Ну а вообще непонятно</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.5 */<br />.punbb .post-content img.postimg {vertical-align: middle;}</p></blockquote></div><p>Хм. И тут я начал сомневаться насчет предыдущего своего высказывания, так как именно <em class="bbuline">эта</em> часть отвечает за изображения в посте. По css-параметру мы мгновенно определяем его правдоподобность: текст расположен по середине относительно изображения в посте. Итак, значит опровергаем предыдущий пункт. Кто догадается, за что он отвечает - 100 Зефирок от меня)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.6 */<br />.punbb .post-content .blockcode, .punbb .post-content blockquote { width: 100%; overflow: hidden;}</p></blockquote></div><p>Эта часть кода отвечает за цитаты в сообщениях.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.7 */<br />.punbb .post-content .scrollbox {width: 100%;overflow: auto;}</p></blockquote></div><p>Эта часть (по моим предположениям) отвечает по большей части за коды, ибо scrollbox - прокручиваемый контент.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.8 */<br />.punbb .post-content .quote-box, .punbb .post-content .code-box {margin: 0.4em 1.8em 1.4em 1.8em;padding: 1em; border-style: solid; border-width: 1px; }</p></blockquote></div><p>Здесь мы будем оформлять цитаты и коды.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B1.9 */<br />.punbb .quote-box cite, .punbb .code-box strong.legend { display: block; padding-bottom: 0.7em; font-size: 1.1em; font-weight: bold; font-style: normal; margin: 0; }</p></blockquote></div><p>Эта часть, не сложно догадаться, отвечает за названия блоков кода и цитаты: &quot;Цитата&quot;, &quot;Код&quot;, &quot;Написал(а) кто-то&quot;</p></blockquote></div><p>B2 Information boxes<br />Я не знаю, за что это отвечает, ну да ладно. Кто знает - призовые 150 Зефирок. с:</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>.punbb .linkst {float: left; position: relative; width: 100%; font-size: 1.1em; height: 0; }</p></blockquote></div><p>Заходим в темы и видим: &quot;Страница 1 Ответить&quot;, за что и отвечает данный код</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.2 */<br />.multipage { margin-top: 3em; }</p></blockquote></div><p>Этот код опускает страницу темы вниз. Для любопытных - поставьте значение 0 или любое другое.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.3 */<br />.linkst .pagelink {position: absolute; top: -4em; left: 1em; width: 24em; }<br />/* B3.4 */<br />.linkst .postlink { position: absolute; top: -4em; right: 1em; width: 16em; text-align: right; font-weight: bold; }</p></blockquote></div><p>Собственно расположение &quot;Страница 1&#160; Ответить&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.5 */<br />.punbb .linksb { text-align: right; padding: 0.4em 1em 0.5em 1em; font-size: 1.1em; }</p></blockquote></div><p>Это &quot;Страница 1&quot; в конце страницы, перед формой ответа</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.6 */<br />.linksb .pagelink {float: left; width: 24em; text-align: left; }</p></blockquote></div><p>Это &quot;Страница 1&quot; в начале страницы, перед названием темы</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.7 */<br />.linksb .postlink { float: right; width: 16em; font-weight: bold}</p></blockquote></div><p>Это &quot;Ответить&quot;, а также статус для закрытых - &quot;Тема закрыта&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* B3.8 */<br />.subscribelink {clear:both; padding-top: 0.3em; padding-bottom: 0.5em; }</p></blockquote></div><p>Ссылка в конце страницы &quot;Подписаться и отслеживать тему&quot;.</p></blockquote></div> <p>Блок C - это структура всего форума. Разберемся по уроку.</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>.punbb .formal .container {padding: 1.7em 2.3em 1.1em 2.3em;}</p></blockquote></div><p>Этот блок отвечает за форму ответа: от надписи &quot;Напишите сообщение и нажмите отправить&quot; до кнопок &quot;Отправить&quot; и &quot;Просмотреть&quot;.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.2 */<br />.punbb .formsubmit {padding: 0 0 0 1.7em;margin: 1em 0 0 0;}</p></blockquote></div><p>Этот блок находится внутри блока formal container, в нём находятся поле с кнопками &quot;Ответить&quot; и &quot;Просмотреть&quot;.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.3 */<br />.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {margin: 0 0.6em 0 0}</p></blockquote></div><p>Этот исключительно кнопки &quot;Отправить&quot; и &quot;Просмотреть&quot; и слова &quot;Отправить&quot; и &quot;Просмотреть&quot; находится в поле formsubmit.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.4 */<br />.punbb fieldset {border-style: solid;border-width: 1px;padding: 0 18px 0 18px;margin: 0 0 1em 0}</p></blockquote></div><p>Этот блок отвечает за поле сообщения, от &quot;Напишите сообщение и нажмите отправить&quot; до формы ответа (влюч.), если есть под формой ответа какие-то блоки, то они тоже включены сюда.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.5 */<br />.punbb fieldset legend {padding: 0;margin: 0 0 0 11px;font-size: 1.1em}</p></blockquote></div><p>Это блок с надписью &quot;Напишите сообщение и нажмите отправить&quot;. Тут можно установить фон для неё или скрыть её вообще.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.6 */<br />.punbb fieldset legend span {padding: 0 5px;margin: 0 0 0 -15px;}</p></blockquote></div><p>Стили для самой надписи соответственно.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.7 */<br />.punbb fieldset fieldset {border-style: none;margin: 0;padding: 0 0 8px 0}</p></blockquote></div><p>Не знаю, для кого это написано, но тут дубляж. Может, кто-нибудь раскроет тайну?)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.8 */<br />.punbb .fs-box {padding: 1em 0 0.8em 0;}</p></blockquote></div><p>Это блок формы ответа и панели настроек(называйте её как хотите)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.9 */<br />.punbb .fs-box p, .punbb .fs-box fieldset {padding: 0 0 0.8em 0}</p></blockquote></div><p>fs-box p - это блок формы ответа, почти textarea, если хотите так. Второе - это что-то непонятное.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.10 */<br />.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {float: left;margin-right: 1em;}<br />/* C1.11 */<br />.punbb .inline .infofield {clear:both}<br />/* C1.12 */<br />.punbb .datafield br {display: none}<br />/* C1.13 */<br />.punbb .required label, .punbb .datafield span.input {font-weight: bold}<br />/* C1.14 */<br />.punbb .datafield span.input a {font-weight: normal;}<br />/* C1.15 */<br />.punbb .areafield span.input, .punbb p.longinput span.input {display: block;padding: 0 12em 0 0;height: 100%; /* For IE */}</p></blockquote></div><p>...</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.16 */<br />.punbb textarea, .punbb .longinput input {width: 64%;margin: 0;}</p></blockquote></div><p>Textarea - соответственно поле ввода сообщения, второе - непонятно.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C1.17 */<br />.punbb .hashelp {position: relative;}</p></blockquote></div><p>Это блок в filedset, но ещё до filedset container. Можете поставить фон, увидите, где это. с:</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.1 */<br />.punbb .main .tcl {overflow: hidden;text-align: left;width: 50%;}</p></blockquote></div><p>Этот блок отвечает за ширину контейнера &quot;Форум&quot; на главной странице</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.2 */<br />.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {text-align: center;width: 10%;}</p></blockquote></div><p>Этот блок отвечает за колонки &quot;Тем&quot; - tc2, &quot;Сообщений&quot; - tc3 и за &quot;Выбрать&quot; при модерировании раздела.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.3 */<br />.punbb .main .tcr {overflow: hidden;text-align: left;width: 30%;}</p></blockquote></div><p>Этот блок отвечает за &quot;Последнее сообщение&quot; на главной странице</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.4 */<br />#pun-userlist .main .tcl,<br />#pun-searchtopics .main .tcl,<br />#pun-modviewforum .main .tcl {width: 40%}</p></blockquote></div><p>Этот блок устанавливает на страницах участников, поиска и модерирования раздела первый столбик (&quot;Имя&quot;, &quot;Тема&quot;)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.5 */<br />#pun-userlist .main .tc2,<br />#pun-searchtopics .main .tc2 {text-align: left;width: 20%;}</p></blockquote></div><p>Этот блок устанавливает ширину столбов &quot;Форум&quot; и &quot;Статус&quot; на страницах поиска и участников.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.6 */<br />#pun-debug table .tcl {width: 15%;white-space:normal;}<br />/* C2.7 */<br />#pun-debug .tcr {width: 90%;white-space: normal;}</p></blockquote></div><p>Этот блок тоже отвечает за какую-то колонку, непонятненько)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.8 */<br />#pun-index .tcl h3 {font-size: 1.2em;font-weight: bold;}</p></blockquote></div><p>Этот блок отвечает за название форумов (&quot;Знакомство с Зефиром&quot;, &quot;Правила Зефира&quot; и тд.)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.9 */<br />.punbb td span.youposted {font-weight: bold; margin-left: -1em;position: absolute;}</p></blockquote></div><p>Этот отвечает за неизвестный лично мне спан.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.10 */<br />.punbb td .modlist {display: block;padding-top: 0.3em}</p></blockquote></div><p>..</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.11 */<br />.punbb .main td {border-style: solid none none solid;border-width: 1px 0 0 1px;padding: 0.8em 1em;}</p></blockquote></div><p>Этот блок отвечает за границы и отступы в ячейках таблиц на страницах</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.12 */<br />.punbb .main th {border-style: none none none solid;border-width: 0 0 0 1px;padding: 0.4em 1em 0.4em 1em;}</p></blockquote></div><p>Этот блок отвечает за название ячеек (например, &quot;Форум&quot;, &quot;Тем&quot;, &quot;Сообщений&quot;, &quot;Последнее сообщение&quot;)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.13 */<br />.punbb .main .tcl {border-left-style: none;border-left-width: 0}</p></blockquote></div><p>Отвечает за стиль блоков под &quot;Форум&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.14 */<br />.punbb tbody.hasicon td.tcl {padding-left: 3.2em}</p></blockquote></div><p>Отвечает за отступ слева для ячеек под &quot;Форум&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.15 */<br />.punbb div.icon {border-style: solid;border-width: 0.6em 0.6em 0.6em 0.6em;height: 0;line-height: 0.0;margin-top: 0.1em;width: 0;}</p></blockquote></div><p>Здесь всё очевидно - этот блок отвечает за ячейку с иконкой</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C2.16 */<br />.punbb&#160; table div.icon {font-size: 1.05em;position: absolute;margin-left: -2.2em;}</p></blockquote></div><p>Дополнительные стили для ячейки с иконкой. Собственно, можно их перенести в предыдущий блок - смертельного ничего не произойдет.</p></blockquote></div><p>Блок C3 отвечает за оформление тем непосредственно</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.1 */<br />.punbb .post .container {border-style: none solid solid solid;border-width: 1px;margin-top: -1px;padding-bottom: 1px;}</p></blockquote></div><p>Этот блок отвечает за блок с постом и блок с профилем</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.2 */<br />.punbb .post h3 {border-style: solid solid none solid;border-width: 1px;}</p></blockquote></div><p>Блок H3 - это блок даты и номера поста</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.3 */<br />.punbb .post h3 span {padding: 0.5em 1em;display: block;margin-left: 19em;border-left-style: solid;border-left-width: 1px}</p></blockquote></div><p>Спан включает в себя дату публикации поста и его номера в теме</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.4 */<br />.punbb .post h3 strong {float: right;width: 5em;text-align: right;font-weight: normal;}</p></blockquote></div><p>Этот стиль написан для номера поста</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.5 */<br />.punbb .post .post-author {float: left;width: 19em;margin-top: -1.5em;overflow: hidden;}</p></blockquote></div><p>Этот для профиля, сюда можно вставить фон и настраивать профиль как хочется</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.6 */<br />.punbb .post .post-author ul, .punbb .post .post-author p {padding: 0 1em 1em 1em;line-height: 140%;}</p></blockquote></div><p>Этот отвечает за текст в блоке профиля: его отступы и высоту строки</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.7 */<br />.pa-author {font-size: 1.1em;font-weight: bold;}</p></blockquote></div><p>Стили для ника участника/гостя</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.8 */<br />.pa-author a {text-decoration: none}</p></blockquote></div><p>Стили для ссылок в нике, то есть для участников</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.9 */<br />li.pa-title {padding-bottom: 0.4em;font-weight: bold;}</p></blockquote></div><p>Это - оформление статуса</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>li.pa-online {line-height: 0.8em;border-left-style: solid;border-left-width: 0.7em;padding-left: 0.4em;margin-top: 0.7em;}</p></blockquote></div><p>Этот блок создает квадратик слева от &quot;Активен...&quot;, задает ему отступы и расположение</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.11 */<br />.punbb .post-body {margin-left: 19em;border-left-style: solid; border-left-width: 1px; padding: 0 0 1px 0;}<br />/* C3.12 */<br />.punbb .post-box {padding: 1em;}<br />/*C3.13 */<br />.punbb fieldset .post-box {margin-bottom: 0.8em}</p></blockquote></div><p>Этот блок отвечает за пост непосредственно - его отступ слева и границы.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.14 */<br />.punbb .post-links {margin-left: 19em; border-left-style: solid;border-left-width: 1px;}</p></blockquote></div><p>Эти стили для ссылок &quot;Профиль&quot;, &quot;ЛС&quot;, &quot;Е-майл&quot; и пр.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.15 */<br />.punbb .post-links ul {padding: 0 1em 0 0;height: 2em;line-height: 2em;margin-left: -19em;border-top-style: dashed;border-top-width: 1px;background: transparent;text-align: right;}</p></blockquote></div><p>Этот блок задает расположение ссылок &quot;Профиль&quot;, &quot;ЛС&quot; и пр.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.16 */<br />.punbb .post-links li {display: inline;padding-left: 1em;}</p></blockquote></div><p>Стили для каждой ссылки - расположение в строчку и отступ слева для каждой 1em</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.17 */<br />.pl-email, .pl-website {float: left;}</p></blockquote></div><p>Стили для ссылок &quot;E-mail&quot; и &quot;Вебсайт&quot;, настраивает обтекание слева</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C3.18 */<br />.punbb .clearer {clear: both;height: 0;font-size: 0;}</p></blockquote></div><p>Блок для чистки, скажем так, страницы</p></blockquote></div><p>Блок С4 отвечает за модераторское меню</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C4.1 */<br />.punbb .modmenu .container {padding: 0.5em 1em;text-align: right;}</p></blockquote></div><p>Этот блок отвечает за стили для модераторского меню и ссылок RSS - Atom</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C4.2 */<br />.punbb .modmenu strong, .punbb .modmenu a {height: 1.8em;line-height: 1.8em;}<br />/* C4.3 */<br />.punbb .modmenu .container strong {float: left;}</p></blockquote></div><p>Отвечает непосредственно за выпадающее модераторское меню. Эти два блока можно объединить</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C4.4 */<br />.punbb .modmenu input {margin-left: 1em;}</p></blockquote></div><p>..</p></blockquote></div><p>Блок С5 отвечает за страницу &quot;Информация&quot;</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C5.1 */<br />.punbb .info .container {padding: 0.8em 1em}</p></blockquote></div><p>Блок с текстом ошибки</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C5.2 */<br />.punbb .info .container .backlink {padding-top: 0.8em;}</p></blockquote></div><p>...</p></blockquote></div><p>Блок С6 отвечает как за странице сообщений, так и за профиль.</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.1 */<br />#profile .container {padding-left: 18.6em;}</p></blockquote></div><p>Блок &quot;Сообщения&quot; на странице ЛС и блок с &quot;Имя, пароль и e-mail&quot; на странице профиля</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.2 */<br />#profilenav {float: left; width: 14em;margin-left: -16.3em;display: inline;}</p></blockquote></div><p>Блок &quot;Папки&quot; и &quot;Действия&quot; на странице ЛС и блок &quot;Профиль&quot; на странице профиля</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.3 */<br />#profilenav li {padding-bottom: 0.8em;font-weight: bold;}</p></blockquote></div><p>Соответственно пункты блоков - Входящие, отправленные, Основной, Персональный и тп.</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.4 */<br />#viewprofile ul, #profilenav ul {border-style: solid;border-width: 1px;padding: 1.5em 18px 0.8em 18px;margin: 0 0 1em 0;}</p></blockquote></div><p>Блок с пунктами блоков соответственно (ul выше по званию, чем li)</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.5 */<br />#viewprofile h2, #profilenav h2 {background: transparent;border: none;padding: 0 0 0 0;margin: 0 14px -0.6em 14px;}</p></blockquote></div><p>Названия &quot;Папки&quot;, &quot;Действия&quot; и &quot;Профиль&quot; соответственно</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.6 */<br />#viewprofile h2 span, #profilenav h2 span {padding: 0 5px;position: relative;}</p></blockquote></div><p>Стили для самих слов &quot;Папки&quot;, &quot;Действия&quot;, &quot;Профиль&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C6.7 */<br />#viewprofile li, #setmods dl {padding: 0 0 0 16em; margin-bottom: 0.2em;}<br />/* C6.8 */<br />#viewprofile li span {float: left;width: 14em;margin-left: -16em;padding: 0.5em 1em;font-weight: bold;}<br />/*C6.9 */<br />#setmods dt {float: left;width: 14em;margin-left: -16em;padding: 0.8em 1em;font-weight: bold;display: inline;}<br />/* C6.10 */<br />#viewprofile li strong, #viewprofile li div, #setmods dd {display: block;padding: 0.5em 1em;font-weight: normal;}<br />/* C6.11 */<br />.punbb img.avatardemo {float: right;margin: 0 0 0.8em 1.8em}</p></blockquote></div><p>Отображение профиля от лица гостя(viewprofile) и редактирования со страницы управления (setmods): С6.7 за расположение и отступы строк, С6.8 - С6.10 - за оформление и расположение спан-блоков, С6.11 - за аватар</p></blockquote></div><p>Раздел С7 отвечает за страницу &quot;Участники&quot;</p><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>#pun-userlist .formal, #pun-userlist .formal .container {border-bottom: none;margin-bottom: 0;}</p></blockquote></div><p>.formal отвечает за &quot;Поиск пользователя&quot;, а formal container - за &quot;Поиск и сортировка пользователей&quot;</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>/* C7.2 */<br />#pun-userlist .usertable .container {padding: 0 2.3em 2.3em 2.3em;border-top: none;}</p></blockquote></div><p>Этот блок отвечает за блок со скрытым названием &quot;Пользователи 1 to 1 of 1&quot;, короче - за список юзеров</p></blockquote></div><div class="quote-box quote-main"><blockquote><div class="quote-box quote-main"><blockquote><p>* C7.3 */<br />#pun-userlist .usertable table {border-style: solid;border-width: 1px;}</p></blockquote></div><p>Собственно таблица юзеров</p></blockquote></div><p>Блок D1 отвечает за лого, шапку и её настройки</p><div class="quote-box quote-main"><blockquote><p>ююю</p></blockquote></div> mybb@mybb.ru (Джи) Sat, 29 Mar 2014 09:02:29 +0400 http://dless.rusff.me/viewtopic.php?pid=2#p2