Change avatar position

Development

AI-generated summary

The discussion revolves around changing the avatar position in the FKB Pro Social Theme. Gonerdot requests help to display the avatar in a specific way, providing images for reference. Arkshine warns that making the change may cause the avatar to lose its sliding animation. Gonerdot agrees to the change and Arkshine provides the necessary CSS code to achieve the desired layout.

Gonerdot applies the code and requests further assistance to increase the width of the main block in topics. Arkshine updates the CSS, but Gonerdot reports that it didn’t work. Arkshine updates the code again, and it eventually works as intended, as confirmed by Gonerdot.

1

Please tell me how to display an avatar this way

image
image1342×344 89.5 KB

Like this

image
image1441×365 94.9 KB

Theme: FKB Pro - Social theme

2

If you do that, you will lose the ability to see the avatar sliding up or down. Is that okay?

3

Yes, so be it

4

Can you try this Desktop CSS?

.topic-post {
    $avatar_width: 60px;
    $topic_margin_body: 1em;
    
    .topic-body {
        width: calc(690px + var(--topic-body-width-padding) * 2 + $avatar_width + $topic_margin_body) !important;
    }
    
   .topic-avatar {
        position: absolute !important;
        left: calc(var(--topic-body-width-padding) * 2 + $topic_margin_body);
        margin-bottom: 0 !important;
    }
    
    &.sticky-avatar .topic-avatar {
        top: unset !important;
    }
    
    .names.trigger-user-card {
        margin-left: calc(var(--topic-avatar-width) + var(--topic-avatar-width) / 2);
        height: $avatar_width;
    }
}

image
image203×173 18.5 KB

5

image
image949×352 78.4 KB

Thanks, this helped. Now how can I increase the width of the main block in topics?

6

I’ve adjusted the CSS above. I did not see it because my screen was split in half. :+1:

7

It didn’t work

8

Try again; I updated again right after.

It works on my side:

Arc_X4TUccN7P8

9

Oh yes, it works. Thanks a lot :heart: