Делаем "Правила сайта"

[By Tools]

Всем привет, решил сделать небольшой мануал по красивым​

Правилам форума.

Основная информация:

Часть URL: specification (будет отображаться в адресе)
Заголовок: Правила сайта
Описание: Основные правила нашего сайта.
Родительский узел: Какой вам надо
Порядок отображения: Тоже как вам необходимо

Настройки страницы:

Здесь самое главное "HTML-код шаблона". Просто при создании списка, нумерованного или маркированного, да и списка определений, все равно не будет его правильного отображения на вновь созданной странице. Но мы подключим для него стили и будет нормально.
Вставляем туда приплизительно такой текст:

<div class="specification">
<div class="specification note comment-note">
<p>Данные правила действуют на всем форуме. В отдельных категориях и разделах возможно наличие собственных правил, которые уточняют и детализируют  правила поведения в них. При этом данные правила остаются обязательными в любом случае.</p>
<p>Правила вводятся для создания комфортной и конструктивной атмосферы общения. Если Вас не устраивает установленная форма общения, воздержитесь от участия в данной форуме.</p>
</div>
<ol>
<li>Регистрация пользователей.
<ol>
<li>Регистрируясь на форуме, пользователь соглашается выполнять данные Правила.</li>
<li>Для регистрации на форуме пользователь должен предоставить действующий адрес электронной почты. Мы гарантируем конфиденциальность указанной информации.</li>
<li>Выбор имени пользователя (логин/login) является вашим исключительным правом. Администрация оставляет за собой право принять меры к прекращению использования логина, если его использование нарушает общепринятые моральные и этические нормы или является оскорбительным для других пользователей форума. Запрещена регистрация логина, схожим с уже существующими до степени, которые могут ввести в заблуждение других пользователей форума.</li>
<li>Запрещена неоднократная регистрация одним пользователем, вне зависимости от целей, с которыми такая регистрация проводится. Данное нарушение является крайне серьезным и ведет к блокированию всех учетных записей.</li>
<li>Если вы не проявляете активность на форуме в течение длительного времени, ваша учетная запись может быть удалена.</li>
</ol></li>
<li>Порядок поведения на форуме.
<ol>
<li>Общение на форуме строится на принципах общепринятой морали и сетевого этикета.</li>
<li>Строго запрещено использование нецензурных слов, брани, оскорбительных выражений, в независимости от того, в каком виде и кому они были адресованы. В том числе при подмене букв символами.</li>
<li>Категорически запрещается любая реклама, в том числе реклама интернет-проектов (за исключением случаев предварительного согласования с администрацией).</li>
<li>Ваша подпись на форуме не может быть длиннее 2-ух строк. К ней предъявляются  те же требования, что и к сообщениям на форуме.</li>
</ol></li>
<li>Публикация сообщений.
<ol>
<li>Название темы должно быть информативным, максимально четко отражая смысл проблемы.</li>
<li>Перед созданием новой темы убедитесь, что вы создаете ее в форуме соответствующей тематики, а также постарайтесь убедиться в том, что данный вопрос не обсуждался ранее.</li>
<li>Запрещено создание одинаковых тем в разных разделах и помещение одинаковых по смыслу сообщений в разные темы.</li>
<li>Старайтесь не делать грамматических ошибок в сообщениях – это создаст негативное впечатление о вас.</li>
</ol></li>
<li>Отношения между пользователями и администрацией.
<ol>
<li>В своих действиях администрация форума руководствуется здравым смыслом и внутренними правилами управления форумом.</li>
<li>Обсуждение действий администрации (администраторов и модераторов форума) категорически запрещается в любых форумах и темах, за исключением специализированного форума, предназначенного для обсуждения всех аспектов работы портала и всего форума.
</li>
<li>Администрация оставляет за собой право изменять правила с последующим уведомлением об этом пользователей форума. Все изменения и новации на форуме производятся с учетом мнений и интересов пользователей.</li>
</ol></li></ol>
</div>

Потом или предварительно отредактируйте его под свой сайт, это будет как шаблон.
За тем в EXTRA.css, вставляем:

.specification ol li:before {
  content:counters(item,".") ". ";
  counter-increment:item;
  font-weight: bold;
}
.specification ol {
  counter-reset:item;
  margin: 10px;
}
.specification ol li {
  display:block;
  margin-left: 10px;
  font-weight: bold;
}
.specification ol li li {
  margin-left: 45px;
  padding: 0 0 3px;
  font-weight: normal;
  text-indent: -25px;
}
.specification .comment-note {
  color: red;
  font-size: 0.9em;
  padding: 10px;
}
.specification .note {
  background: url("img/red.png") no-repeat scroll 10px 50% rgba(0, 0, 0, 0);
  min-height: 32px;
  padding: 10px 10px 10px 52px;
  border: 1px solid #ff0000;
  border-radius: 3px;
  margin: 5px 10px 20px;
}

Что у нас получилось:
http://i.chitachok/MueUFmN.png​