Xenforo Özel Rank Tasarımı 2023

Selamlar Forumlar üzerinde bildiğiniz gibi özel rank tasarımları mevcuttur. Bu konumda sizlere istediğiniz gibi bir rank tasarımı yapabileceğinizi anlatacağım.

İlk olarak özel rank tasarımınız nasıl yapmak istiyorsunuz?



Örnek olarak bu şekilde yapmak istiyorsanız en başta Rankınızı oluşturup daha sonrasında özel css kısmına belirlediğiniz bir nick, mesaj vb gibi şeyleri yazmanız gerekmektedir. Daha sonrasında FTP yolu ile örnek olarak : public_html/Forum/img img dosyası yok ise kendiniz oluşturup gifinizi atabilirsiniz. Gif'i attıktan sonra Admincp >> Görünüm ve Diller >> Temalarınız >> extra.less kısmına girip ilk olarak özel css koduna yazdığınız nickname'i ;

Ama normal bir rank olsun istiyorsanız yine aynı şekilde özel css kodu ile extra.less kısmına şu kodları yazabilirsiniz.



Kodumuzu yazdıktan sonra sıra geldi rank için icon ayarlamaya koddaki iconu değiştmek için content: "\f0e3"; f0e3 kısmını değiştirebilirsiniz. Sizlere önerebileceğim bir ikon sitesi : İkon Sitesi

İyi günler ve Başarılar Dilerim.

Cheff Harika ve detaylı bir konu, teşekkürler.

Elinize sağlık gerçekten harika bir konu olmuş hatta tasarımı bayağı beğendim. Biraz daha geliştirilebilir.

Konu için teşekkürler

Teşekkürler

Aradığım bir konuydu teşekkürler

teşekkürler

Cheff' Alıntı:

Selamlar Forumlar üzerinde bildiğiniz gibi özel rank tasarımları mevcuttur. Bu konumda sizlere istediğiniz gibi bir rank tasarımı yapabileceğinizi anlatacağım.

İlk olarak özel rank tasarımınız nasıl yapmak istiyorsunuz?

Ekli dosyayı görüntüle 1397

Örnek olarak bu şekilde yapmak istiyorsanız en başta Rankınızı oluşturup daha sonrasında özel css kısmına belirlediğiniz bir nick, mesaj vb gibi şeyleri yazmanız gerekmektedir. Daha sonrasında FTP yolu ile örnek olarak : public_html/Forum/img img dosyası yok ise kendiniz oluşturup gifinizi atabilirsiniz. Gif'i attıktan sonra Admincp >> Görünüm ve Diller >> Temalarınız >> extra.less kısmına girip ilk olarak özel css koduna yazdığınız nickname'i ;

Kod:

.nickname
{
    background-image: url("gif kısmının bağlantısı yani, forumadı/forum/img/founder.gif");
    background-repeat: no-repeat;
    background-size: 145px 60px;
    height: 70px;
    width: 145px;
    text-indent: -9999px;
    white-space: nowrap;
}

Ama normal bir rank olsun istiyorsanız yine aynı şekilde özel css kodu ile extra.less kısmına şu kodları yazabilirsiniz.

Kod:

.nickname {
    background-color: #be132d;
    border: 1px solid #be132d;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    -webkit-box-shadow: 0 0 1px #F9F9F9 inset;
    -moz-box-shadow: 0 0 1px #F9F9F9 inset;
    -o-box-shadow: 0 0 1px #F9F9F9 inset;
    color: #ffffff !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0px 4px;
    vertical-align: middle;

}

.nickname:before {
    content: "\f0e3";
    .m-faBase();
    margin-right: 5px;
    font-weight: normal;
    font-size: 100%;
}

Kodumuzu yazdıktan sonra sıra geldi rank için icon ayarlamaya koddaki iconu değiştmek için content: "\f0e3"; f0e3 kısmını değiştirebilirsiniz. Sizlere önerebileceğim bir ikon sitesi : İkon Sitesi

İyi günler ve Başarılar Dilerim.

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

Harika hocam teşekürler

Rank tasarımı şahane duruyor eline sağlık

sahane

eyww

eyw

Cheff' Alıntı:

Selamlar Forumlar üzerinde bildiğiniz gibi özel rank tasarımları mevcuttur. Bu konumda sizlere istediğiniz gibi bir rank tasarımı yapabileceğinizi anlatacağım.

İlk olarak özel rank tasarımınız nasıl yapmak istiyorsunuz?

Ekli dosyayı görüntüle 1397

Örnek olarak bu şekilde yapmak istiyorsanız en başta Rankınızı oluşturup daha sonrasında özel css kısmına belirlediğiniz bir nick, mesaj vb gibi şeyleri yazmanız gerekmektedir. Daha sonrasında FTP yolu ile örnek olarak : public_html/Forum/img img dosyası yok ise kendiniz oluşturup gifinizi atabilirsiniz. Gif'i attıktan sonra Admincp >> Görünüm ve Diller >> Temalarınız >> extra.less kısmına girip ilk olarak özel css koduna yazdığınız nickname'i ;

Kod:

.nickname
{
    background-image: url("gif kısmının bağlantısı yani, forumadı/forum/img/founder.gif");
    background-repeat: no-repeat;
    background-size: 145px 60px;
    height: 70px;
    width: 145px;
    text-indent: -9999px;
    white-space: nowrap;
}

Ama normal bir rank olsun istiyorsanız yine aynı şekilde özel css kodu ile extra.less kısmına şu kodları yazabilirsiniz.

Kod:

.nickname {
    background-color: #be132d;
    border: 1px solid #be132d;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    -webkit-box-shadow: 0 0 1px #F9F9F9 inset;
    -moz-box-shadow: 0 0 1px #F9F9F9 inset;
    -o-box-shadow: 0 0 1px #F9F9F9 inset;
    color: #ffffff !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0px 4px;
    vertical-align: middle;

}

.nickname:before {
    content: "\f0e3";
    .m-faBase();
    margin-right: 5px;
    font-weight: normal;
    font-size: 100%;
}

Kodumuzu yazdıktan sonra sıra geldi rank için icon ayarlamaya koddaki iconu değiştmek için content: "\f0e3"; f0e3 kısmını değiştirebilirsiniz. Sizlere önerebileceğim bir ikon sitesi : İkon Sitesi

İyi günler ve Başarılar Dilerim.

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

teşekkürler

deneyeceğim

Eyw