Решено Страница с иерархией

Kirill_Mednil · Суббота в 17:04

Скрины прикрепил, нужен именно плагин

Venksu · Суббота в 17:20

Kirill_Mednil написал(а):
Скрины прикрепил, нужен именно плагин

Плагин на что?

Серега Пират · Суббота в 18:08

@Venksu, наверно шоб также сделать как у них

Kolpak · Суббота в 18:45

HTML:

<ul class="staffHierarchy">
    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--jrModerator">Младший модератор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--moderator">Модератор (A-12)</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--factionWatcher">Следящий за фракцией</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHeadWatcher">Заместитель главного следящего</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--headWatcher">Главный следящий [5+]</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--curator">Куратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyGa">Заместитель главного администратора</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--ga">Главный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--specialAdmin">Специальный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHead">Заместитель руководителя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--projectHead">Руководитель проекта</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyFounder">Заместитель основателя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--founder">Основатель</span>
    </li>
</ul>

Less:

.staffHierarchy
{
    list-style: none;
    padding: 0;
    margin: 40px auto;
    max-width: 500px;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: left;

    &-item
    {
        margin: 16px 0;
        padding: 14px 22px;
        border-radius: 8px;
        position: relative;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
        transition: transform .3s ease, box-shadow .3s ease;
        display: flex;
        align-items: center;
        font-size: 16px;

        &:hover
        {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .7);
        }

        &:after
        {
            content: '';
            position: absolute;
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, #666, transparent);
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            opacity: .3;
        }

        &:last-child
        {
            &:after
            {
                display: none;
            }
        }
    }

    &-role
    {
        font-weight: 700;

        &--jrModerator
        {
            color: #77DDFF;
            text-shadow: 1px 1px 10px #77DDFF;
        }

        &--moderator
        {
            color: #cfcf02;
            text-shadow: 1px 1px 10px #cfcf02;
        }

        &--factionWatcher
        {
            color: #3333ff;
            text-shadow: 1px 1px 10px #3333ff;
        }

        &--deputyHeadWatcher
        {
            color: #0066FF;
            text-shadow: 1px 1px 10px #0066FF;
        }

        &--headWatcher
        {
            color: #55AA00;
            text-shadow: 1px 1px 10px #55AA00;
        }

        &--curator
        {
            color: #0ef;
            text-shadow: 1px 1px 10px #c0f;
        }

        &--deputyGa
        {
            color: #339900;
            text-shadow: 1px 1px 10px #339900;
        }

        &--ga
        {
            color: #0fbd4f;
            text-shadow: 1px 1px 10px #15e87b;
        }

        &--specialAdmin
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyHead
        {
            color: #ff4040;
            text-shadow: 1px 1px 10px #ff4040;
        }

        &--projectHead
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyFounder
        {
            color: #FFD700;
            text-shadow: 1px 1px 10px orange;
        }

        &--founder
        {
            color: yellow;
            text-shadow: 1px 1px 10px orange;
        }
    }
}

qwerty🛡️ · Суббота в 19:09

Kolpak написал(а):

HTML:

<ul class="staffHierarchy">
    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--jrModerator">Младший модератор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--moderator">Модератор (A-12)</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--factionWatcher">Следящий за фракцией</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHeadWatcher">Заместитель главного следящего</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--headWatcher">Главный следящий [5+]</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--curator">Куратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyGa">Заместитель главного администратора</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--ga">Главный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--specialAdmin">Специальный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHead">Заместитель руководителя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--projectHead">Руководитель проекта</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyFounder">Заместитель основателя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--founder">Основатель</span>
    </li>
</ul>

Less:

