XF 2.2 Eklenti - Hizmet yılı ve sosyal bağları postbit'de gösterme | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

Uyumlu XF 2 Sürümleri

2.2.X
2.0.X
2.1.X

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

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 class="twitchs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"/></svg>
                        <label>{$user.Profile.custom_fields.xxx}</label>
                    </span>
                <xf:else />
                </xf:if>

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:

CSS:

.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.

CSS:

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

Görünüm:

İ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

<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:

Kod:

<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

Kod:

<xf:if is="$yillik >= '1'">
            <div class="service-tag type-year-{$yillik}">{$yillik} hizmet yılı</div>
        <xf:elseif is="$aylik >= '1'" />
            <div class="service-tag type-month-{$aylik}">{$aylik} hizmet ayı</div>
    </xf:if>

yapıştırıyoruz.

extra.less kodu:

CSS:

.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