A beautiful rules page for your forum

Capybara

Hi! I'm sharing the code for the rules page that I'm using on my new forum. A couple of edits were suggested to me, which I've already made, and now this code is suitable for any forum. You can change the colors as you like — they're conveniently placed at the top of the code

<style>
  .rules-page {
    padding: 24px;
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.55;
  }

  :root {
    --accent: #F18F01;
    --secondary: #efefef;

    --text: var(--body-color);
    --text-muted: var(--muted-color);
    --bg-card: var(--background-color);
    --border: var(--control-bg);
    --radius: 12px;
  }

  @media (prefers-color-scheme: light) {
    .rules-page .section-title {
      color: #808080 !important;
    }
  }

  .rules-page .hero {
    background: var(--bg-card);
    padding: 20px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 24px;
  }

  .rules-page .hero h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
  }

  .rules-page .hero p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 14px;
  }

  .rules-page nav.toc {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .rules-page .toc a {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
  }

  .rules-page .card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 18px;
  }

  .rules-page .section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text);
  }

  .rules-page .rule {
    display: flex;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--control-bg), transparent 30%);
    transition: all .22s ease;
  }

  .rules-page .rule:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }

  .rules-page .rule .icon {
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--control-bg), transparent 35%);
    display: grid;
    place-items: center;
    font-size: 20px;
  }

  .rules-page .rule .title {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--text);
  }

  .rules-page .rule .desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
  }

  .rules-page .notice {
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 14px;
    background: rgba(241,143,1,0.12);
    margin-top: 10px;
    color: var(--text);
  }

  .rules-page .local-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
  }
</style>

<div class="rules-page">

  <div class="hero">
    <h1>Мы за комфортное общение</h1>
    <p>Эта страница регулирует порядок на всех ресурсах проекта</p>
  </div>

  <nav class="toc">
    <a href="#general">Общее</a>
    <a href="#content">Контент</a>
    <a href="#accounts">Аккаунт</a>
    <a href="#links">Реклама</a>
    <a href="#enforce">Блокировка</a>
  </nav>

  <div class="card" id="general">
    <div class="section-title">Общее</div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-handshake" style="color:#4CAF50"></i></div>
      <div>
        <div class="title">Сила в уважении</div>
        <div class="desc">Форум основан на принципах открытости и взаимного уважения. Каждый участник имеет право высказать свою точку зрения — она может не совпадать с мнением остальных. Избегайте провокаций и оскорблений в адрес других пользователей</div>
      </div>
    </div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-comment-slash" style="color:#E57373"></i></div>
      <div>
        <div class="title">Флуд мешает всем</div>
        <div class="desc">Не публикуйте бессмысленные сообщения и спам. Используйте КАПС только для акцентных слов, а не целых предложений. При создании личных тем можно установить запрет на сообщения других пользователей — лишнее удалят модераторы</div>
      </div>
    </div>
  </div>

  <div class="card" id="content">
    <div class="section-title">Контент</div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-ban" style="color:#D81B60"></i></div>
      <div>
        <div class="title">Запрещённые материалы</div>
        <div class="desc">Это порнография, расчленёнка, политика, экстремистская символика и пропаганда ЛГБТ</div>
      </div>
    </div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-masks-theater" style="color:#FFB300"></i></div>
      <div>
        <div class="title">18+ и мат внутри игры</div>
        <div class="desc">Разрешены сексуальные сцены и брань в ролевой, если это допустимо её правилами</div>
      </div>
    </div>
  </div>

  <div class="card" id="accounts">
    <div class="section-title">Аккаунт</div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-user-group" style="color:#7E57C2"></i></div>
      <div>
        <div class="title">Основа круче фейков</div>
        <div class="desc">Не создавайте поддельные аккаунты с целью обмана или уклонения от блокировки. Если у вас несколько профилей, не используйте их для получения преимущества. Отыгрыш с другого аккаунта обсуждайте с администрацией ролевой</div>
      </div>
    </div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-lock" style="color:#00897B"></i></div>
      <div>
        <div class="title">Киберпсихам место в Найт-Сити</div>
        <div class="desc">Не распространяйте вредоносные программы и ссылки на них</div>
      </div>
    </div>
  </div>

  <div class="card" id="links">
    <div class="section-title">Реклама</div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-link" style="color:#5C6BC0"></i></div>
      <div>
        <div class="title">Подписывайтесь на мой канал</div>
        <div class="desc">Разрешено размещать свои соцсети, мессенджеры и личные сайты в описании профиля</div>
      </div>
    </div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-bullhorn" style="color:#FB8C00"></i></div>
      <div>
        <div class="title">Мультивселенная форумов</div>
        <div class="desc">Запрещено продвижение схожих проектов без согласования с администрацией. Мы готовы обсуждать условия размещения, если ваш проект заинтересует нас</div>
      </div>
    </div>
  </div>

  <div class="card" id="enforce">
    <div class="section-title">Блокировка</div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-scroll" style="color:#8D6E63"></i></div>
      <div>
        <div class="title">Шкала наказаний</div>
        <div class="desc">3 предупреждения → блокировка на 7 дней. На каждой площадке свой счётчик — если вас заблокировали на форуме, вы можете продолжать участие в беседах</div>
      </div>
    </div>

    <div class="rule">
      <div class="icon"><i class="fa-solid fa-gavel" style="color:#A1887F"></i></div>
      <div>
        <div class="title">По щучьему велению</div>
        <div class="desc">Администрация может ограничить доступ к форуму по субъективному решению. К примеру, если человек находил лазейки в правилах и продолжал нарушать их, неправомерно использовал закрытую информацию или получал блокировку в беседах</div>
      </div>
    </div>

    <div class="notice">
      Если вы считаете наказание ошибочным — обсудите лично или публично с администрацией. Помните, что факты сильнее эмоций
    </div>
  </div>

  <div class="local-footer">Спасибо, что придерживаетесь правил ❤️</div>

