Rank personalizado

Detalhes da questão

Endereço do fórum: https://comandonacional.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá, boa noite.
Estou com a seguinte dúvida. Como posso criar Ranks personalizados similar ao print anexado?
https://imgur.com/SzB3g2m

(Observação: Gostaria que fosse em efeito Rainbow)

Desde já, obrigado!  
- Atenciosamente,
Syker

Olá! Seja bem-vindo(a) ao suporte Forumeiros! Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber: As nossas regras: gerais, do setor de suporte e das criações gráficas; A nossa lista de tutoriais e de perguntas e respostas frequentes; A nossa equipa voluntária; E a função de procura.

Oi, Syker. Espero que esteja tudo bem por aí!

Acedi ao seu fórum e dei uma analisada na folha de estilo (CSS) e já obtém a personalização dos ranks. No caso, é só editar até que fique como o senhor deseja ou a dúvida é como aplicá-lo ao usuário do seu fórum?

Espero respostas
Atenciosamente,
Mpezin

Olá! @Syker
Consegui preparar para você este código de um intervalo semelhante. Para adicionar um símbolo Font-Awesome, visite esta página para que você possa escolher o ícone desejado.

Código:

.Supremo {
background-color: #EAD239;
padding: 5px;
border-radius: 10px;
border-left: 20px solid #C0A935;
color: white;
text-transform: uppercase;
text-shadow: 0 0 2px white;
font-weight: 700;
}
.Supremo:after {
     content: "\f000";
    font-family: 'FontAwesome';
}

Font Awesome Icons

Esqueci de colocar: No nome do intervalo coloque este código:

Código:

<div class="supremo"> Supremo </div>

Mpezin escreveu:

Olá! Seja bem-vindo(a) ao suporte Forumeiros! Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber: As nossas regras: gerais, do setor de suporte e das criações gráficas; A nossa lista de tutoriais e de perguntas e respostas frequentes; A nossa equipa voluntária; E a função de procura.

Oi, Syker. Espero que esteja tudo bem por aí!

Acedi ao seu fórum e dei uma analisada na folha de estilo (CSS) e já obtém a personalização dos ranks. No caso, é só editar até que fique como o senhor deseja ou a dúvida é como aplicá-lo ao usuário do seu fórum?

Espero respostas
Atenciosamente,
Mpezin

Olá, Mpezin. Espero também que esteja tudo bem por aí!

Em minha folha de estilo (CSS) há um modelo de personalização de ranks, porém não obtive êxito ao fazer da forma que eu queria. A dúvida é: como fazer esses tipos de ranks personalizados similares ao print supracitado anteriormente.

No aguardo de uma resposta
Atenciosamente,
Syker

Boa noite @Syker!

Pelo que deu de ver na sua folha de estilo (CSS), a mesma classe .rank repete várias vezes em sua css, sem contar que sua rank está se encontrando em class <span> que o certo deveria ser <div>.

Organizando de forma em geral, você não precisa repetir várias vezes o mesmo elemento de código, você pode fazer de forma que o pseudo-elemento se encontre em sua div, um exemplo seria:
<div class="rank rank-dev">Um pato....</div>

Percebe-se que eu coloquei a class rank duas vezes, entretanto uma será apenas da class .rank e enquanto a seguinte será apenas da classe que tenha a palavra rank e dev encontrada

O modelo de seu rank que acredito que você deseja, seja neste seguinte modelo:

Código:


.rank {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 40px;
    margin: 10px auto 0;
    width: 200px;
    border-radius: 6px;
    border-bottom: 2px solid rgba(0,0,0,0.2);
}
.rank:before {
    float: left;
    width: 36px;
    height: 39px;
    line-height: 39px;
    left: 5px;
    background-color: rgba(255,255,255,0.2);
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-family: 'Font Awesome 5 Free';
}


Sobre a questão do cargo colorido, veja se o seguinte link venha te auxiliar sobre sua questão: Cargo com efeito arco-íris

Abraços,
do seu amigo da comunidade, Musashi!