Einblendung eines Avatars auf dem Cover

[Gonerdot]

Ist es möglich, einen Avatar auf ähnliche Weise über einem Banner zu überlagern? Wenn ja, muss gleichzeitig die Möglichkeit deaktiviert werden, das Banner auszublenden.

[Arkshine]

Können Sie dieses CSS ausprobieren? Muss in Ihr Theme oder eine neue Komponente CSS eingefügt werden.

.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);
    }
}

Was ist Ihr Theme? Möglicherweise sind einige Anpassungen erforderlich.

[Gonerdot]

FKB Pro Theme.
Wie kann ich hier CSS hinzufügen oder ändern?

[Arkshine]

Der empfohlene Weg ist, eine neue Komponente zu erstellen, sie an Ihr Theme anzuhängen und sie dann dort zu bearbeiten (CSS/HTML bearbeiten).

[Gonerdot]

Danke! Es funktioniert

Aber wenn das Cover versteckt ist, wird der Avatar auch nicht angezeigt. Wie kann ich die Möglichkeit, das Cover zu verstecken, deaktivieren?

[Arkshine]

Ich habe das obige CSS aktualisiert, können Sie es bitte erneut versuchen?

Auf meiner Seite sieht es jetzt gut aus:

[Gonerdot]