Uyumlu XF 2 Sürümleri
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.
İ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:
- 2.2.X
- 2.0.X
- 2.1.X
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:
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 icons, styles, and packs available in Font Awesome 7.
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:
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%);
}
