Hizmet yılı ve sosyal bağları postbit'de gösterme

Xenforo · 16 Mar 2025

Merhabalar,
Postbitde basit hizmet yılı (kullanıcının kayıt olduğu günden bu yana) gösterme ve basit şık görünümlü sosyal bağlantıları göstere bilirsiniz.
1. Admin CP > Kullanıcılar > Özel kullanıcı alanları bölümünden alan ekliyoruz.
ID: twtich_bag (isteğe bağlı)
başlık ve açıklama girerek kaydediyoruz.

2. message_macros şablonunu açıyoruz.
(Admin cp-de üst sağ bölümden arama kısmına yazarak bulabilirsiniz)
İstediğimiz alana

İçeriği görüntülemek için Giriş yapın veya Kayıt olun.

kodlarını yapıştırıyoruz. "xxx" alanı bizim özel kullanıcı alanındakı id kısmıdır (twitch_bag)
css dosyası içeriği:

Kod:

.chip {
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    margin: 0 10px;
}

.chip.discord {
    background: #7289da;
    color: whitesmoke;
margin: 4px;
}

.chip.facebook {
    background: #3b5998;
    color: #777;
margin: 4px;
}

.chip.twitch {
    background: #6441a4;
    color: whitesmoke;
margin: 4px;
}
.chip.google {
    background: #da605b;
    color: whitesmoke;
margin: 4px;
}

.chip-avatar {
    justify-content: center;
    display: flex;
    align-items: center;
}
.chip-avatar img {
    height: 25px;
    width: 25px;
    border-radius: 50px;
}

.chip-avatar label {
    margin-left: 5px;
    font-size: 12px;
}

extra.less şablonuna atılacak:
not: bu kod svg. dosyalarına verilen "class"larla ikonları boyutlandırıyor.

Kod:

svg.discords {
    width: 18px;
}
svg.twitchs {
    width: 18px;
}

İkonlar için:

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

sitesinden ikon seçerek üst sağdan

svg kodu alarak

Kod:

<xf:if is="{$user.Profile.custom_fields.xxx}">
<link rel="stylesheet" href="https://siteniz.com/badge.css">
<span class="chip chip-avatar twitch">
--- svg kodu buraya ---
<label>{$user.Profile.custom_fields.xxx}</label>
</span>
<xf:else />
</xf:if>

svg kodu buraya yazan yere yapıştırıyoruz.

Hizmet yılı:
message_macros şablonunda en başta:

<xf:macro name="user_info"
arg-user="!"
arg-fallbackName="">

kodundan sonra

Kod:

<xf:set var="$aylik">{{ number(($xf.time - $user.register_date) / (60 * 60 * 24 * 30)) }}</xf:set>
<xf:set var="$yillik">{{ number(($xf.time - $user.register_date) / (60 * 60 * 24 * 30 * 365)) }}</xf:set>

yapıştırıyoruz.

aynı şablonda konumlandırmak istediğimiz bir yere

İçeriği görüntülemek için Giriş yapın veya Kayıt olun.

yapıştırıyoruz.

extra.less kodu:

Kod:

.type-month-1,
.type-month-2,
.type-month-3,
.type-month-4,
.type-month-5,
.type-month-6,
.type-month-7,
.type-month-8,
.type-month-9,
.type-month-10,
.type-month-11
 {
    color: hsl(199, 100%, 54%);
    border-bottom-style: solid;
    border-width: 2px;
}
.service-tag {
    order: 9;
    width: 85%;
    padding: 4px 6px;
    text-align: center;
    border-radius: 1px;
    font-size: 11px;
    text-shadow: none;
    text-transform: uppercase;
    margin: 3px auto 0 auto;
    margin-bottom: 5px;
    font-weight: bold;
    background: hsl(0, 0%, 7%);
}

Küçük kod bilgisi ve hayal gücünüze bağlı farklı birşeylerde kullanabilirsiniz. İyi forumlar

Ara

Ara

Hizmet yılı ve sosyal bağları postbit'de gösterme

Xenforo

Find Icons with the Perfect Look & Feel | Font Awesome