Welcome!

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

SignUp Now!

Решено Ищу иконку короны для ника

Статус
В этой теме нельзя размещать новые ответы.
Июл
214
699
Пользователь
3.1. Заголовок темы должен отражать основную суть темы.
Как сделать также
 

Вложения

  • Screenshot_20260603-143753_Chrome.jpg
    Screenshot_20260603-143753_Chrome.jpg
    261.4 KB · Просмотры: 52
Решение
Модификация шаблона member_view
Ключ модификации: Придумайте
Тип поиска: Простая замена
Найти:
HTML:
                                <xf:username user="{$user}" rich="true" href="" />
Заменить:
HTML:
$0
<a href="#" class="profile-custom-button username username--style{$xf.visitor.display_style_group_id} profile-custom-button--inline profile-custom-button--circle">
    <img src="https://cdn-icons-png.flaticon.com/512/1657/1657088.png" class="profile-custom-button-icon" alt>
</a>

В шаблон extra.less
Less:
.profile-custom-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0...
Июл
214
699
Пользователь
Модификация шаблона member_view
Ключ модификации: Придумайте
Тип поиска: Простая замена
Найти:
HTML:
                                <xf:username user="{$user}" rich="true" href="" />
Заменить:
HTML:
$0
<a href="#" class="profile-custom-button username username--style{$xf.visitor.display_style_group_id} profile-custom-button--inline profile-custom-button--circle">
    <img src="https://cdn-icons-png.flaticon.com/512/1657/1657088.png" class="profile-custom-button-icon" alt>
</a>

В шаблон extra.less
Less:
.profile-custom-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0;
    margin-right: @xf-paddingSmall;
    line-height: 36px;
    vertical-align: middle;
    text-decoration: none;
    color: @xf-textColor;
    background: #1a1f2a;
    border: 1px solid #1a1f2a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    transition: all .25s cubic-bezier(.4, 0, .2, 1);

    &:after
    {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        pointer-events: none;
    }

    &:hover
    {
        &:after
        {
            left: 150%;
            transition: left .65s ease-in-out;
        }

        .profile-custom-button-icon
        {
            transform: scale(1.18);
        }
    }

    &.username
    {
        background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.15) 100%),currentColor;
        border-color: rgba(255,255,255,.3);
        font-weight: normal;
        font-style: normal;
        text-shadow: none;

        &:hover
        {
            transform: translateY(-2px);
            border-color: rgba(255,255,255,.5);
            box-shadow: 0 4px 10px rgba(0,0,0,.25);
        }

        &:active
        {
            transform: none;
            box-shadow: 0 1px 4px rgba(0,0,0,.12);
        }
    }

    &--circle
    {
        border-radius: 50%;
    }

    &--square
    {
        border-radius: @xf-borderRadiusMedium;
    }

    &--none
    {
        background: transparent;
        border: 0;
        box-shadow: none;

        &.username
        {
            background: transparent;
            border: 0;
            box-shadow: none;

            &:hover
            {
                background: rgba(255,255,255,.1);
                transform: translateY(-2px);
            }

            &:active
            {
                transform: none;
            }
        }
    }

    &--inline
    {
        width: 25px;
        height: 25px;
        margin-left: @xf-paddingSmall;
        margin-right: 0;
        line-height: 23px;
        vertical-align: middle;
        box-shadow: none;

        .profile-custom-button-icon
        {
            max-width: 15px;
            max-height: 15px;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
        }

        &.profile-custom-button--square
        {
            border-radius: @xf-borderRadiusSmall;
        }

        &.profile-custom-button--circle
        {
            border-radius: 50%;
        }

        &.username:hover
        {
            background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.15) 100%),currentColor;
            transform: scale(1.15);
            box-shadow: none;
        }
    }
}

.profile-custom-button-icon
{
    display: block;
    margin: auto;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
    transition: transform .25s ease;
}
Поч ник свой в профиле поменялся на этот у всех в профиле этот ник
 

Вложения

  • Screenshot_20260814-140622_Chrome.jpg
    Screenshot_20260814-140622_Chrome.jpg
    147.3 KB · Просмотры: 11
Статус
В этой теме нельзя размещать новые ответы.
Сверху