.staffHierarchy
{
    list-style: none;
    padding: 0;
    margin: 40px auto;
    max-width: 500px;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: left;

    &-item
    {
        margin: 16px 0;
        padding: 14px 22px;
        border-radius: 8px;
        position: relative;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
        transition: transform .3s ease, box-shadow .3s ease;
        display: flex;
        align-items: center;
        font-size: 16px;

        &:hover
        {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .7);
        }

        &:after
        {
            content: '';
            position: absolute;
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, #666, transparent);
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            opacity: .3;
        }

        &:last-child
        {
            &:after
            {
                display: none;
            }
        }
    }

    &-role
    {
        font-weight: 700;

        &--jrModerator
        {
            color: #77DDFF;
            text-shadow: 1px 1px 10px #77DDFF;
        }

        &--moderator
        {
            color: #cfcf02;
            text-shadow: 1px 1px 10px #cfcf02;
        }

        &--factionWatcher
        {
            color: #3333ff;
            text-shadow: 1px 1px 10px #3333ff;
        }

        &--deputyHeadWatcher
        {
            color: #0066FF;
            text-shadow: 1px 1px 10px #0066FF;
        }

        &--headWatcher
        {
            color: #55AA00;
            text-shadow: 1px 1px 10px #55AA00;
        }

        &--curator
        {
            color: #0ef;
            text-shadow: 1px 1px 10px #c0f;
        }

        &--deputyGa
        {
            color: #339900;
            text-shadow: 1px 1px 10px #339900;
        }

        &--ga
        {
            color: #0fbd4f;
            text-shadow: 1px 1px 10px #15e87b;
        }

        &--specialAdmin
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyHead
        {
            color: #ff4040;
            text-shadow: 1px 1px 10px #ff4040;
        }

        &--projectHead
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyFounder
        {
            color: #FFD700;
            text-shadow: 1px 1px 10px orange;
        }

        &--founder
        {
            color: yellow;
            text-shadow: 1px 1px 10px orange;
        }
    }
}

А можно и других там же есть вродебы тех спец и ещё что-то

Venksu · Суббота в 19:13

qwerty🛡️ написал(а):
А можно и других там же есть вродебы тех спец и ещё что-то

OFFTOP

а своими ручками? там как нехуй делать дописать пару групп

Kolpak · Суббота в 19:15

qwerty🛡️ написал(а):
А можно и других там же есть вродебы тех спец и ещё что-то

Используется такой стиль в технических специалистах, VK, Discord

Less:

<ul class="neon-hierarchy">
    <li class="level-1">Технический администратор</li>
    <li class="level-1">Старший технический специалист</li>
    <li class="level-1">Куратор технических специалистов</li>
    <li class="level-1">Заместитель главного технического специалиста</li>
    <li class="level-1">Основной заместитель главного технического специалиста</li>
    <li class="level-1">Главный технический специалист</li>
</ul>

Less:

