Таблица возможностей групп на странице форума

Itnull · 24.03.21

Версии XenForo XF 2.0 XF 2.1 XF 2.2
С помощью данной инструкции вы сможете создать красивую табличку с информацией о группах на вашем форуме. В свое время взял это решение из одноименного ресурса пока он еще был жив.. Частенько спрашивают вот и решил выложить в общее достояние.

1. Создаем в узлах страницу форума
2. В HTML-код шаблона добавляем следующий код

HTML:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="ability-groups">
            <table class="promotion">
                <caption>
                    Группы пользователей форума Stop Motion на Русском</caption>
                <thead>
                    <tr>
                        <th scope="col">
                            Название группы</th>
                        <th scope="col">
                            Баннер группы</th>
                        <th scope="col">
                            Авто переход</th>
                        <th scope="col">
                            Платный переход</th>
                        <th scope="col">
                            Сообщений</th>
                        <th scope="col">
                            Симпатий</th>
                        <th scope="col">
                            Ресурсы</th>
                        <th scope="col">
                            Клубные ресурсы</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td aria-label="Название группы">
                            <span class="username--style3">Администраторы</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--red">Администратор</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style4">Редакторы</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--green">Редактор</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style7">Мастера</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--orange">Мастер</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название групп" scope="row">
                            <span class="username--style8">Аниматоры</span></td>
                        <td aria-label="Баннер групп">
                            <span class="userBanner userBanner userBanner--accent">Аниматор</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style9">Переводчики</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--purple">Переводчик</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style10">Члены Клуба</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--blue">Член Клуба</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: rgb(172, 0, 211);">40$</span></td>
                        <td aria-label="Сообщений">
                            &infin;</td>
                        <td aria-label="Симпатий">
                            &infin;</td>
                        <td aria-label="Ресурсы">
                            <font color="#388e3c">да</font></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style6">Проверенные</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--skyBlue">Проверенный</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: rgb(172, 0, 211);">15$</span></td>
                        <td aria-label="Сообщений">
                            <span style="color: #303f9f;">15</span></td>
                        <td aria-label="Симпатий">
                            <span style="color: #303f9f;">10</span></td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #388e3c;">нет</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style2">Участники</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--gray">Участник</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Симпатий">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Ресурсы">
                            <span style="color: #388e3c;">да</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #d32f2f;">нет</span></td>
                    </tr>
                    <tr>
                        <td aria-label="Название группы" scope="row">
                            <span class="username--style1">Гости</span></td>
                        <td aria-label="Баннер группы">
                            <span class="userBanner userBanner userBanner--hidden">Гость</span></td>
                        <td aria-label="Авто переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Платный переход">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Сообщений">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Симпатий">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Ресурсы">
                            <span style="color: #d32f2f;">нет</span></td>
                        <td aria-label="Премиум ресурсы">
                            <span style="color: #d32f2f;">нет</span></td>
                    </tr>
                </tbody>
            </table>
            <table class="depiction">
                <caption>
                    Краткие пояснения для групп пользователей</caption>
                <tbody>
                    <tr>
                        <td class="username--style3">
                            Администраторы</td>
                        <td>
                            Группа администраторов форума. Руководят форумом и осуществляют его поддержку.</td>
                    </tr>
                    <tr>
                        <td class="username--style4">
                            Редакторы</td>
                        <td>
                            Группа редакторов форума. Помощники администраторов, следят за порядком, помогают в развитии форума.</td>
                    </tr>
                    <tr>
                        <td class="username--style7">
                            Мастера</td>
                        <td>
                            Группа мастеров форума. Это Крутые специалисты в области Stop Motion анимации, которые добились невероятных высот и успехов.</td>
                    </tr>
                    <tr>
                        <td class="username--style8">
                            Аниматоры</td>
                        <td>
                            Группа аниматоров форума. Это люди которые профессионально занимаются Stop Motion анимацией и готовы к серъезным коммерческим предложениям.</td>
                    </tr>
                    <tr>
                        <td class="username--style9">
                            Переводчики</td>
                        <td>
                            Группа переводчики форума. Это люди которые адаптируют для нас раличные материалы по Stop Motion анимации с различных языков на Русский (Украинский)</td>
                    </tr>
                    <tr>
                        <td class="username--style10">
                            Авторы</td>
                        <td>
                            Группа авторов форума. Пользователи публикующие на нашем форуме обучающий материал, статьи, секреты и прочее. Попасть в эту группу возможно только в ручном режиме по заявке.</td>
                    </tr>
                    <tr>
                        <td class="username--style6">
                            Проверенные</td>
                        <td>
                            Группа пользователей, которые являются полноправными участниками форума, могут скачивать файлы из менеджера ресурсов, использовать систему репутаций и начинать личные переписки. Ограничения на редактирования своего контента - Сутки. Автоматический переход в эту группу возможен после написания 20 полезных сообщений и получения 15 симпатий. Возможен <a href="https://www.devamotion.com/account/upgrades">Платнй переход</a> в эту группу</td>
                    </tr>
                    <tr>
                        <td class="username--style2">
                            Участники</td>
                        <td>
                            Группа пользователей, которая выдается после регистрации. Не могут использовать систему репутаций, начинать личные переписки, удалять свои темы и сообщения, устанавливать подпись и выставлять публично свои контакты. Установлены временные ограничения на редактирование своих тем, ресурсов, статей и сообщений 15 мин.</td>
                    </tr>
                    <tr>
                        <td class="username--style1">
                            Гости</td>
                        <td>
                            Группа пользователей, которые не зарегистрированы на форуме. Данная группа может только просматривать доступные разделы и темы форума</td>
                    </tr>
                </tbody>
            </table>
            <table>
                <caption>
                    <a href="https://devamotion.com/threads/pojasnenija-o-perexode-v-gruppu-proverennye.64/#post-111">Здесь</a> - Более подробно о переходе в группу Проверенные</caption>
            </table>
            <table>
                <caption>
                    <a href="#">Здесь</a> - Более подробно о остальных группах Сообщества</caption>
            </table>
        </div></body>
