Caixa em relevo no avatar

Qual é minha questão:
Olá, pessoal. Novamente incomodando voces.

Segue outra duvida:
Gostaria de incluir uma caixa de relevo no avatar (nos topicos), como neste tema: http://pt.hitskin.com/buscar-um-tema/cmyk-br-design-198198.htm

Falo a respeito da caixa...na qual, quando vc coloca o mouse em cima da imagem, ele 'responde' ao relevo.

Isso é possivel realizar?

Agradeço.

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

Versão do fórum:
PHPBB3

Saudações!

Aceda à sua "Folha de estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código para ser adicionado no início ou final da tua CSS:

Código:

.postprofile dt {
background: #fff;
border: 1px solid #DDD;
border-radius: 4px;
margin: 30px auto 5px;
padding: 10px 2px;
width: 80%;
}
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Até mais!

Hmmm... pareceu muito bom. E pelo que vi, posso 'trabalhar' tambem as distancias.
Mas te pergunto... já que preferia sem aquela caixa branca em volta, mas apenas a imagem em relevo.
É possivel?

Sim! Mas para isto, o senhor terá que substituir o código anterior por este:

Código:

.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Atenciosamente!

Ótimo. Funcionou. Sabe muito esse Hizu
E pra complementar, esqueci de mencionar, perdão. Tinha a ideia de pôr essa caixa em relevo no 2 avatares...de topicos e perfis tambem.

Como faria para os perfis, Hizu?

Hum... não posso lhe dar certeza se lhe trará resultados satisfatórios, mas vamos tentar!

Adicione este código ao teu CSS:

Código:

img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Resulta?

Até!

Bem, a ideia é essa. Funcionou. Mas o problema é que é aplicado em todas as imagens do forum.
Assim.. tem como indicar apenas a imagem do avatar no perfil?

AlfaBeta escreveu:Bem, a ideia é essa. Funcionou. Mas o problema é que é aplicado em todas as imagens do forum.
Assim.. tem como indicar apenas a imagem do avatar no perfil?

Há um código, porém esqueci ao certo o que corresponde ao perfil avançado. Vamos aguardar um Ajudeiro, pode ser?

Olá!

Troque todos os códigos fornecidos nesse post por esse:

Código:

#profile-advanced-right .module .inner div img:first-of-type {
  background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
#profile-advanced-right .module .inner div img:hover {
  background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
        .postprofile dt img {
        background: none repeat scroll 0 0 #FFF;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
        margin-bottom: 0;
        max-height: 300px!important;
        max-width: 150px!important;
        padding: 10px 9px;
        }
        .postprofile dt img:hover {
        background-color: #E8FFFF;
        box-shadow: 0 0 3px #AAA inset;
        cursor: pointer;
        text-decoration: none;
        }

Hizu, claro que da querido, por favor, não diga o que não sabe.

Atenciosamente,
Crazy.

Opa,
Muito bom, Crazy.

Apenas um porem. No perfil, o relevo aparece tanto na imagem do avatar quanto na imagem do Rank, avatar dos amigos e inclusive em volta do 'ponto' conectado/desconectado. Ou seja, em 4 areas.

Haveria como aplicar isso apenas na area imagem do avatar?

Olá amigo,

Troque o código pelo abaixo:

Código:

.postprofile img:hover {
background-color: #e8eaff;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
cursor: pointer;
text-decoration: none;
}
.postprofile img {
background: none repeat scroll 0 0 #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 30px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 9px;
}

Até mais.

Hmm... perdão, Mikéé...mas agora não ficou bom. Porque alem de não mudar nada no perfil, ainda interferiu em todas imagens no perfil (nos topicos), onde ja havia deixado apenas na imagem do avatar tambem.

Terias como corrigir isso?

Olá,

Então não há modo. Tentei criar um seletor para que afetasse apenas as imagens do perfil... Então use o código do Crazy mesmo...

Estranho amigo que aqui no meu navegador o código do Crazy que o senhor usou em teu fórum não afetou os Ranks. Tente usar o navegador Google Chrome e veja.

Até mais.

Olá!

Troque por esse:

Código:

        #profile-advanced-right .module .inner div img:first-of-type {
          background: none repeat scroll 0 0 #FFF;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
        margin-bottom: 0;
        max-height: 300px!important;
        max-width: 150px!important;
        padding: 10px 9px;
        }
        #profile-advanced-right .module .inner div img:hover:first-of-type {
          background-color: #E8FFFF;
        box-shadow: 0 0 3px #AAA inset;
        cursor: pointer;
        text-decoration: none;
        }
                .postprofile dt img {
                background: none repeat scroll 0 0 #FFF;
                border-radius: 4px 4px 4px 4px;
                box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
                margin-bottom: 0;
                max-height: 300px!important;
                max-width: 150px!important;
                padding: 10px 9px;
                }
                .postprofile dt img:hover {
                background-color: #E8FFFF;
                box-shadow: 0 0 3px #AAA inset;
                cursor: pointer;
                text-decoration: none;
                }

Atenciosamente,
Crazy.

Bem, Mikéé. Estranho porque.. constumo usar o Chrome mesmo, e aconteceu isso mesmo.

E quanto ao seu novo codigo, caro Crazy... voltou a acontecer o que voce indicou em seu primeiro codigo... onde, no perfil, o relevo aparece no avatar, rank, avatares dos amigos e 'ponto de conectado/desc'.

Olá amigo,

Troque por este:

Código:

.post .postprofile dl dt a[href*="/u"] img[src][alt]:hover {
background-color: #e8eaff;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
cursor: pointer;
text-decoration: none;
}
.post .postprofile dl dt a[href*="/u"] img[src][alt] {
background: none repeat scroll 0 0 #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 30px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 9px;
}

Até mais.

Bem. Infelizmente, agora não houve nenhuma mudança.

Tente este código:

Código:

#profile-advanced-right img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
#profile-advanced-right .module img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Atenciosamente,
Hizu.

Ai, coisa chata essa.
Testei...mas teima em dar relevo aos 4 tipos de figura.

Mas vamos lá...

Substitua todos os códigos fornecidos neste tópico, por este:

Código:

#profile-advanced-avatar {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
#profile-advanced-avatar:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Atenciosamente,
Hizu.

Infelizmente, ainda nada ocorreu de diferente.

Substitua por este:

Código:

#profile-advanced-right-avatar .module {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
#profile-advanced--right-avatar .module:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Atenciosamente,
Hizu.

Sem mudanças.

Substitua o código fornecido anteriormente, por este:

Código:

.avatar img, #profile-advanced-details .avatar, .avatar, .friend-block .avatar, #profile-advanced-avatar .module, profile-advanced-avatar .module, #profile-advanced-avatar {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}

Surtiu algum efeito?

Atenciosamente,
Hizu.

Opa, campeão.
Acho que agora estás no caminho.
Ainda não é o que queremos..mas quase. Desta vez, dentre as 4 imagens, apenas as do avatar dos amigos é que tem relevo... ao contrario do nosso avatar...q queremos.
Tem como trocar a 'ordem' entao?

Olá amigo,

Troque por este o código CSS:

Código:

.avatar img, #profile-advanced-details .avatar, #profile-advanced-avatar .module, profile-advanced-avatar .module, #profile-advanced-avatar {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}

Abraços.

Caro Mikéé..
Seu codigo funcionou como o ultimo do Hizu, ou seja, apenas o avatar dos amigos fica com relevo.
Podes trocar a 'ordem' para que seja o avatar do usuario agora?

Olá,

Tente assim, coloque no inicio de teu CSS por gentileza:

Código:

.post .postprofile dl dt a[href*="/u"] img[src][alt],avatar img, #profile-advanced-details .avatar, #profile-advanced-avatar .module, profile-advanced-avatar .module, #profile-advanced-avatar {
background: none repeat scroll 0 0 #FFF !important;
border-radius: 4px 4px 4px 4px!important;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset!important;
margin-bottom: 0!important;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}


Até mais.

Ainda não foi dessa vez.
Com esse codigo, nada ocorre. Todas as 4 img (avatar usuario, avatar amigos, img rank e 'ponto conectado') estão sem nenhum relevo.

Boa noite!