.neon-hierarchy
{
    list-style: none;
    padding: 0;
    margin: 40px auto;
    max-width: 420px;
    font-family: Arial, sans-serif;
    text-align: center;

    li
    {
        margin: 18px 0;
        padding: 14px 22px;
        border-radius: 14px;
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        position: relative;
        background-image: linear-gradient(135deg, #ff9a2f, #ff7a00);
        box-shadow: 0 0 8px rgba(255, 140, 0, .45), inset 0 0 10px rgba(255, 255, 255, .08);
        transition: transform .25s ease, box-shadow .25s ease;

        &:hover
        {
            transform: translateY(-3px) scale(1.04);
            box-shadow: 0 0 14px rgba(255, 150, 40, .7), inset 0 0 12px rgba(255, 255, 255, .15);
        }

        &:after
        {
            content: '';
            position: absolute;
            width: 2px;
            height: 32px;
            background: linear-gradient(to bottom, #ff9f2e, transparent);
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
        }

        &:last-child
        {
            &:after
            {
                display: none;
            }
        }
    }

    .level-1
    {
        background-image: linear-gradient(135deg, #ffd27d, #ffb347);
    }

    .level-2
    {
        background-image: linear-gradient(135deg, #ffcc66, #ffa733);
    }

    .level-3
    {
        background-image: linear-gradient(135deg, #ffb84d, #ff9a2f);
    }

    .level-4
    {
        background-image: linear-gradient(135deg, #ffa500, #ff8c00);
    }

    .level-5
    {
        background-image: linear-gradient(135deg, #ff9a2f, #ff7a00);
    }

    .level-6
    {
        background-image: linear-gradient(135deg, #ff8c00, #ff6f00);
    }

    .level-7
    {
        background-image: linear-gradient(135deg, #ff7a00, #ff5f00);
    }

    .level-8
    {
        background-image: linear-gradient(135deg, #ff6600, #ff4400);
    }
}

Venksu · Суббота в 19:16

Kolpak написал(а):

Используется такой стиль в технических специалистах, VK, Discord

Less:

<ul class="neon-hierarchy">
    <li class="level-1">Технический администратор</li>
    <li class="level-1">Старший технический специалист</li>
    <li class="level-1">Куратор технических специалистов</li>
    <li class="level-1">Заместитель главного технического специалиста</li>
    <li class="level-1">Основной заместитель главного технического специалиста</li>
    <li class="level-1">Главный технический специалист</li>
</ul>

Less:

.neon-hierarchy
{
    list-style: none;
    padding: 0;
    margin: 40px auto;
    max-width: 420px;
    font-family: Arial, sans-serif;
    text-align: center;

    li
    {
        margin: 18px 0;
        padding: 14px 22px;
        border-radius: 14px;
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        position: relative;
        background-image: linear-gradient(135deg, #ff9a2f, #ff7a00);
        box-shadow: 0 0 8px rgba(255, 140, 0, .45), inset 0 0 10px rgba(255, 255, 255, .08);
        transition: transform .25s ease, box-shadow .25s ease;

        &:hover
        {
            transform: translateY(-3px) scale(1.04);
            box-shadow: 0 0 14px rgba(255, 150, 40, .7), inset 0 0 12px rgba(255, 255, 255, .15);
        }

        &:after
        {
            content: '';
            position: absolute;
            width: 2px;
            height: 32px;
            background: linear-gradient(to bottom, #ff9f2e, transparent);
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
        }

        &:last-child
        {
            &:after
            {
                display: none;
            }
        }
    }

    .level-1
    {
        background-image: linear-gradient(135deg, #ffd27d, #ffb347);
    }

    .level-2
    {
        background-image: linear-gradient(135deg, #ffcc66, #ffa733);
    }

    .level-3
    {
        background-image: linear-gradient(135deg, #ffb84d, #ff9a2f);
    }

    .level-4
    {
        background-image: linear-gradient(135deg, #ffa500, #ff8c00);
    }

    .level-5
    {
        background-image: linear-gradient(135deg, #ff9a2f, #ff7a00);
    }

    .level-6
    {
        background-image: linear-gradient(135deg, #ff8c00, #ff6f00);
    }

    .level-7
    {
        background-image: linear-gradient(135deg, #ff7a00, #ff5f00);
    }

    .level-8
    {
        background-image: linear-gradient(135deg, #ff6600, #ff4400);
    }
}

OFFTOP

мне кажется надо делать тему "Kolpak создает вам форумы!", где будут просить создать им форум, на бинхосте с нуля

Kolpak · Суббота в 19:17

Venksu написал(а):
OFFTOP
мне кажется надо делать тему "Kolpak создает вам форумы!", где будут просить создать им форум, на бинхосте с нуля

OFFTOP

Это я сегодня добренький и не ленивый

Venksu · Суббота в 19:19

Kolpak написал(а):
OFFTOP
Это я сегодня добренький и не ленивый

OFFTOP

создай мне форум на бiнхост пожалста

Kolpak · Суббота в 19:21

Venksu написал(а):
OFFTOP
создай мне форум на бiнхост пожалста

OFFTOP

Kirill_Mednil · Суббота в 19:23

Kolpak написал(а):

HTML:

<ul class="staffHierarchy">
    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--jrModerator">Младший модератор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--moderator">Модератор (A-12)</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--factionWatcher">Следящий за фракцией</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHeadWatcher">Заместитель главного следящего</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--headWatcher">Главный следящий [5+]</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--curator">Куратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyGa">Заместитель главного администратора</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--ga">Главный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--specialAdmin">Специальный администратор</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyHead">Заместитель руководителя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--projectHead">Руководитель проекта</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--deputyFounder">Заместитель основателя</span>
    </li>

    <li class="staffHierarchy-item">
        <span class="staffHierarchy-role staffHierarchy-role--founder">Основатель</span>
    </li>
</ul>

Less:

.staffHierarchy
{
    list-style: none;
    padding: 0;
    margin: 40px auto;
    max-width: 500px;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: left;

    &-item
    {
        margin: 16px 0;
        padding: 14px 22px;
        border-radius: 8px;
        position: relative;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
        transition: transform .3s ease, box-shadow .3s ease;
        display: flex;
        align-items: center;
        font-size: 16px;

        &:hover
        {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .7);
        }

        &:after
        {
            content: '';
            position: absolute;
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, #666, transparent);
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            opacity: .3;
        }

        &:last-child
        {
            &:after
            {
                display: none;
            }
        }
    }

    &-role
    {
        font-weight: 700;

        &--jrModerator
        {
            color: #77DDFF;
            text-shadow: 1px 1px 10px #77DDFF;
        }

        &--moderator
        {
            color: #cfcf02;
            text-shadow: 1px 1px 10px #cfcf02;
        }

        &--factionWatcher
        {
            color: #3333ff;
            text-shadow: 1px 1px 10px #3333ff;
        }

        &--deputyHeadWatcher
        {
            color: #0066FF;
            text-shadow: 1px 1px 10px #0066FF;
        }

        &--headWatcher
        {
            color: #55AA00;
            text-shadow: 1px 1px 10px #55AA00;
        }

        &--curator
        {
            color: #0ef;
            text-shadow: 1px 1px 10px #c0f;
        }

        &--deputyGa
        {
            color: #339900;
            text-shadow: 1px 1px 10px #339900;
        }

        &--ga
        {
            color: #0fbd4f;
            text-shadow: 1px 1px 10px #15e87b;
        }

        &--specialAdmin
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyHead
        {
            color: #ff4040;
            text-shadow: 1px 1px 10px #ff4040;
        }

        &--projectHead
        {
            color: #f00;
            text-shadow: 1px 1px 10px #f00;
        }

        &--deputyFounder
        {
            color: #FFD700;
            text-shadow: 1px 1px 10px orange;
        }

        &--founder
        {
            color: yellow;
            text-shadow: 1px 1px 10px orange;
        }
    }
}

А можно пж для чайника объяснить что куда надо?

Kolpak · Суббота в 19:28

Kirill_Mednil написал(а):
А можно пж для чайника объяснить что куда надо?

Создайте узел-страницу: Панель управления - Форумы - Узлы - Добавить узел. Выбираете "Страница". Можете заполнить, как на скрине

Less-код добавляете в шаблон extra.less

Kirill_Mednil · Суббота в 19:58

Kolpak написал(а):
Создайте узел-страницу: Панель управления - Форумы - Узлы - Добавить узел. Выбираете "Страница". Можете заполнить, как на скрине
Посмотреть вложение 23719
Less-код добавляете в шаблон extra.less

Спасибо

Поиск

Welcome!

Решено Страница с иерархией

Kirill_Mednil

Вложения

Kolpak

Venksu

Пришло время платить за грехи

Серега Пират

Kolpak

qwerty🛡️

Venksu

Пришло время платить за грехи

Kolpak

Venksu

Пришло время платить за грехи

Kolpak

Venksu

Пришло время платить за грехи

Kolpak

Kirill_Mednil

Kolpak

Kirill_Mednil