Çözüldü Özel Tag

Obfuscate' Alıntı:

Merhaba

ip ucu - XenForo CSS Ranks,User banner nasıl yapılır ?

XenForo CSS Ranks,User banner nasıl yapılır ? Xenforo sisteminde CSS kokları ile user banner,Ranks nasıl yapılır onu anlatmaya çalışacağım. Uyarı eğer XF2 kullanmıyorsanız ikonlar görünemeyecektir. Görünmesi için Fa ikon sistemi foruma entegre...

xenforo.gen.tr

Bu konuya bakabilirsiniz

Genişletmek için tıkla ...

huseynalieff' Alıntı:

İlk olarak konu başlığınızda Kategori kurallarıdır lütfen konu açmadan önce okuyunuz konu kurallarına uygun olarak lütfen Acil,yardım vb gibi yazılar eklemeyin. Siz sorununuzu yazdığınızda zaten bu konu yöneticiler veya kullanıcılar uygun olduğunda sorunuz cevaplanacaktır.
İkinci olarak sizin css kodunuzda color özelliği olmadığı için yazı renklenmiyor.

CSS:

.userBanner--staff, .username--staff {
    color: red;
    font-weight:bold;
    background-image: linear-gradient(210deg, #8F343A, #26A65B, #1C86EE, #FFBE1C, #176093, #7AF26D, #8E44AD, #CC6600, #CF4D35, #E0EEEE) !important;
    background-size: 1200% 1200% !important;
    -webkit-animation: TurkBinGazi 15s ease infinite !important;
    -moz-animation: TurkBinGazi 15s ease infinite !important;
    -o-animation: TurkBinGazi 15s ease infinite !important;
    animation: TurkBinGazi 15s ease infinite !important;
}

@-webkit-keyframes TurkBinGazi {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes TurkBinGazi     {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-o-keyframes TurkBinGazi        {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes TurkBinGazi         {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}

test olarak bunu deneyin bakalım renklenecekmi kullanıcı adı daha sonra farklı kullanıcılara özel renk vermek için ise kullanıcı grubundan renk vereceğiniz gruba girerek Kullanıcı adı CSS bölümüne

CSS:

color: yellow;
    font-weight:bold;
    background-image: linear-gradient(210deg, #8F343A, #26A65B, #1C86EE, #FFBE1C, #176093, #7AF26D, #8E44AD, #CC6600, #CF4D35, #E0EEEE) !important;
    background-size: 1200% 1200% !important;
    -webkit-animation: TestDeneme 15s ease infinite !important;
    -moz-animation: TestDeneme 15s ease infinite !important;
    -o-animation: TestDeneme 15s ease infinite !important;
    animation: TestDeneme 15s ease infinite !important;

ekleyerek extra.less dosyanıza ise

CSS:

@-webkit-keyframes TestDeneme {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes TestDeneme    {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-o-keyframes TestDeneme       {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes TestDeneme        {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}

ekleyeceksiniz. Ancak dikkat! webkit kullanımında eğer farklı renkler kullanacaksanız TestDeneme gibi alanları farklı bir kullanıcı grubunda kullandığınızda değiştirmeniz gerek.

Genişletmek için tıkla ...

ByNeels' Alıntı:

Güncel...

Genişletmek için tıkla ...

 .userBanner--staff,
 .message-userBanner.userBanner {
     font-weight: bold;
     background-image: linear-gradient(270deg, #d83b3b, #e3ed20, #20ed2d, #2082ed, #cd20ed, #20edbe);
     background-size: 1200% 1200%;
     -webkit-animation: xengentr 15s ease infinite;
     -moz-animation: xengentr 15s ease infinite;
     -o-animation: xengentr 15s ease infinite;
     animation: xengentr 15s ease infinite;
 }
 
 @-webkit-keyframes xengentr {
     0% {
         background-position: 0% 50%
     }
     50% {
         background-position: 100% 50%
     }
     100% {
         background-position: 0% 50%
     }
 }
 
 @-moz-keyframes xengentr {
     0% {
         background-position: 0% 50%
     }
     50% {
         background-position: 100% 50%
     }
     100% {
         background-position: 0% 50%
     }
 }
 
 @-o-keyframes xengentr {
     0% {
         background-position: 0% 50%
     }
     50% {
         background-position: 100% 50%
     }
     100% {
         background-position: 0% 50%
     }
 }
 
 @keyframes xengentr {
     0% {
         background-position: 0% 50%
     }
     50% {
         background-position: 100% 50%
     }
     100% {
         background-position: 0% 50%
     }
 }

     background-image: linear-gradient(270deg, #d83b3b, #e3ed20, #20ed2d, #2082ed, #cd20ed, #20edbe) !important;
     background-size: 1200% 1200% !important;
     -webkit-animation: xengentr 30s ease infinite !important;
     -moz-animation: xengentr 30s ease infinite !important;
     animation: xengentr 30s ease infinite !important;
     color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
     font-weight: 900;