</html>

3. Открываем extra.less (admin.php?templates/extra-less.1665/edit&style_id=1) и добавляем код:

Код:

/*! Возможности Групп Пользователей - Таблица на странице */

.ability-groups table {
    font-family: 'Firasanscondensedregular',sans-serif;
    border: 1px solid #dfdfdf;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

.ability-groups table th {
    background: #5a93af;
    font-size: .85em;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    padding: 15px 0;
}

.ability-groups table tr {
    border: 1px solid #cbcbcb;
    padding: .35em;
}

.ability-groups tr:nth-child(2n + 1) {
    background: rgba(125,125,125,0.2);
}

.ability-groups table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

.ability-groups table th, .ability-groups table td {
    padding: .625em;
    text-align: center;
}

.ability-groups table.depiction tr td {
    text-align: left;
}

.ability-groups table.depiction tr td:first-child {
    width: 20%;
}

/*! Возможности Групп Пользователей - Адаптивная Таблица на странице */

@media screen and (max-width: 600px){

    .ability-groups table {
    border: 0;
}

    .ability-groups table caption {
    font-size: 1.3em;
}
    .ability-groups table thead {
    display: none;
}
    .ability-groups table tr {
    border-bottom: 3px solid #cbcbcb;
    display: block;
    margin-bottom: .625em;
}
    .ability-groups table td {
    border-bottom: 1px solid #cbcbcb;
    display: block;
    font-size: .8em;
    text-align: right;
}
    .ability-groups table td:before {
    content: attr(aria-label);
    float: left;
    font-weight: 500;
    color: #455a64;
    text-transform: uppercase;
}
    .ability-groups table.depiction tr td:first-child {
    width: auto;
}
}
/*************************************************************************/

4. Сохраняем и смотрим результат.
5. Следующим шагом будет редактирование кода под свои нужды и под свой форум.

Таблица возможностей групп на странице форума

Itnull