Personalizar ranks com CSS

Detalhes da questão

Endereço do fórum: https://testesf.forumeiros.com/
Versão do fórum: AwesomeBB

Descrição

Olá pessoal do suporte! Um feliz ano novo!

Minha é questão é a seguinte, acabei vendo um modelo de rank bem interessante e gostaria de aderir ao meu fórum.
Este é o modelo: https://i.imgur.com/vNoD4li.png 
Localizado em: https://pabofc.forumeiros.com/

Eu iria adicionar esse modelo em todos os meus ranks do fórum, se possível, agradeço.

Olá @Ph1liphe,

O Modelo solicitado são imagens criadas pelo Administrador do Forum!

Pode recorrer a nossa área de Gráfica e solicitar um Rank ao seu gosto!

Adicionando depois no Painel de Controle    Usuarios e Grupos Administração de Ranks.

Qualquer dúvida disponha!

Atenciosamente,
Sleep

Salve, Devs.

Sim, isso é possível via folha de estilo CSS, adicione em seu CSS:

Código:

.rank {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    margin: 10px auto 0;
    width: 200px;
    padding: 0 5px;
    border-radius: 4px;
    border-bottom: 2px solid rgba(0,0,0,0.2);
}
.rank:before {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    left: 5px;
    background-color: rgba(255,255,255,0.2);
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-family: 'Font Awesome 5 Free';
}
@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}}

/* Ranks Administrativos*/
.rank.supr{
    background-image: linear-gradient(124deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
    background-size: 1800% 1800%;
    animation: rainbow 5s linear infinite;
}
.rank.supr:before {
    content: "\f521";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.tec {
    background: linear-gradient(to right, #000000, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #c0c0c0, #FFFFFF);
    background-size: 1800% 1800%;
    animation: rainbow 10s ease infinite;
}
.rank.tec:before {
    content: "\f121";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.p2 {
    background-image: linear-gradient(to right, #000000, #004002, #040038, #a98a01, #115000);
    background-size: 1800% 1800%;
    animation: rainbow 6s linear infinite;
}
.rank.p2:before {
    content: "\f21b";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.oficial {
    background-image: linear-gradient(to left, #009688 0%, #009688 100%);
}
.rank.oficial:before {
    content: "\f4fe";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.cor {
    background-image: linear-gradient(to right, #666666, #5c5c5c, #525252, #484848, #3f3f3f, #373737, #2f2f2f, #282828, #202020, #181818, #0e0e0e, #000000);
}
.rank.cor:before {
    content: "\f0e3";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.bope {
    background: repeating-linear-gradient(to right, #100E0E, #696969);
    background-size: 1800% 1800%;
    animation: rainbow 1.8s ease infinite;
}
.rank.bope:before {
    content: "\f714";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.sa {
    background-image: linear-gradient(to right, #00BF9F, #00ab8e, #008f77, #007562);
}
.rank.sa:before{
    content: "\f2bb";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.sof {
    background-image: linear-gradient(to left, #C4B868 0%, #C4B868 100%);
}
.rank.sof:before {
    content: "\f201";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.srp {
    background: linear-gradient(to left, #F0A000 0%, #F0A000 100%);
}
.rank.srp:before {
    content: "\f482";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

/*Ranks dos UsuÃÆâ€:tm:¡rios*/

.rank.mbr {
    background: linear-gradient(to left, #78866B, #626e58, #515c49, #434d3c);
}
.rank.mbr:before {
    content: "\f007";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.ins {
    background: linear-gradient(to left, #1D399E 0%, #1D399E 100%);
}
.rank.ins:before {
    content: "\f19d";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.tre {
    background: linear-gradient(to left, #F21818 0%, #F21818 100%);
}
.rank.tre:before {
    content: "\f19d";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.sup {
    background: linear-gradient(to left, #2BCF02 0%, #2BCF02 100%);
}
.rank.sup:before {
    content: "\f19d";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.prof {
    background: linear-gradient(to left, #821F82 0%, #821F82 100%);
}
.rank.prof:before {
    content: "\f19d";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.apol {
    background: linear-gradient(to left, #A1A1A1 0%, #A1A1A1 100%);
}
.rank.apol:before {
    content: "\f549";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

.rank.medalha {
    background: linear-gradient(to left, #c4ad00, #ad9900, #9e8c00, #827301);
}
.rank.medalha:before {
    content: "\f5a2";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
}

E crie ranks com o nome assim:

Código:

<div class="rank NOME_DO_RANK"></div>

Preencha NOME_DO_RANK com o nome do rank do CSS, ou seja, o que está escrito logo após de .rank no CSS que te passei.

Como presente, te dei todos os ranks do fórum.

Att, -Xerox-.

Muitíssimo obrigado, -Xerox-! 
Apliquei o CSS e criei o rank com seguinte titulo:

Código:

<div class=".rank.srp">SRP</div>

E ficou dessa forma:
https://i.imgur.com/XpbwpYS.png

Não sei se eu fiz algo errado e acho que o fundo desse rank do link, é padrão do fórum, ele não se encontra no CSS do fórum, estranho.

Salve, Devs.

Você aplicou da maneira errada, rsrs. Não tem problema, a culpa foi minha mesmo.

Vou te dar um exemplo aqui:

Código:

<div class="rank srp">Setor R. Públicas</div>

Att, -Xerox-.

Fala Xerox, boa noite!

Apliquei o ícone ao lado funcionou, porém, as cores não permaneceu a de antes.
https://imgur.com/a/5GJ5GB6

Tentei mudar as cores e tals mas permaneceu esse preto com azul.

Olá @Ph1liphe,

Tentei mudar as cores e tals mas permaneceu esse preto com azul.

O senhor deve desativar a opção "Melhorar seu CSS" na sua Folha de estilo (CSS)!

@-Xerox- e @Ph1liphe: O uso da formatação é usada só para destacar algo que ajudará a solucionar esta questão.


Atenciosamente,
pedxz.

Uso de formatação de texto Informamos que a formatação excessiva não é permitida no Fórum dos Fóruns. Isto é, o uso do riscado, o uso de alinhamentos, a alteração do texto, cor ou tamanho da fonte. Estes privilégios são reservados à Staff do Fórum dos Fóruns.

Muito obrigado, pode encerrar!!!!