Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Как сделать такую же навигацию?

Окт
41
3
Пользователь
3.1. Заголовок темы должен отражать основную суть темы.
1777190750770.png

как сделать такое же и иконки вставлять я знаю куда просто кода не знаю
 
Последнее редактирование модератором:
Фев
201
67
Активный
css:
 .canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: @color;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: @color !important;
    }
}

.canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when not (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"] + .p-navEl-splitTrigger
    {
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }
}

.canvas-style(home; #3f4254; f015);
.canvas-style(forums; #ff8e00; f15b);
.canvas-style(whatsNew; #54ff9f; f4a8);
.canvas-style(members; #fff; f466; #fff; "https://media3.giphy.com/media/xThuWcaa4U4XZQDgvm/giphy.gif");
.canvas-style(avatarframes; #ff3333; f54f);

у меня на форуме так
 
Окт
41
3
Пользователь
css:
 .canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: @color;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: @color !important;
        text-shadow: 1px 1px 10px @shadow;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: @color !important;
    }
}

.canvas-style(@canvas-id; @color; @fa-uid; @shadow: @color; @bg: false) when not (@bg = false)
{
    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 3px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .offCanvasMenu-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]
    {
        font-weight: bold;
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"]:before
    {
        .m-faBase(@weight: 900);
        content: "\@{fa-uid}";
        margin-right: 6px;
        color: transparent;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }

    .p-nav .p-navEl-link[data-nav-id="@{canvas-id}"] + .p-navEl-splitTrigger
    {
        color: transparent !important;
        background-image: url("@{bg}");
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: none;
    }
}

.canvas-style(home; #3f4254; f015);
.canvas-style(forums; #ff8e00; f15b);
.canvas-style(whatsNew; #54ff9f; f4a8);
.canvas-style(members; #fff; f466; #fff; "https://media3.giphy.com/media/xThuWcaa4U4XZQDgvm/giphy.gif");
.canvas-style(avatarframes; #ff3333; f54f);

у меня на форуме так
смотри твой код у меня работает но как сделать такие же иконки домик и тд
 
Ноя
1,846
5,605
Команда форума
Администратор
не работает данный способ тупо краски становятся серыми
смотри твой код у меня работает но как сделать такие же иконки домик и тд
Покажите, что прописываете тут:
Less:
.canvas-style(home; #3f4254; f015);
.canvas-style(forums; #ff8e00; f15b);
.canvas-style(whatsNew; #54ff9f; f4a8);
.canvas-style(members; #fff; f466; #fff; "https://media3.giphy.com/media/xThuWcaa4U4XZQDgvm/giphy.gif");
.canvas-style(avatarframes; #ff3333; f54f);
 
Сверху