Ranks em CSS

[PrisoN†BreaK]

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: https://2img.net/h/oi64.tinypic.com/24azsrd.png.

Seria possível?

[Cepheus]

Sim é possível,
Vou dar um exemplo,
Vamos supor que o seguinte rank "div.rank.memb" seja o que receberá a imagem: https://2img.net/h/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.

[PrisoN†BreaK]

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: https://i.imgur.com/6jehfjB.jpg como vc pode ver, tem um pequena parte em fosco, eu gostaria de deixa como ela

[Fraise]

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.

[PrisoN†BreaK]

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

[PrisoN†BreaK]

#UP

[PrisoN†BreaK]

#UP

[Cepheus]

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?

[Sennior]

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

[PrisoN†BreaK]

Pode fecha, já arrumei.

[Cream]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".