- 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
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:
extra.less şablonuna atılacak:
not: bu kod svg. dosyalarına verilen "class"larla ikonları boyutlandırıyor.
Görünüm:
İkonlar için:
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:
kodundan sonra
yapıştırıyoruz.
aynı şablonda konumlandırmak istediğimiz bir yere
yapıştırıyoruz.
extra.less kodu:
Küçük kod bilgisi ve hayal gücünüze bağlı farklı birşeylerde kullanabilirsiniz. İyi forumlar
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;
}
İ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.
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="">
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>
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>
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
