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.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
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
1,226
İ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

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

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.