Ranks em CSS

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

Resolvido Ranks em CSS

Mensagem por PrisoN†BreaK em 30/08/16, 08:09 pm

Detalhes da questão


Endereço do fórum: brasilplayfreedom.forumeiro.com
Versão do fórum: PunBB

Descrição


Detalhes da questão


Endereço do fórum: brasilplayfreedom.forumeiro.com
Versão do fórum: PunBB

Descrição


Bom, eu uso esse código para meus ranks feito por CSS:

Código:
/* RANKS apenas victor*/
.rank {
    background: url(http://i.imgur.com/LTCAa5g.png);
    border-radius: 3px;
    border-top: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 2px 11px rgba(0,0,0,0.29);
    color: #fff;
    display: block;
    font-family: 'Roboto Condensed'!important;
    font-size: 11px!important;
    font-weight: 400;
    height: 25px;
    line-height: 25px;
    margin: 10px auto 0;
    max-width: 150px!important;
    padding: 2px 0!important;
    position: relative;
    text-shadow: 1px -1px rgba(0,0,0,0.29);
    text-transform: uppercase;
    width: 300px;
}

div.rank.subd {
            background-color: #D11736!important;
            text-align:center;
}
.rank:before {
    border-right: 1px solid rgba(255,255,255,0.55);
    content: "BPF";
    float: left;
    margin-top: -5px;
    padding: 5px 5px 0;
}
div.rank.fund {
            background-color: #105707!important;
            text-align:center;
  }
div.rank.mod {
            background-color: #2768A1!important;
            text-align:center;
  }
div.rank.mast {
            background-color: #ae5da0!important;
            text-align:center;
  }
div.rank.help {
            background-color: #72bec1!important;
            text-align:center;
  }
div.rank.adm {
            background-color: #1527ac!important;
            text-align:center;
  }
div.rank.adm5 {
            background-color: #8B658B!important;
            text-align:center;
  }
div.rank.des {
            background-color: #7A0C06!important;
            text-align:center;
  }
div.rank.own {
            background-color: #FF6600!important;
            text-align:center;
    }
div.rank.subd {
            background-color: #D11736!important;
            text-align:center;
  }
div.rank.memb {
            background-color: #8F8989!important;
            text-align:center;
    }
div.rank.max {
            background-color: #B00E4F!important;
            text-align:center;
    }
div.rank.dest {
            background-color: #c29211!important;
            text-align:center;
    }
 

Porém eu quero adicionar só alguns com uma imagem no lugar das letras ''BPF'' que seria um ícone como esse: http://i64.tinypic.com/24azsrd.png.

Seria possível?
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por Cepheus em 31/08/16, 11:13 am

Sim é possível,
Vou dar um exemplo,
Vamos supor que o seguinte rank "div.rank.memb" seja o que receberá a imagem: http://oi64.tinypic.com/24azsrd.jpg

Então seria acrescentado isso no seu css:
Código:

div.rank.memb:before {
    content: url('http://oi64.tinypic.com/24azsrd.jpg)')!important;
}

Faça esse processo de acordo com os ranks que deseja alterar.

Até mais.
avatar

Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 514
Pontos Ativos : 1085

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Ranks em CSS

Mensagem por PrisoN†BreaK em 31/08/16, 11:25 am

Certo, teria alguma forma para que eu possa ajusta o tamanho da imagem e posicionar ele no meio? E deixa a imagem o fundo dele um pouco mais fosco, teria como? Tipo essa parte: http://i.imgur.com/6jehfjB.jpg como vc pode ver, tem um pequena parte em fosco, eu gostaria de deixa como ela
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por Fraise em 01/09/16, 02:40 pm

Boa tarde.

Troque o código fornecido pelo Cepheus por este:
Código:

div.rank.memb:before {
    content: url('http://oi64.tinypic.com/24azsrd.jpg)')!important;
    margin-top: -8px;
    opacity: 0.4;
}

Atenciosamente,
Fraise.
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Ranks em CSS

Mensagem por PrisoN†BreaK em 02/09/16, 10:01 am

Gostaria de só centralizar a imagem msm, a parte em fosco ficou meio que ''zuado''
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por PrisoN†BreaK em 04/09/16, 09:40 am

#UP
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por PrisoN†BreaK em 07/09/16, 10:25 am

#UP
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por Cepheus em 08/09/16, 12:12 pm

PrisoN†BreaK escreveu:Gostaria de só centralizar a imagem msm, a parte em fosco ficou meio que ''zuado''

Como assim centralizar? poderia mostrar um Print Screen de como o rank está com a alteração e como gostaria?
avatar

Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 514
Pontos Ativos : 1085

Ver perfil do usuário http://www.bestskins.net/
  • 0

Resolvido Re: Ranks em CSS

Mensagem por Sennior em 09/09/16, 07:09 am

Saudações!

Meta este CSS substituindo o do nosso amigo Fraise:
Código:
.rank.subd {
    margin-top: -8px;
    background: url(http://oi64.tinypic.com/24azsrd.jpg))!important;
    background-repeat: no-repeat!important;
    z-index: 9999999;
    background-position-x: 32px!important;
    background-position-y: -1px!important;
}

Assim esta bom?
Até mais.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Ranks em CSS

Mensagem por PrisoN†BreaK em 09/09/16, 08:42 am

Pode fecha, já arrumei.
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum

Resolvido Re: Ranks em CSS

Mensagem por Cream em 09/09/16, 08:57 am

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum