Rank personalizado

5 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Rank personalizado

Mensagem por Syker 30.03.22 21:27

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 Rosa
Syker

Syker
Nível 1

Masculino
Membro desde : 20/03/2022
Mensagens : 2
Pontos : 4

https://pmcnm.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank personalizado

Mensagem por Mpezin 31.03.22 1:39

Olá! Seja bem-vindo(a) ao suporte Forumeiros!


Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber:

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 Positivo
Mpezin

Mpezin
Nível 9

Masculino
Membro desde : 28/05/2020
Mensagens : 184
Pontos : 173

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank personalizado

Mensagem por LucianoMicle 31.03.22 1:51

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>
LucianoMicle

LucianoMicle
Nível 9

Masculino
Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank personalizado

Mensagem por Syker 31.03.22 15:43

Mpezin escreveu:

Olá! Seja bem-vindo(a) ao suporte Forumeiros!


Como acabou de inscrever-se, aqui estão alguns pontos importantes a saber:


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 Positivo

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 Party
Syker

Syker
Nível 1

Masculino
Membro desde : 20/03/2022
Mensagens : 2
Pontos : 4

https://pmcnm.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Rank personalizado

Mensagem por Musashi 01.04.22 1:22

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 Hein, hein, hein...?

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! Muito feliz
Musashi

Musashi
Ajudeiro
Ajudeiro

Masculino
Membro desde : 17/02/2021
Mensagens : 409
Pontos : 496

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank personalizado

Mensagem por pedxz 06.04.22 11:44

Tópico resolvido


Movido para "Questões resolvidas".
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7139
Pontos : 8370

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos