6 Mart 2020

Xenforo 2 için yatay postbit

vBulletin 3 serisinden alışık olunan, Xenforo 2 için yatay postbit yapımı sanıldığı kadar zor değil. Xenforonun resmi sitesindeki bir geliştirici kendi sitesi için yapmış olduğu kod yapısını paylaşmış.

Xenforo 2 için yatay postbit örnek

Aşağıda bulunan kodları extra.less isimli şablon dosyanıza eklemeniz yeterli olacaktır. Eğer birden fazla tema kullanıyorsanız hepsine eklemeniz gerekiyor.

.block--messages .message {
    &.is-mod-selected {border-color: transparent; border-bottom-color: @xf-inlineModHighlightColor;}
}
.blockMessage {box-shadow: none;
    &.blockMessage--none {box-shadow: none;}
}
 
.block--messages {.block-container {box-shadow: none;}}
 
.message-inner {display: block;}
.message-cell {
    .m-clearFix();
    &.message-cell--user {
        width: auto;
        border-right: none;
        border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
    }
    &.message-cell--main {padding-left: @xf-messagePadding;}
    &.message-cell--extra {
        width: auto;
        border-left: none;
    }
    .message--quickReply {}
}
.message--quickReply .message-cell--user {display:none;}
 
.message-userArrow {
    top: auto;
    right: auto;
    bottom: -1px;
    left: ((@avatar-s));
    content: "";
    border: none;
    .m-triangleLeft(@xf-contentBg, @xf-messagePadding - 1px);
    .m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);
 
    &:after {
        top: auto;
        right: auto;
        left: -(@xf-messagePadding - 1px);
        bottom: -@xf-messagePadding;
        border: none;
        .m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
    }
}
 
.message-avatar {margin-bottom: 0; .avatar {& + .message-avatar-online {left: auto; right: 0;}}}
.message-name {font-size: @xf-fontSizeLarge; text-align: left;}
.message-user {display: flex;}
.message-userTitle {display: inline-block; text-align: left;}
.message-userBanner.userBanner {
    width: -moz-fit-content;
    width: fit-content;
    text-align: left;
    margin: 3px 0 0 0;
}
.message-userDetails {
    flex: 1;
    min-width: 0;
    padding-left: @xf-messagePadding;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.message--deleted {display: block;}
 
@media (max-width: @xf-messageSingleColumnWidth) {.message:not(.message--forceColumns) {.message-name {font-size: inherit;}}}

Not: Bu kod dizini xenforo 2 default teması üzerinde düzgün çalışmaktadır. Genel şablon yapısı değişik olan temalarınız da çalışmayabilir.

İlgili kaynak adresine buradan ulaşabilirsiniz.

Share

Bunlar da beğenebilirsiniz...

5 Responses

  1. enes demir dedi ki:

    Teşekkürler Faydalı Bilgiler İçin

  2. Ali Yatarkalkmaz dedi ki:

    Eliniz sağlık. Forum sitesi olanlar için faydalı bir yazı olmuş 🙂

  3. Furkan Başkak dedi ki:

    açıklayıcı bir paylaşım olmuş, başarılarınızın devamı temennisiyle..

  4. Poyraz dedi ki:

    Yararlı ve bilgilendirici bir paylaşım. İşime yaradı teşekkür ederim.

  5. İsmail dedi ki:

    xenforo ne bilmiyorum konu dikkatimi çekitği için bakma ihtiyacı duydum

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir