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 [image]

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.

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

Ty! It’s working [image] But if the cover is hidden, the avatar will not be displayed either. How can I disable the ability to hide the cover? [image]

I’ve updated the CSS above, can you try again? It looks good on my side now: [image] [image]

Overlaying an avatar on the cover

Development

Arkshine January 24, 2024, 7:19pm 4

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

Topic		Replies	Views
Banner opacity and disabling profile pictures / avatars UX	3	1158	August 6, 2020
Can the user avatars on the website and the content page of the post be hidden? Product Support	1	153	September 4, 2024
Avatar has Border applied when Topic is Published UX	1	799	February 23, 2022
How to disable the banner topic dismiss button? Product Support	2	797	November 22, 2022
How to move the avatar_template inside the topic body Development css	4	292	December 29, 2024

Overlaying an avatar on the cover

Related topics