Overlaying an avatar on the cover

[Gonerdot]

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

[Arkshine]

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.

[Gonerdot]

FKB Pro theme.
How can I add or change css here?

[Arkshine]

The recommended way is to create a new component, attach it to your theme, then you can Edit CSS/HTML there.

[Gonerdot]

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?

[Arkshine]

I’ve updated the CSS above, can you try again?

It looks good on my side now:

[Gonerdot]