Nasıl yapılır ? XF2 Profil çerçevesi

Sis · 12 Nis 2020

Aşağıdaki görseldeki gibi kırmızımsı çerçevenin aynısını nasıl yaparız ?

HidddeNKinG · 13 Nis 2020

XF 2.1 Eklenti - Çevrimiçi ve Çevrimdışı Avatar Planlaması

Merhaba, Avatar kısmında çevrimiçi ve çevrimdışı olduğunu gösteren yapılandırma paylaşımını yapıcağım 1. Adım Görünüm ve diller > Şablonlar > message_macros şablonuna giriyoruz.

xenforo.gen.tr

şu konudan faydalanarak yapmaya çalıştım ama resim kayboluyor onu çözemedim

HidddeNKinG · 13 Nis 2020

Sis

yaptım

Bunu extra.less içine ekle

Kod:

.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    } 
.xgt-avatar-border{
      border-width: 2px;
    }
}

.xgt-avatar2{
    display: block;
    background: linear-gradient(to right, green, yellow);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border2{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar2{
    padding: 2px;
    } 
.xgt-avatar-border2{
      border-width: 2px;
    }
}

bunu da <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> ile değiştir

Kod:

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div> 
                </div>
                <xf:else />
                    <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div> 
                </div>                   
                </xf:if>

HidddeNKinG · 13 Nis 2020

sonuç

Düzeltme ikinci verdiğim şu şekilde olacak

Kod:

                       <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div> 
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div> 
                </div>                   
                </xf:if>

Sis · 13 Nis 2020

HidddeNKinG' Alıntı:

Ekli dosyayı görüntüle 10802

sonuç

Düzeltme ikinci verdiğim şu şekilde olacak

Kod:

                       <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                  
                </xf:if>

Netron hocanın dediği gibi ayarladım da Default tema da uygulayınca birebir çalıştı ama aktif kullandığımız tema da hiçbi değişiklik olmadı

sebebini de bulamadım 1-2 saattir de inceledim halbuki

TheGaMeLiFe_HD · 13 Nis 2020

HidddeNKinG' Alıntı:

Sis

yaptım

Bunu extra.less içine ekle

Kod:

.xgt-avatar{
    display: block;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar{
    padding: 2px;
    }
.xgt-avatar-border{
      border-width: 2px;
    }
}

.xgt-avatar2{
    display: block;
    background: linear-gradient(to right, green, yellow);
    border-radius: 50%;
    padding: 4px;
}

.xgt-avatar-border2{
    display: block;
    border: 4px solid #fff;
    border-radius: 50%;
}

@media (max-width: @xf-publicNavCollapseWidth)
{
.xgt-avatar2{
    padding: 2px;
    }
.xgt-avatar-border2{
      border-width: 2px;
    }
}

bunu da <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" /> ile değiştir

Kod:

<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
                <div class="xgt-avatar">
                        <div class="xgt-avatar-border">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>
                <xf:else />
                    <div class="xgt-avatar2">
                        <div class="xgt-avatar-border2">
                    <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
                       </div>
                </div>                  
                </xf:if>

Kenar çerçevesini biraz genişletme yapsan güzel olur bence ek oflline olanları da tam kımızı yapsan hoş durur ben koda baktım ama anlayamadım tam nasıl yapacağımı.

HidddeNKinG · 13 Nis 2020

TheGaMeLiFe_HD' Alıntı:
Kenar çerçevesini biraz genişletme yapsan güzel olur bence ek oflline olanları da tam kımızı yapsan hoş durur ben koda baktım ama anlayamadım tam nasıl yapacağımı.

border: 4px solid #fff;

değerini arttırarak genişletme yapabilirsiniz.

background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

kırmızı için bu kodu bunla değiştiriniz

background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(255,0,0,1) 0%, rgba(252,113,52,1) 72%, rgba(252,176,69,1) 100%);

HidddeNKinG · 13 Nis 2020

.xgt-avatar2{
display: block;
background: linear-gradient(to right, green, yellow);
border-radius: 50%;
padding: 4px;

şunun sonuna da bunu ekleyince süper oluyor

box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);

Sis · 14 Nis 2020

Maşallah ben hariç herkesin işine yaradı

) Güzel olmuş arkadaşlar.

GENTLEM4N · 14 Nis 2020

Merhabalar buranin V4 Temasini kullaniyoruz bizde Sitemizde. HiddenKingin paylastigi tarzda bizde düzenleme yapabiliyormuyuz temamizda, yoksa V4 temasi bu tür degisikliklere kitlimi?

Suanki Durum:

Üstdeki ve Soldaki Kahverengileri kaldirip, normal Arkaplan Rengi yapmak istiyorum, ve 31 May 2015 Tarihininde altina cizgi, yani ikisini bölmek icin.

Sol Kisimdada Daireli Online/Offline Bölümü.

HidddeNKinG · 14 Nis 2020

GENTLEM4N' Alıntı:
Merhabalar buranin V4 Temasini kullaniyoruz bizde Sitemizde. HiddenKingin paylastigi tarzda bizde düzenleme yapabiliyormuyuz temamizda, yoksa V4 temasi bu tür degisikliklere kitlimi?

Suanki Durum:

Ekli dosyayı görüntüle 10810

Üstdeki ve Soldaki Kahverengileri kaldirip, normal Arkaplan Rengi yapmak istiyorum, ve 31 May 2015 Tarihininde altina cizgi, yani ikisini bölmek icin.

Sol Kisimdada Daireli Online/Offline Bölümü.

Yapılabilir diye düşünüyorum ama bu temayı kullanmadım hiç

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? XF2 Profil çerçevesi

Sis

xFanatik