Borda do perfil para membros especificos

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

Resolvido Borda do perfil para membros especificos

Mensagem por sTr em 01/03/14, 11:44 pm

  • Descrição:
Qual é minha questão:
Olá, Queria saber o que é preciso para poder adicionar essas bordas ao redor do perfil de determinado Grupo.
Print ↓
» Membro: → http://imageshack.com/a/img534/332/q0y4.png
» Moderador → http://imageshack.com/a/img513/5188/rl6n.png

Queria colocar essas margem de acordo com a cor de um determinado grupo/rank..
Para isso queria saber o que é preciso para poder efetuar esse efeito, Alguém poderia ajudar?

  • Informações:
Fórum:http://stforum.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:borda,perfil,membros,especificos

avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por Troubleshoot em 02/03/14, 12:28 am

Olá!
Este efeito foi visto em algum fórum? Se sim, pode nos passar o fórum?
Assim facilita para que possamos localizar e modificar o código de acordo com o seu fórum.


Cordialmente,
Engine404
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2200
Pontos Ativos : 2943

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Borda do perfil para membros especificos

Mensagem por ShiroK em 02/03/14, 01:38 am

Olá,

Aplique o CSS abaixo a sua ''folha de estilo'',

Código:
tr.post td.row1:first-child, tr.post td.row2:first-child {
    padding-bottom: 15px;
    padding-top: 50px;
    text-align: center;
    border-style: solid;
    border-color: rgb(153, 85, 51);
    border-width: 2px;
    border-radius: 20px;
}

Atenciosamente,
ShiroK
avatar

ShiroK
Nível 10

Masculino
Inscrito dia : 01/03/2014
Mensagens : 271
Pontos Ativos : 387

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 04:10 am

sasuky escreveu:Olá!
Este efeito foi visto em algum fórum? Se sim, pode nos passar o fórum?
Assim facilita para que possamos localizar e modificar o código de acordo com o seu fórum.
Cordialmente,
Engine404
http://tssabrasil.forumeiros.com/
-
@ShiroK escreveu:Olá,

Aplique o CSS abaixo a sua ''folha de estilo'',

Código:
tr.post td.row1:first-child, tr.post td.row2:first-child {
    padding-bottom: 15px;
    padding-top: 50px;
    text-align: center;
    border-style: solid;
    border-color: rgb(153, 85, 51);
    border-width: 2px;
    border-radius: 20px;
}

Atenciosamente,
ShiroK

Não obteve resultado!
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por ShiroK em 02/03/14, 04:17 am

Olá,

Tente o seguinte código,
Código:
.postdetails {
  background-image: url("http://d10.e-loader.net/DPB28r4sxL.jpg");
    border-bottom: 2px solid #BEBEC1;
    box-shadow: 0 0 8px #B1B1B6;
    margin-top: -21px;
    padding: 37px 8px 8px;
}

Adicione em,
Painel... -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Atenciosamente,
ShiroK
avatar

ShiroK
Nível 10

Masculino
Inscrito dia : 01/03/2014
Mensagens : 271
Pontos Ativos : 387

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 04:24 am

ShiroK
Não obteve resultado..

OBS: Na minha folha de estilos CSS não tem nada.. '-'
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por ShiroK em 02/03/14, 04:39 am

Olá,

Aceda,
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript

Depois carregue-se no botão "Criar um novo javascript".

Código:
jQuery(document).ready(function(){if(location.pathname=='/uID'){jQuery('head').append('<style>CSS</style>')}});


ID -> ID do usuário que terá seu perfil modificado. Exemplo: 1
CSS -> Substituir pelo código CSS que será aplicado ao perfil desse usuário.


Substituia o CSS por este código, 

Código:
.postprofile {
border:3px solid #000000;
}

Lembrando que,

O tamanho poderá ser mudado ao alterar a quantidade ''px'' e a cor será mudado ao alterar o código hexadecimal, que atualmente está como ''#000000''.

Atenciosamente,
ShiroK
avatar

ShiroK
Nível 10

Masculino
Inscrito dia : 01/03/2014
Mensagens : 271
Pontos Ativos : 387

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 05:05 am

Agora teve resultado mais ainda não está como eu queria! ↓
http://imageshack.com/a/img27/6038/ohlu.png

OBS: Em "Criar um novo javascript" eu coloquei qualquer título que foi ''Moderadores''...
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por ShiroK em 02/03/14, 05:12 am

Olá,

Aceda,
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Aplique o código abaixo,

Código:
#outer-wrapper {background-image: url(SUA IMAGEM);margin: 0;min-height: 2px;padding: 0;}

Em ''SUA IMAGEM'' preencha com o link de uma borda, abaixo segue uma borda bem utilizada,

http://upamais.com/images/71266649952300822895.png

Atenciosamente,
ShiroK
avatar

ShiroK
Nível 10

Masculino
Inscrito dia : 01/03/2014
Mensagens : 271
Pontos Ativos : 387

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 05:19 am

Olá
Ainda continua com as bordas pretas, E a imagem ficou em outro lugar...
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por ShiroK em 02/03/14, 05:24 am

Olá,

Aceda,
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS



Código:
body{ background-attachment: fixed; background-color: white; background-image: url(SUA-IMAGEM); background-position: 50% 0%; background-repeat: repeat-x; color: black; cursor: url(SUA-IMAGEM), url(SUA-IMAGEM), auto; display: block; font-family: Corbel; font-size: 12px;line-height: 16px; margin-bottom: 30pxpx; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; }#wrap > div,#wrap > div > div{background-color:transparent}#left,#right{display:none} #wrap{padding:50px;padding-top:30px;width: 1150px; border: 0px; background: url(SUA-IMAGEM) transparent;background-size:100% auto}

Preencha os campos com ''SUA-IMAGEM'', 

Realmente está ficando complicado mas iremos resolver isto, pode me passar o link da imagem no qual quer utilizar como borda?

Atenciosamente,
ShiroK
avatar

ShiroK
Nível 10

Masculino
Inscrito dia : 01/03/2014
Mensagens : 271
Pontos Ativos : 387

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 05:33 am

@ShiroK escreveu:
Realmente está ficando complicado mas iremos resolver isto, pode me passar o link da imagem no qual quer utilizar como borda?

Eu queria esse resultado » Membros: http://imageshack.com/a/img534/332/q0y4.png
E os demais em outras cores!


OBS: Esse ultimo COD ele mudou colocou a imagem no fundo do fórum, Mais eu quero somente as bordas nos perfil!
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por iPrompt em 02/03/14, 10:50 am

Olá,

Adiciona este código JavaScript seguindo os passos do Shirok

Código:
jQuery(document).ready(function(){if(location.pathname=='/uID'){jQuery('head').append('<style>CSS</style>')}});

CSS

Código:
.postprofile {
        background: none repeat scroll 0% 0% #FFF!important;
    border-width: 1px 1px 1px 6px!important;
    border-style: solid!important;
    border-color: #808080 #808080 #808080 #7E7E7E!important;
    -moz-border-top-colors: none!important;
    -moz-border-right-colors: none!important;
    -moz-border-bottom-colors: none!important;
    -moz-border-left-colors: none!important;
    border-image: none!important;
    font-size: 12px!important;
    padding: 7px!important;
    width: 18.9%!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 03:10 pm

Olá Quakeline
Agora surgiu o resultado que eu esperava
» http://imageshack.com/a/img801/5616/j05o.png

Só que eu queria cada grupo com uma cor, Legenda:» http://imageshack.com/a/img35/1889/4ux2.png
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por iPrompt em 02/03/14, 03:41 pm

Olá,

Substitua o JS por este

jQuery(document).ready(function(){
jQuery(".postprofile:has('.nomedorank')"){jQuery('head').append('<style>CSS</style>')}});;

nomedorank :seta:Altere o nome, exemplo, para os administradores coloque "equipefundoadm";
CSS :seta:Coloque o CSS que eu passei

Caso realizado, aceda á:
Painel de controle ->> Usuários e grupos ->> Ranks ->> Administração dos ranks ->>
Selecione um rank e clique em "", no título do mesmo altere para este:

<span class="equipefundo">NOME DO RANK</span>

equipefundo
:seta:Altere conforme mudar o valor "equipefundo" do código java script (o primeiro codigo), feito isto clique em salvar.

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 04:35 pm

Olá Quakeline
Eu fiz dessa forma. ↓
CSS: » http://imageshack.com/a/img21/8588/05om.png
JS: » http://imageshack.com/a/img198/7840/mgou.png
RANK:» http://imageshack.com/a/img208/5682/8ral.png
Resultado:» http://imageshack.com/a/img191/3562/gtvy.png

Ainda continua todos com a mesma margem e a mesma cor!
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por iPrompt em 02/03/14, 05:26 pm

Olá,

O CSS você deve colocar dentro do JS no lugar de CSS, entre <style>

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 05:34 pm

Olá
Eu tirei CSS da folha de estilo e coloquei ele dentro do JS.. ↓↓↓

Código:
jQuery(document).ready(function(){
jQuery(".postprofile:has('.Dono')"){jQuery('head').append('<style>    .postprofile {
            background: none repeat scroll 0% 0% #FFF!important;
        border-width: 1px 1px 1px 6px!important;
        border-style: solid!important;
        border-color: #808080 #808080 #808080 #7E7E7E!important;
        -moz-border-top-colors: none!important;
        -moz-border-right-colors: none!important;
        -moz-border-bottom-colors: none!important;
        -moz-border-left-colors: none!important;
        border-image: none!important;
        font-size: 12px!important;
        padding: 7px!important;
        width: 18.9%!important;
    }</style>')}});;
Mais ai ficou sem margem agora!
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por iPrompt em 02/03/14, 05:39 pm

Olá,

Altere o JS por este

Código:
    jQuery(document).ready(function(){
    jQuery(".postprofile:has('.Dono')"){jQuery('postprofile').css('
                background: none repeat scroll 0% 0% #FFF!important;
            border-width: 1px 1px 1px 6px!important;
            border-style: solid!important;
            border-color: #808080 #808080 #808080 #7E7E7E!important;
            -moz-border-top-colors: none!important;
            -moz-border-right-colors: none!important;
            -moz-border-bottom-colors: none!important;
            -moz-border-left-colors: none!important;
            border-image: none!important;
            font-size: 12px!important;
            padding: 7px!important;
            width: 18.9%!important;
        }')}});;

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por sTr em 02/03/14, 06:10 pm

Continua sem nada... Triste
avatar

sTr
Nível 8

Masculino
Inscrito dia : 25/12/2013
Mensagens : 145
Pontos Ativos : 211

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por BrunoH. em 02/03/14, 06:21 pm

Olá,

Retire todos os códigos fornecidos anteriormente. Siga os passos:

Adicione uma nova página JavaScript (investimento: "em todas as páginas"). Código:
Código:
jQuery(document).ready(function(){
jQuery(".postprofile:has('.admin')").css({'border-color': '#0048FF', 'border-left-width': '10px','border-left': 'solid 10px #7E7E7E';})});
Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript

Após adicionar a página JavaScript, vá até as configurações dos Ranks:
Painel de Controle Seta Usuários Seta Ranks Seta Administração dos Ranks

Escolha o Rank desejado e clique em configurações. No título cole este código:
Código:
<span class="admin">Administrador</span>
e Salve!

LEMBRE-SE: Apenas siga as instruções, não altere NADA! Depois que você ver que resulto, ai sim você pode alterar.

Atenciosamente.

Tópico movido de 'Questões sobre códigos' para 'JavaScript e jQuery'
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Borda do perfil para membros especificos

Mensagem por Daemon em 12/04/14, 01:04 am

Abra o spoiler e veja este tutorial em meu fórum que pode ajudá-lo:
Spoiler:
REMOVIDO POR JSCRIPT
Piscada!


Última edição por JScript em 12/04/14, 01:25 am, editado 1 vez(es) (Razão : Linkd de publicação!)
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por JScript em 12/04/14, 01:26 am

@Daemon.H

Você já fez a "publicação" de seu fórum, portanto se não poder ajudar aqui, não há necessidade de postar links!

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por Daemon em 12/04/14, 09:25 am

@JScript

Exatamente por isto eu adicionei o link em spoiler, pois minha intenção não era divulgar, visto que passei o link do tutorial para ajudá-lo e não do fórum somente.
Mas tranquilo, o código é este:
Código:
$(function(){
function staff(e) {
("retorna a 0 se não for definido, 'adm' se for adminitrador, 'mod' se for moderador");
  var span = e.getElementsByTagName('span')[0];
  if(!span) return 0;
  var cor = span.getAttribute('style');
("FF0000 a cor hexadecimal do grupo administradores ao qual iremos adicionar a variável");
  return cor ? { 'FF0000' : 'adm', '000099' : 'mod' }[ cor.match(/#([\w\d]+)/)[1].toUpperCase() ] : 0;
};
for(var post = $('.post'), i = 0, p; (p = post[i++]); ) {
    var user = $('.username a', p)[0]
    , userStatus = staff(user);

    if(userStatus == 'adm') p.className += ' admin';
    if(userStatus == 'mod') p.className += ' moderador';
}
});
Iremos adicionar variáveis para cada grupo nesta parte do código:
Código:
return cor ? { 'FF0000' : 'adm', '000099' : 'mod' }
Foi adicionado para o grupo de cor FF0000(administrador) e 000099(moderador).
Depois é adicionado uma classe para o post de cada grupo:
Código:
if(userStatus == 'adm') p.className += ' admin';
if(userStatus == 'mod') p.className += ' moderador';
Então adicionamos no css o elemento do post com a nova classe do grupo:
Código:
.post.admin {
background: #ffd9d9;
}
.post.admin .user .user-ident .user-basic-info, .post.admin .user .user-info {
background: #d9f5ff;
}
Resultado:


Veja o que podemos fazer com este código também:

Basta adicionar o seguinte:
Código:
.post.admin {
background-image: url(http://imgur.com/PF0HMMi.png);
background-position: 100% 35px;
background-repeat: no-repeat;
}
Piscada!
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por waghcwb em 16/04/14, 10:05 pm

Olá, você pode usar esse código:
Código:
$(function(){
    //cor do grupo
    jColor = "#FF0000";

    //seleciona a cor do grupo e adiciona uma borda ao redor daquela postagem, fique atento ao primeiro seletor ali ".username", ele pode variar de fórum para fórum, basta você verificar!
    $('.postprofile span[style="color:'+jColor+'"]').parents('.postprofile').css({

        //largura das bordas || os valores são definidos assim: superior direita inferior esquerda || ou seja, temos todas as bordas com 0px de largura a não ser a borda esquerda que tem 5px de largura!
        'border-width':'0 0 0 5px',

        //aqui colocamos a cor da borda na mesma cor do grupo, caso queira por uma cor especial troque o "jColor" por " '#COR EM RGB' " (note que está entre aspas simples!
        'border-color':jColor,

        //estilo da borda, você ainda pode alterar o valor para outros como dashed, dotted, double, groove e etc...
        'border-style':'solid'

    //caso queira adicionar mais propriedades ao post do grupo, coloque uma vírgula logo depois de 'solid' e adicione as propriedades logo em seguida!
    });

});

Onde (como ja está nos comentários do código):
jColor - Você altera para a cor do grupo que você deseja adicionar essa borda.

Resulta?
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Borda do perfil para membros especificos

Mensagem por Thoth em 25/04/14, 08:01 pm

Olá,

Com base em nossas Regras da seção de códigos Javascript & jQuery:
  • Os tópicos com 7 ou mais dias sem uma resposta serão bloqueados, dados como resolvidos e arquivados;
Hoje fazem 9 dias que não há respostas neste tópico, desta forma, estarei a considerar o tópico resolvido.


Atenciosamente,
Equipe Forumeiros!
avatar

Thoth
Usuário experiente

Masculino
Inscrito dia : 01/11/2011
Mensagens : 2154
Pontos Ativos : 2743

Ver perfil do usuário http://suportedesign.forumeiros.com https://www.facebook.com/Suportedesign https://twitter.com/suportedesign

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