Hello, Jetto.NET Community!
In today's topic, we will provide information about how we can make a horizontal postbit. First of all, we would like to thank cls-design for supporting us in this regard. We will be happy to help you with any different problem you may have about WoltLab 
The view of the horizontal postbit is as follows.
Let's access the admin panel
Let's follow the steps 'Customizations -> Global CSS and SCSS' and add the following codes.
CSS
/* Postbit Tasarımı Yatay */
@include screen-md-up {
#tpl_wbb_thread {
.message {
display: block;
.messageContent {
display: block;
max-width: 100%;
margin-left: 0;
margin-top: 20px;
}
.messageSidebar {
display: flex;
padding: 10px;
border-radius: var(--wcfBorderRadius);
text-align: left;
.userCredits {
height: 70px;
overflow: hidden;
margin-top: 0;
flex-basis: calc(100% - 410px);
max-width: calc(100% - 410px);
display: flex;
justify-content: flex-end;
> dl {
width: 220px;
dd {
min-height: 15px;
margin-bottom: 2px;
}
}
}
}
.messageSidebar .userAvatar .userAvatarImage {
width: 70px !important;
height: auto !important;
}
.messageAuthor {
display: grid;
gap: 10px;
grid-template-columns: 70px 120px 200px;
grid-template-areas:
"messageAuthorAvatar messageAuthorName messageTrophy"
"messageAuthorAvatar messageAuthorTitle messageTrophy";
.userAvatar {
grid-area: messageAuthorAvatar;
height: 70px;
width: 70px;
margin-bottom: 0;
.userAvatarImage {
border-radius: var(--wcfBorderRadius);
box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
}
.messageAuthorContainer {
grid-area: messageAuthorName;
}
.userTitle {
grid-area: messageAuthorTitle;
}
.specialTrophyContainer {
grid-area: messageTrophy;
margin-top: 0;
> ul {
justify-content: flex-start;
}
}
}
}
}
}
/* Postbit Tasarımı Yatay */
That's it, now our postbit screen will be horizontal for the topics on our website.
Old appearance;
Spoiler Göster
Horizontal view;
Spoiler Göster