</div>

Use FoF Pages

Tutrix

Capybara
Thanks for this great template. 😉
I added this CSS to the <style>...</style>

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
  }

for smooth scrolling, and the section title is visible after scrolling in many rules.

Forogramero

Capybara Excellent!

Silvestrus

Tutrix I noticed that it doesn't go to last message in discussion if I add this piece of CSS. It happens in large discussions mostly. Any workarounds?

Other than that, nice addition. It would be worthwhile considering to have it in core with option to turn it on or off.

Tutrix

Silvestrus

Thanks for the info.
Instead of “scroll-padding-top: 60px;,” you can also place the anchor above the card, then it will only affect the rules page.
Example:
Replace

<div class="card" id="accounts">

with

<div class="rules-anchor" id="accounts"></div>
<div class="card">

and css then looks like this

html {
  scroll-behavior: smooth;
}
.rules-anchor {
  height: 50px;
}

I just changed that on my rules page as well 😉

Silvestrus

Tutrix how do I change HTML part and which file? I've never done that before. I always use administration to add custom CSS or HTML in header or footer.

Tutrix

Silvestrus how do I change HTML part and which file?

All changes and CSS affect the Rules Page, see code in the first post.

Silvestrus

Tutrix oh, I see. It is strictly for specific use, not for the forum in general. I thought that it might work everywhere, but smooth scroling is probably in conflict with Flarum calculations where the last post is. If someone know how to enable smooth scrolling for the forum, site wide, it would be great to share how to do it. I actually like the effect.

Tutrix

Silvestrus

html {
  scroll-behavior: smooth;
}

Silvestrus

Tutrix it probably doesn't work. I suppose that JS is required to work properly. Or some extension that exist already. ;-)

Tutrix

Silvestrus it probably doesn't work.

What's not working about it?

Silvestrus

Tutrix default behaviour is to go to last post in discussion. If I enable smooth scrolling, it doesn't go to last post in discussion anymore. It stops randomly somewhere in the middle of the discussion, or at the top, first post in discussion.

Tutrix

Silvestrus

This is due to the reloading of other posts when the end of the page is reached.

But that has nothing to do with the Rules Page and just fills it up with unnecessary posts if you don't even use the Rules Page.
You should start your own discussion.

Silvestrus

Tutrix yes, you're right. I will first to try something that is related to my issue. If not, I will open new discussion. Thanks for your time.

Walid

Thank you very much for sharing this!