Perfil em dropdown

Qual é minha questão:
Queria colocar essas bordas do perfil drop down quando passa o mouse nele.
Já tenho o perfil dropdown porém não este efeito.

.



Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://mundoaway.forum.st/

Versão do meu fórum:
PUNBB

Olá, poderia me passar o código que utilizaste para fazer o efeito? Para eu colocar o efeito na borda...

Até mais

Aqui amigo:

Código:

.postbody .user .user-info {
    width: 400px;
    display: none;
    top: 20px;
    position: absolute;
    background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
    padding: 5px;
}

Troque por este, e veja se resulta.

Código:

.postbody .user .user-info {
width: 400px;
display: none;
top: 20px;
position: absolute;
background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
padding: 5px;
border: 2px solid #dadada;
}

Até mais

A borda ficou somente no "CSS".



Quero que nem este:

Sim, mais você apenas me passou uma parte do código...

Falta a parte do perfil...

Até mais

Como assim a parte do perfil?
Poderia me explicar?!

Olá, agora que vi que sua versão é PunBB, não sei mexer com a mesma.

Então, vamos tentar por CSS, porque por templete, comigo não dará certo.

Adicione isso ao seu CSS.

Código:

.user {
border: 2px solid #dadada;
}

Se o código funcionar, me avise que irei fazer o efeito igual o do fórum que você citou.

Até mais

Não é assim que desejo. =/
Ficou assim : http://mundoaway.forum.st/t17-regras-gerais-do-forum-atualizado-14-09-12

[Visualize pelo fórum].

Quero que nem o SPDesign. =/

Como falei, se funciona-se eu arrumaria o código, aqui está ele.

Troque ele pelos 2 códigos que passei.

Código:

.user:hover {
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-left: 2px solid #dadada;
}
.postbody .user .user-info {
width: 400px;
display: none;
top: 20px;
position: absolute;
background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
padding: 5px;
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-right: 2px solid #dadada;
}

Até mais

Ficou assim:


Desculpe a "chatisse" mais teria jeito de fechar certo?

É porque quero fazer uma coisa legal.!

Olá!
Tente este:

Código:

.postbody .user .user-info {
    width: 400px;
    display: none;
    top: 20px;
    position: absolute;
    background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
    padding: 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

Até mais.

Vamos tentar...

Troque por este.

Código:

.user:hover {
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-left: 2px solid #dadada;
border-right: 2px solid #dadada;
}
.postbody .user .user-info {
width: 400px;
display: none;
top: 20px;
position: absolute;
background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
padding: 5px;
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-right: 2px solid #dadada;
margin-left: 10px;
}

Até mais

delete todos os outros codes passados....add estes:
css

Código:


.postprofile dl dd.info{
    position: absolute;display: none;margin-bottom: 0px;
    margin-left: 211px;padding: 8px 5px 9px;top: 4px;
    font-weight: bold;
    color: #333;
        border: 1px solid #333;
      border-radius: 15px;
    width: 290px;z-index: 999;background: url(http://i36.servimg.com/u/f36/16/96/02/41/teste128.png);}
    .postprofile dl:hover dd.info{display:block !important;}


altere o css pra ficar do teu gosto
js:

Código:


$(document).ready(function() {
    $('.postprofile dl').each(function(){
    $(this).parents().find('dd:eq(2)').attr('class','info');
    });

    });


O que mais chegou perto foi :

Código:

.user:hover {
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-left: 2px solid #dadada;
border-right: 2px solid #dadada;
}
.postbody .user .user-info {
width: 400px;
display: none;
top: 20px;
position: absolute;
background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
padding: 5px;
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-right: 2px solid #dadada;
margin-left: 10px;
}

Mais ainda não resultou:
Esta:

Quero:

Olá!

Não compreendi, o que falta?


Abraços.

Só olhar a diferença:

Olá amigo,
tente este código:

Código:

.user:hover {
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-left: 2px solid #dadada;
border-right: 2px solid #dadada;
}
.postbody .user .user-info {
width: 400px;
display: none;
top: 20px;
position: absolute;
background: white repeat scroll 100% 100% rgba(255, 255, 255, 0.9);
padding: 5px;
border-bottom: 2px solid #dadada;
border-top: 2px solid #dadada;
border-right: 2px solid #dadada;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
margin-left: 10px;
}

e Valide!

Atenciosamente,
Dr.House_.

Não mudou em nada.

Olá!

Adicione este código em seu CSS:

.postbody .user .user-info {
margin-left: 0px !important;
}

Abraços.