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

Kullanım tekniği [SVG] Banner with light effect : Işık Efektli User Banner - Özel Rank

XenForo için kullanım tekniği.
Işık Efektli kullanıcı rank kullanmak isterseniz, aşağıdaki basit kodlamayı yapmanız yeterli olacaktır.

banner2.gif

NOT: Orjinal konu linki : https://svgzone.ru/resources/banner-so-svetovym-ehffektom.26/

NOT : Benzer konudaki şu paylaşımlara da mutlaka göz atmanızı tavsiye ederiz

ip ucu - XenForo CSS Ranks,User banner nasıl yapılır ?
Video - XenForo'da Özel Rank Oluşturma

NASIL Yapılır:
1-
Kullandığımız temanın "extra.less" şablonuna aşağıdaki kodu ekliyoruz.

Kod:
.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

2- Daha sonra kullanıcı grup sayfasına girerek kullanıcı gruplarında görmek istediğimiz banner rengine göre gerekli düzenlemeyi yapıyoruz. /admin.php?user-groups/#__3

Kullanılabilecek özel CSS sınıf adları :

userBannerLight admin
userBannerLight moder
userBannerLight user

Screenshot_3.jpg

3- Yeni grup ilavesi ya da mevcut grup renklerini kendimize göre değiştirmek için yukarıda verilen şu satıra benzer satırda gerekli düzenlemeyi yapabilirsiniz.

Kod:
&.admin {
        background: #c62828;
    }
  • banner.gif
    banner.gif
    113.6 KB · Görüntüleme: 117
Yazar
mkucuksari
Görüntüleme
1,702
İlk yayınlama
Son güncelleme
Değerlendirme
0.00 yıldız 0 değerlendirme

mkucuksari ait diğer kaynakar

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.