Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Kaynak ikonu

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

Bu eklenti, add-ons XenForo 2.2.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
  1. 2.2.X
  2. 2.0.X
  3. 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.
Screenshot (1).png

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:
Screenshot (2).png


İkonlar için: sitesinden ikon seçerek üst sağdan
Screenshot (3).png


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 ❤️
Yazar
Hüseyn.
Görüntüleme
834
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 2 değerlendirme

Hüseyn. ait diğer kaynakar

Son incelemeler

elinize emeğinize sağlık
Eline sağlık kardeşim.
Hüseyn.
Hüseyn.
Teşekküler hocam

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.