Merhaba, Jetto.NET Topluluğu!
Bugünkü konumuzda yatay postbit nasıl yapabiliriz, bunun hakkında bilgi sağlayacağız. Öncelikle bu konuda bizlere destek olan cls-design'e teşekkür ederiz. WoltLab hakkında yaşadığınız farklı bir sorunda sizlere yardımcı olmaktan mutluluk duyacağız 
Yatay postbitin görüşünü aşağıdaki şekildedir.
Admin panele erişim sağlayalım
'Özelleştirmeler -> Global CSS and SCSS' adımlarını takip edelim ve aşağıdaki kodları ekleyelim.
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 */
İşlem bu kadar, artık web sitemizdeki konularda postbit ekranımız yatay olacaktır.
Eski görünüm;
Spoiler Göster
Yatay görünüm;
Spoiler Göster