Создание и редактирование навигации XenForo 2.3

[Intel]

В xenforo присутствует навигация, многие не знают как её редактировать или даже создавать - в этом мануале мы это исправим​

Навигация создается здесь - /admin.php?navigation/ или ACP -> Настройки -> Публичная навигация
Нажимаете на кнопку "Добавить навигацию"

Откроется следующая страница:


ID элемента навигации - id, по которому мы будем обращаться к элементу навигации
Заголовок - Текст, отображаемый в элементе навигации
Родительский элемент - выбирайте, если вам необходимо занести данный элемент навигации под другой
Порядок отображения - положение элемента навигации среди других
Тип - Основной - ведет на любую ссылку, Узел - ведет на определенный форум/раздел, Обработчик - для создания скриптовых навигаций
В нашем примере будем использовать Основной тип для перехода на другой сайт.
Ссылка - указываем полную ссылку куда хотим перейти. В случае перехода по своему форуму, можно использовать /путь/к/нужной/странице
Условия отображения - Дает возможность указать где, как будет отображаться элемент навигации
Включаем и больше ничего не требуется.


Как настроить иконки до и после текста
Переходим в шаблон core_dt_proprties.less
Ищем там .p-navEl-link[data-nav-id="forums"] и листаем до конца всех элементов навигации.
Перед </xf:if> добавляем

.p-navEl-link[data-nav-id="ваш id"]::before {
    .m-faIcon(@fa-var-иконка);
}

(или ::after)

Вместо ваш id пишем id элемента навигации
Вместо иконка пишите название нужной FA иконки.

Теперь сделаем для элемента навигации кастомизацию

Переходим в шаблон app_nav.less и идём в конец файла.

вставляем

.p-navEl-link[data-nav-id="ваш id"] {
background: red;
color: white;
}

По итогу у вас будет элемент навигации с красным фоном и иконкой.


Теперь, для примера покажу на примере создание навигации с иконкой. Возьмём сразу сложный элемент с форума Arizona RolePlay - Амнистии
Добавляем навигацию:
ID - amnisty
Заголовок - Амнистии
Порядок отображения - произвольный
Тип - узел
Узел - нужный
Включаем элемент.

Переходим в шаблон core_dt_proprties.less и идём к другим элементам навигации и вставляем

.p-navEl-link[data-nav-id="amnisty"]::before {
    .m-faIcon(@fa-var-solid-unlock);
}

Сохраняем и выходим.

Переходим в шаблон app_nav.less и листаем в конец.
Вставляем этот код:

.p-navEl-link[data-nav-id="amnisty"] {
    position: relative;
    --amn1: hsl(142, 76%, 36%);
    --amn2: hsl(161, 94%, 30%);
    --amnText: #fff;
    
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--amn1), var(--amn2));
    color: var(--amnText);
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    border: 0;
    box-shadow: none;
    background-clip: padding-box;
    transition: transform .15s
    ease, box-shadow .15s
    ease, filter .15s
    ease;
    &::after {
        content: "OPEN";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        margin-left: 8px;
        border-radius: 6px;
        background: #fff;
        color: #065f46;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .3px;
        font-family: inherit;
    }
}

Сохраняем и выходим. По итогам этих действий получаем: