Como coloca esse retangulo?

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

Resolvido Como coloca esse retangulo?

Mensagem por News em 08/06/13, 01:15 pm

Qual é minha questão:
Ola eu queria saber como colocar um retangulo asim em baixo do rank com o da imagem abaixo:









Até

Endereço do meu fórum:
http://animestube.forumeiros.com

Versão do fórum:
PUNBB


Última edição por News em 08/06/13, 05:28 pm, editado 1 vez(es)
avatar

News
Nível 9

Masculino
Inscrito dia : 06/04/2013
Mensagens : 238
Pontos Ativos : 381

Ver perfil do usuário http://universalpixel.forum-pro.net/

Resolvido Re: Como coloca esse retangulo?

Mensagem por -Yts em 08/06/13, 01:32 pm

Olá

Vá em Usuários e Grupos Seta Ranks Seta Administração dos ranks

e coloca um Rank

exemplo Admnistrador e esse quadradinho entra automaticamente.

-Yts
Nível 8

Masculino
Inscrito dia : 26/05/2013
Mensagens : 130
Pontos Ativos : 210

Ver perfil do usuário http://powerduckets.forumfacil.net/

Resolvido Re: Como coloca esse retangulo?

Mensagem por News em 08/06/13, 01:35 pm

não funfo Triste
avatar

News
Nível 9

Masculino
Inscrito dia : 06/04/2013
Mensagens : 238
Pontos Ativos : 381

Ver perfil do usuário http://universalpixel.forum-pro.net/

Resolvido Re: Como coloca esse retangulo?

Mensagem por MateusA em 08/06/13, 02:19 pm

Caro usuário,

Antes de postar uma pergunta, veja se a mesma já não se encontra respondida em tópicos criados anteriormente. Isso torna o processo de ajuda muito mais eficiente. Lembre-se de seguir as recomendações feitas antes de postar sua dúvida, elas evitam que casos assim aconteçam!

Veja se este tópico consegue resolver a sua dúvida, caso não basta que volte a nos informar para que possamos ajudá-lo a resolver o problema:
Seta Como colocar esse rank?

Recomendamos que utilize sempre a busca do fórum e, veja se já não existe um tutorial para a função em:


Atenciosamente.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como coloca esse retangulo?

Mensagem por News em 08/06/13, 02:27 pm

Olá não consegui coompreender o topico peço que me ajude.

Quero as cores asim

Administradores > Vermelho
Moderador > Azul
Designer > Roxo
Membros > Ciano


Ateciosamente
avatar

News
Nível 9

Masculino
Inscrito dia : 06/04/2013
Mensagens : 238
Pontos Ativos : 381

Ver perfil do usuário http://universalpixel.forum-pro.net/

Resolvido Re: Como coloca esse retangulo?

Mensagem por MateusA em 08/06/13, 03:05 pm

Olá! Piscada

Aceda ào "Rank que deseja modificar":
Painel de Controle Seta Usuários Seta Ranks Seta Administração dos Ranks
Procure pelo rank que deseja modificar e clique em

Seta Substitua o titulo do rank pelo código abaixo:

Código:
<span class="userManagement">NOME DO RANK</span>

Seta No código acima, procure por NOME DO RANK, substitua pelo nome de seu rank e salve.

:seta2: A cada novo rank, para mudar a cor do mesmo terá de fazer algumas modificações:
Spoiler:
Ao ter concluído o passo anterior, será necessário entender algumas coisas:

Vamos fazer um exemplo:

Após ter salvo as modificações no rank anterior, aceda em algum outro rank, e clique em modificar
No titulo do rank não vai ser o mesmo código do passo acima, terá acrescentar uma coisa.

Veja:
Spoiler:
Código anterior:

Código:
<span class="userManagement">NOME DO RANK</span>

Como deve ficar o código atual:

Código:
<span class="userManagement1">NOME DO RANK</span>

Seta Qual a modificação de um para o outro? no segundo código foi adicionado ao lado do userManagement o número 1, isso será necessário editar em cada rank que for alterar, a cada rank você sobe um numero.

Aceda à "Folha de Estilos CSS":
Painel de Controle Seta Visualização Seta Imagens & Cores Seta Cores Seta Folha de Estilo CSS

Código:

Código:
        .userManagement {
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #c70c0c;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 5px;
        padding: 3px 8px;
        text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
        }


:seta2: A cada novo rank, terá de editar algumas coisas, e definir a sua respectiva cor.
Spoiler:
Ao ter entendido o passo anterior, será necessário entender o segundo passo para conseguir o efeito desejado.

Veja a diferença de um código para o outro:
Spoiler:

Código antigo:
Código:
        .userManagement {
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #c70c0c;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 5px;
        padding: 3px 8px;
        text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
        }

Código novo:

Código:
        .userManagement1 {
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #c70c0c;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 5px;
        padding: 3px 8px;
        text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
        }

Seta Qual a diferença? no segundo código foi adicionado o número 1, essa mudança será necessária para o efeito funcionar.

:seta2: Como mudar o background? a cor do texto? a cor da borda etc.

Entenda o código:

Código:
        .userManagement {
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background: #c70c0c;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 5px;
        padding: 3px 8px;
        text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
        }

Seta -moz-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
Essas propriedades faz com que a borda do rank fique mais arredondada caso queira deixar ela mais arredondada almente o 3px

Seta color: #fff;
Essa propriedade faz com que a cor do texto mude, para alterar a cor do texto basta substituir o #fff pelo nome da cor desejada em inglês


Seta background: #c70c0c;
Essa propriedade faz com que o background do rank mude, caso queira mudar a cor basta alterar o #c70c0c pelo nome da cor desejada em inglês


Até mais. Piscada
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como coloca esse retangulo?

Mensagem por T-Lord em 08/06/13, 03:09 pm

Olá, creio que viu no meu fórum ZoneToony deveria ter citado para melhor visualização dos membros ou staff´s para pegarem o código!

Vamos ao que interessa!

Adicione esse código no CSS:
Código:
/* Perfil Personalizado Inicio */

.userGerente, .userAdministrador, .userModerador, .userMembro, .userVisitante, .userPostador, .userMembro Ativo, .userGameZone, .userDesigner {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #65a830;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 700;
margin-top: 5px;
padding: 3px 8px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.userAdministrador {
background: #881418;
}

.userModerador {
background: #0000FF;
}

.userDesigner {
background: #990099;
}

.userMembros {
background: #666666;
}

E salve!
_______
Para colocar o rank, você deve ir em Usuários & Grupos Ranks Depois "Titulo do Rank" coloque esse código:

Código:
<span class="userAdministrador">Administrador</span>

Onde tem "userAdministrador" poderá mudar de acordo com o rank exemplo para um designer "userDesigner", e logo do lado tem o nome "Administrador" que pode ser mudado por qualquer nome desejado a aparecer no rank em seu perfil no tópico.


Espero ter ajudado!
avatar

T-Lord
Nível 10

Masculino
Inscrito dia : 29/12/2010
Mensagens : 253
Pontos Ativos : 491

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

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