• Merhaba Ziyaretçi,
    Sitemizden yararlanmak için buradan kayıt olunuz.
  • Değerli üyelerimiz, Bildiğiniz üzere uzunca bir süredir eklenti desteği ile kişisel sebeplerden ötürü ilgilenemiyorum. Üyelerimizi mağdur etmemek açısından burada sergilenen eklentilerimizi Xenforo.gen.tr üzerinde satışa sunma kararı aldık. Mevcut eklentilere ait kritik problem ve geliştirmeler ile ilgili belirli aralıklarla Xenforo.gen.tr üzerinden destek verilecektir.

XF 1.X Uyumlu XenForo Dairesel Posbit Şablonu

ovunc

Emektar Üye
Katılım
9 Eki 2016
Mesajlar
162
Reaction score
227
Puanları
43
Yaş
41
Konum
İzmir
Web sitesi
xenforotr.com
PHP Versiyonu
PHP v7.1.x
XenForo Versiyonu
XF 1.5.x
Klasik posbitleri sevsemde yenilerini arkadaşlar için denemeye çalışıyorum,
Belki beğenip uygulamak isteyen olur.


Userinfo için dairesel bir görünüm kazandırmak istiyorsanız aşağıdaki adımları uygulayabilirsiniz.

1. Kullandığınız temanın PAGE_CONTAINER şablonunu bulup <head> altına aşağıdaki kodu ekliyoruz.

Kod:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
2. Kullandığınız temanın stil özelliklerinden Message Layout özelliğine gelip aşağıdaki resimdeki gibi değişiklikleri yapıp kaydediniz.

(Mavi genişlik alanı:200px),

1.PNG

Şimdi Left alanındaki değere dikkat edin,

2.PNG

3. Kullandığınız temada message_user_info şablonunda aşağıdaki kodu bulun;

Kod:
<div class="avatarHolder">
            <span class="helper"></span>
Yerine bu kodla değiştirin,

Kod:
<div class="avatarHolder" align="center">
<div class="extraUserInfo roundStats">
<dl class="pairsInline roundMessage">
<dt><span class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}"></span></dt>
<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
</dl>

<dl class="pairsInline roundLike">
<dt><span class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}"></span></dt>
<dd>{xen:number $user.like_count}</dd>
</dl>

<dl class="pairsInline roundTrophy">
<dt><span class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}"></span></dt>
<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
</dl>
</div>
        <span class="helper"></span>
4. Kullandığınız temanın message_user_info.css şablonunda aşağıdaki kodu bulun,

Kod:
.messageUserBlock a.username
Yukarıdaki kodu bulduğunuzda,
{ İşaretinin altına aşağıdaki kodu ekleyiniz,

Kod:
text-align: center;
5. Şimdi sona geliyoruz az kaldı sabredin, :)
Kullandığınız temanın Extra.CSS şablonuna aşağıdaki kodu ekliyoruz,

Kod:
.messageUserInfo .messageUserBlock .avatar > img { border-radius: 50%; }

.roundStats .fa {
    font-size: 30px;
    line-height: 37px;
    margin-left: -1px;
    margin-top: -1px;
    opacity: 0.25;
}
.roundStats .pairsInline {
    border: 1px solid #d5d5d5;
    border-radius: 100%;
    height: 36px;
    width: 36px;
}
.messageUserBlock .roundStats .roundTrophy { margin-left: 20px; overflow: hidden; }
.messageUserBlock .roundStats .roundLike { margin-left: 5px; overflow: hidden; }
.messageUserBlock .roundStats .roundMessage { margin-left: 20px; margin-top: -10px; overflow: hidden; }

.roundStats .pairsInline > dd {
    color: #000000;
    display: block;
    margin-top: -24px;
    text-align: center;
}
.messageUserInfo .extraUserInfo.roundStats {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    margin-left: -24px;
    margin-top: -2px;
    position: absolute;
}
.messageUserBlock .extraUserInfo { font-size: 11px; padding: 4px 6px; }

/* PULSING INDICATOR */
.messageUserBlock div.avatarHolder .onlineMarker {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: medium none !important;
    border-radius: 50% !important;
    display: inline-block;
    height: 16px;
    margin: 81px 0 0 107px;
    width: 16px;
}

.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}

@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}

Sonuç mu?

4.PNG
 

DieseL

BıçKıN Admin
Yönetici
Yönetim Ekibi
Katılım
9 Şub 2016
Mesajlar
645
Reaction score
831
Puanları
93
Konum
Tekirdağ
Web sitesi
www.xenforo.web.tr
PHP Versiyonu
PHP v7.1.x
XenForo Versiyonu
XF 1.5.x
Vay bu çok iyiymiş işte ellerine sağlık abi.
 
Üst