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 gradient: Renk Geçişli User Banner - Özel Rank

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

Banner.jpg


NOT: Orjinal konu linki : https://svgzone.ru/resources/banner-s-gradientom.25/

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:
.linear-gradient-prefixes(@deg, @start, @end) {
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end) {
    .linear-gradient-prefixes(left, @start, @end);
}

.gradientBanner {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
    &.admin {
        .linear-gradient(left, #E70707, #5E0000)
    }
    &.moder {
        .linear-gradient(left, #029B0E, #C10000)
    }
    &.user {
        .linear-gradient(left, #02739B, #00C134)
    }
    &.lamer {
        .linear-gradient(left, #6CD4F9, #005FAD)
    }
    .memberHeader-banners & {
        [data-template="member_view"] & {
            width: 120px!important;
        }
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: 3px 5px;
    }
}

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ı :

gradientBanner admin
gradientBanner moder
gradientBanner user
gradientBanner lamer

Screenshot_1.jpg Screenshot_2.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:
&.moder {
        .linear-gradient(left, #029B0E, #C10000)
    }
Yazar
mkucuksari
Görüntüleme
1,741
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 1 değerlendirme

mkucuksari ait diğer kaynakar

Son incelemeler

Teşekkürler, Elinize sağlık.

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.