помогите исправить положение

[hell777]

всем привет, установив плагин на рамки(frame) от Avatar Frames 1.0.5
у меня появилось вот это:

​

возможно кто-то знает как это решить? спасибо заранее!

 

[hell777]

OFFTOP

если кто то не понял, то сьехали аватарки

 

[Venksu]

Скинь ссылку на форум, возможно это только на мобилке так

 

[hell777]

Скинь ссылку на форум, возможно это только на мобилке так

OFFTOP

это не мобила, это везде

 

[Venksu]

А. Проблема в рамках? Это настройка плагина уже идет

 

[hell777]

А. Проблема в рамках? Это настройка плагина уже идет

OFFTOP

возможно знаешь как это пофиксить?

 

[Venksu]

OFFTOP

возможно знаешь как это пофиксить?

OFFTOP

Честно, нет. Обратись к @Spolzer, он делал плагин такой же

 

[hell777]

OFFTOP

Честно, нет. Обратись к @Spolzer, он делал плагин такой же

OFFTOP

окей. буду ждать ответа от него! возможно поможет мне и как раз исправит этот плагин!

 

[hell777]

up

 

[Dev Cold]

up

атятя низя апать

3.5. Запрещено поднимать (апать) свою тему чаще, чем 1 раз в 24 часа.

 

[hell777]

атятя низя апать

3.5. Запрещено поднимать (апать) свою тему чаще, чем 1 раз в 24 часа.

OFFTOP

разок можно

 

[pikamonov]

ссылку отправьте на форум

 

[hell777]

ссылку отправьте на форум

https://forum.wintercrmp.ru/index.php?members/

 

[pikamonov]

https://forum.wintercrmp.ru/index.php?members/

Спойлер: code

.block-row .avatar img,
.block-row img.avatar,
.avatar img,
.avatar--s img,
.avatar--m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit !important;
}

.avatar,
.avatar--s,
.avatar--m {
    overflow: hidden;
}

Попробуйте добавить этот код в extra.less.

 

[hell777]

Спойлер: code

.block-row .avatar img,
.block-row img.avatar,
.avatar img,
.avatar--s img,
.avatar--m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit !important;
}

.avatar,
.avatar--s,
.avatar--m {
    overflow: hidden;
}

Попробуйте добавить этот код в extra.less.

все также

 

[hell777]

Спойлер: code

.block-row .avatar img,
.block-row img.avatar,
.avatar img,
.avatar--s img,
.avatar--m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit !important;
}

.avatar,
.avatar--s,
.avatar--m {
    overflow: hidden;
}

Попробуйте добавить этот код в extra.less.

OFFTOP

мне стоит ждать или я пойду?

 

[pikamonov]

связался с пользователем в лс форума. Публикую проблему/решение сюда.

проблема была из за того что плагин оборачивал обычную xf аватарку в доп.контейнер;

<span class="avatarFrame">
    <a class="avatar avatar--s">...</a>
</span>

а дефолтная сетка хф .listheap рассчитана на то, что внутри >li> будет сразу сама аватарка.
Из за этого .avatarframe имел свои "правила" плюс рамка через ::after могла масштабироваться через --af--scale, в итоге рамка на аватарке становилась больше, и/или выравнивалась иначе

Спойлер: костыль // вставлять в extra.less

.listHeap > li > .avatarFrame {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
    position: relative !important;
    border-radius: @xf-avatarBorderRadius;
    box-sizing: border-box !important;
    --af-scale: 1 !important;
}

.listHeap > li > .avatarFrame > .avatar {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: @xf-avatarBorderRadius !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.listHeap > li > .avatarFrame > .avatar img,
.listHeap > li > .avatarFrame > .avatar span {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: @xf-avatarBorderRadius !important;
    box-sizing: border-box !important;
}

.listHeap > li > .avatarFrame::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: @xf-avatarBorderRadius !important;
    transform: none !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

@Spolzer

 

[hell777]

связался с пользователем в лс форума. Публикую проблему/решение сюда.

проблема была из за того что плагин оборачивал обычную xf аватарку в доп.контейнер;

<span class="avatarFrame">
    <a class="avatar avatar--s">...</a>
</span>

а дефолтная сетка хф .listheap рассчитана на то, что внутри >li> будет сразу сама аватарка.
Из за этого .avatarframe имел свои "правила" плюс рамка через ::after могла масштабироваться через --af--scale, в итоге рамка на аватарке становилась больше, и/или выравнивалась иначе

Спойлер: костыль // вставлять в extra.less

.listHeap > li > .avatarFrame {
    display: inline-block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
    position: relative !important;
    border-radius: @xf-avatarBorderRadius;
    box-sizing: border-box !important;
    --af-scale: 1 !important;
}

.listHeap > li > .avatarFrame > .avatar {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: @xf-avatarBorderRadius !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.listHeap > li > .avatarFrame > .avatar img,
.listHeap > li > .avatarFrame > .avatar span {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: @xf-avatarBorderRadius !important;
    box-sizing: border-box !important;
}

.listHeap > li > .avatarFrame::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: @xf-avatarBorderRadius !important;
    transform: none !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

@Spolzer

Очень сильно благодарен этому человеку! удачи ему