Posso lhe dizer que estudei ao máximo está área, porém não encontrei nenhum código que correspondesse o avatar do perfil avançado, penso eu que não seja possível, apenas com códigos JavaScripts, ao qual o Fórum dos Fóruns não fornece suporte. Talvez se o teu fórum fosse PunBB ou PhpBB2 seria possível por edições via Templates.  

Atenciosamente,
Hizu.

Olá,

No inicio deste tópico eu citei isso... O mesmo não é possível. Até daria com este seletor:

.post .postprofile dl dt a[href*="/u"] img[src][alt]{}

Mas infelizmente o teu fórum não corresponde com o mesmo, ou seja não há como fazer esta função sem ao menos atingir também teu Rank.

Melhores Cumprimentos,
Lervisic.

Entendo.
Então, haveria uma maneira de fazer com que afete o avatar do usuario e rank, como voce falou?

Olá,

Aqui esta:

Código:

.postprofile dt {
background: #fff;
border: 1px solid #DDD;
border-radius: 4px;
margin: 30px auto 5px;
padding: 10px 2px;
width: 80%;
}
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
.postprofile dt img:hover {
background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

Veja se resulta.

Até mais.

Amigo... não houve qualquer mudanças no perfil. No entanto, acabou afetando o perfil nos topicos...ficando o avatar fora de esquadro.

Enfim.
Deixa pra lá, entao. Já tomei o teu tempo demais.

Agradeço.

Olá,

Meu tempo tomado? Não amigo, não mesmo.

Use este:

Código:

#profile-advanced-right .module .inner div img:first-of-type {
  background: none repeat scroll 0 0 #FFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
margin-bottom: 0;
max-height: 300px!important;
max-width: 150px!important;
padding: 10px 9px;
}
#profile-advanced-right .module .inner div img:hover {
  background-color: #E8FFFF;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
        .postprofile dt img {
        background: none repeat scroll 0 0 #FFF;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.1) inset;
        margin-bottom: 0;
        max-height: 300px!important;
        max-width: 150px!important;
        padding: 10px 9px;
        }
        .postprofile dt img:hover {
        background-color: #E8FFFF;
        box-shadow: 0 0 3px #AAA inset;
        cursor: pointer;
        text-decoration: none;
        }

Agradeço a atenção.
No entanto, com esse codigo, voltou a dar relevo em todas imagens.

Hizu escreveu:Boa noite!

Posso lhe dizer que estudei ao máximo está área, porém não encontrei nenhum código que correspondesse o avatar do perfil avançado, penso eu que não seja possível, apenas com códigos JavaScripts, ao qual o Fórum dos Fóruns não fornece suporte. Talvez se o teu fórum fosse PunBB ou PhpBB2 seria possível por edições via Templates.  

Atenciosamente,
Hizu.

Saudações Alfa!  

Como dito acima, não há um CSS específico somente para a área do avatar no perfil avançado, apenas com códigos JavaScripts ou edições via templates, porém as versões PhpBB3 e Invision não é disponível as edições de templates.  

Atenciosamente,
Hizu.

Compreendo.
Apenas insisti porque o Mikéé falou isso: "....ou seja não há como fazer esta função sem ao menos atingir também teu Rank."

Assim, se realmente confere isso, e se é possivel afetar alem do avatar do perfil, o rank do perfil.. tá valendo.

Enfim. A criterio dos mestres de plantão.

AlfaBeta. escreveu:Compreendo.
Apenas insisti porque o Mikéé falou isso: "....ou seja não há como fazer esta função sem ao menos atingir também teu Rank."

Assim, se realmente confere isso, e se é possivel afetar alem do avatar do perfil, o rank do perfil.. tá valendo.

Enfim. A criterio dos mestres de plantão.

Saudações amigo!

De acordo com todos os testes e códigos de tentativas, não há como fazer sem usarmos o module, ou seja, o efeito teria de ficar em toda a área do module.

Atenciosamente,
Hizu.

Compreendo. Então damos como resolvido.

Agradeço.

Por favor. Se possivel alguem do Staff pode colocar como Resolvido. Pois tento desde ontem...mas, por alguma razão, não aparece pra mim esse botão.