Descrição dos grupos

3 participantes

Ir para baixo

Tópico resolvido Descrição dos grupos

Mensagem por iHeloaD 08.05.14 22:17

  • Descrição:
Olá,

Como posso fazer este efeito em meu fórum? http://prntscr.com/3hg8ob.

Até mais.

  • Informações:
Fórum:http://cidadesocial.forumeiros.com/Versão:PUNBB
Tipo:Pedido de códigoTags:Descrição,grupos



Última edição por iHeloaD em 10.05.14 22:11, editado 1 vez(es)
iHeloaD
iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por TheJokerGFR 08.05.14 22:37

Olá,

Sobre as bordas, eu retirei a class .inner veja se é isso que o senhor queria...

E aqui o código com as informações que pediu
Código:
<style type="text/css">
.members-group .forumbg-table th{
    text-align:left;
}
.members-group .forumbg{
    padding:5px;
    border-radius:5px;
}
.members-group img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 70px;
}
.members-group tr > td:nth-child(1){
    font-weight: bold;
}
</style>
<div class="members-group">
    <div class="forumbg forumbg-table">
        <table class="table1" colspacing="2">
            <thead><tr><th colspan="8">Grupos do fórum</th></tr></thead>
            <tbody>
            <tr class="row3"><td colspan="2">Administrador</td></tr>

            <tr class="row1">
                <td>Rank</td>
                <td><img src="http://s5.postimg.org/pxoz9yacj/001.gif"></td>
            </tr>

            <tr class="row1">
                <td>Função</td>
                <td>Administrar o fórum</td>
            </tr>
                
            <tr class="row3"><td colspan="2">Membros do grupo</td></tr>

            <tr class="row1">
                <td class="mp"><a href="/privmsg?mode=post&u=1"><img src="http://2img.net/i/fa/prosilver/icon_contact_pm.png" alt="Enviar uma mensagem privada" title="Enviar uma mensagem privada"></a></td>
                <td><a href="/u1"><span style="color:#BF3131"><strong>Admin</strong></span></a></td>
            </tr>

            </tbody>
        </table>
    </div>
</div>

Para o rank não ficar muito grande, adicionei a seguinte regra CSS ao código:
Código:
max-height: 70px;

Caso não queira que ele seja redimensionado, remove ela, ou então altere seu valor...

Resultado:
Descrição dos grupos 991UyAz
TheJokerGFR
TheJokerGFR
****

Membro desde : 22/09/2012
Mensagens : 316
Pontos : 473

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por iHeloaD 09.05.14 0:07

Olá,

Não viu a print que eu queria? Quando passamos o mouse no nome dos grupos, e nos usuários pertencentes aos grupos, aparecesse aquelas descrições.

Até mais.
iHeloaD
iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por Kyo Panda 10.05.14 2:31

Olá,

Poderia seguir as recomendações desse tópico?
https://ajuda.forumeiros.com/t91529-efeito-tootip-membros-staff-fdf#621885

Abraços. Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por iHeloaD 10.05.14 2:45

Olá,

Só aparece quando passamos o mouse aqui http://prntscr.com/3hss4b, na legenda e nos usuários conectados, o mesmo não resulta.

Até mais.
iHeloaD
iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por Kyo Panda 10.05.14 2:52

Troque por esse:

Código:
.leyenda_css a[href^="/g"],
a[href^="/u"] span[style^="color"] strong {
  position: relative
}

.leyenda_css a[href^="/g"]:hover:before,
a[href^="/u"] span[style^="color"] strong:hover:before {
  bottom: 17px;
  left: 15px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-width: 7px;
  margin-left: -7px;
}

.leyenda_css a[href^="/g"]:hover:after,
a[href^="/u"] span[style^="color"] strong:hover:after {
  background-color: rgba(0,0,0,0.5);
  border-radius: 3px;
  bottom: 30px;
  color: #fff;
  display: block;
  padding: 3px 10px;
  font-style: normal;
  font-weight: 700;
  left: -15px;
  text-align: center;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  font-size: 10px;
  line-height: 1.5em;
}

#onlinelist {
  overflow: visible;   
}

E para cada grupo:

Código:
.leyenda_css a[href^="/g2-"]:hover:after,
a[href^="/u"] span[style*="#AA00FF"] strong:hover:after {
  content: "Descrição do Administradores."
}

Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por iHeloaD 10.05.14 3:14

Olá,

Bem, ocorreu este erro http://prntscr.com/3hsz5g, sei que e problemas com meus códigos, mas tem um código externo para corrigi-lo?

Obrigado.
iHeloaD
iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por Kyo Panda 10.05.14 13:06

Bem, o código que te passei soluciona esse problema:

Descrição dos grupos Ixcj21

Mais em específico essa parte:

Código:
#onlinelist {
  overflow: visible; 
}

Chegou a adicionar o código no fim do CSS? Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Descrição dos grupos

Mensagem por iHeloaD 10.05.14 22:11

Perfeito, muito obrigado!

Até mais.
iHeloaD
iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos