Is it possible to overlay an avatar on a banner in a similar way? If yes, then at the same time you need to disable the ability to hide the banner
Can you try this CSS? To be inserted in your theme or a new component CSS.
.user-main:has(.has-background .user-profile-image) {
$avatar_size: 144px;
$avatar_margin: 20px;
$avatar_border_size: medium;
.user-profile-avatar {
position: absolute;
top: calc(-#{$avatar_size} / 2 - $avatar_margin);
left: $avatar_margin;
img.avatar {
background: var(--secondary);
border-width: $avatar_border_size;
}
}
.primary-textual {
margin-left: calc($avatar_size + $avatar_margin * 2);
}
}
What is your theme? It might need some adjustments.
The recommended way is to create a new component, attach it to your theme, then you can Edit CSS/HTML
there.
Ty! It’s working
But if the cover is hidden, the avatar will not be displayed either. How can I disable the ability to hide the cover?
I’ve updated the CSS above, can you try again?
It looks good on my side now:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.