Widget TeamSpeak3

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

Resolvido Widget TeamSpeak3

Mensagem por YouTube3 em 08/03/17, 04:40 pm

Detalhes da questão


Endereço do fórum: http://vgnfamily.forumais.com/
Versão do fórum: PunBB

Descrição


Boa tarde,

Gostaria de botar um widget de TeamSpeak3 em meu fórum.

Imagem do widget: http://i.imgur.com/iWIswyn.jpg
Quando passo o mouse encima: http://i.imgur.com/a1Vpe7M.jpg
Quando clico em conectar-se: http://i.imgur.com/jKNIHZS.jpg

Fórum aonde vi: http://www.brasilplaystart.com.br/forum/

Até mais.
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 09/03/17, 09:03 pm

#up
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em 10/03/17, 02:26 pm

O senhor precisaria nos fornecer as imagens a serem usadas nesse widget para seu fórum.

o/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 11/03/17, 12:40 pm

Irei deixar está por enquanto: http://i.imgur.com/m1lugLN.png
Depois irei troca-lá.
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em 13/03/17, 08:26 am

Infelizmente eu não posso utilizar essa imagem, pois é igual a do site referido. Precisa ser algo personalizado para não violar as nossas regras.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 13/03/17, 02:21 pm

Sem problemas pode ser está mesmo: http://i.imgur.com/lsWPxLt.png
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 14/03/17, 08:45 pm

#up
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em 15/03/17, 11:38 am

Utilize esse código em um widget personalizado:

Código:
<a href="ts3server://IP-do-seu-servidor/?port=porta-do-servidor" class="fa-custom-widget-teamspeak">
  <span class="fa-custom-widget-teamspeak-background"></span>
  <span class="fa-custom-widget-teamspeak-default">TEAMSPEAK 3</span>
  <span class="fa-custom-widget-teamspeak-hover">CONECTAR-SE</span>
</a>

<style>
  .fa-custom-widget-teamspeak {
    display: block;
    height: 200px;
    position: relative;
    border: 1px #fff solid;
    width: 100%;
    overflow: hidden;
  }

  .fa-custom-widget-teamspeak-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: url(http://i.imgur.com/lsWPxLt.png) no-repeat center center;
    background-size: 70% auto;
    transition: .5s ease filter;
  }

  .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak-hover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    transform: translate(0%, -10%);
    display: block;
    line-height: 30px;
    margin-top: -15px;
    background-color: #333;
    color: #fff;
    opacity: 1;
    transition: .5s ease;
    transition-property: transform, opacity;
  }

  .fa-custom-widget-teamspeak-hover {
    background-color: #fff;
    color: #333;
    opacity: 0;
  }

  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover {
    transform: translate(0%, 10%);
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default {
    opacity: 0;
  }

  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover{
    opacity: 1;
  }

  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-background {
    filter: blur(10px);
  }
</style>

avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 15/03/17, 02:21 pm

A Imagem não aparece fica assim: http://i.imgur.com/m3ifFBu.jpg
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em 15/03/17, 02:24 pm

Nessa parte do CSS:

Código:
.fa-custom-widget-teamspeak-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: url(http://i.imgur.com/lsWPxLt.png) no-repeat center center;
    background-size: 70% auto;
    transition: .5s ease filter;
}

Remova o z-index: -1;.
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em 15/03/17, 02:42 pm

Fico perfeito só mais uma coisa, tem como deixar a barra do widget igual a está? 
http://i.imgur.com/nPl6RNP.jpg
Fórum, em que vi: http://familyjns.net/forum/
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1096
Pontos Ativos : 1563

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por while em 15/03/17, 02:48 pm

Para isto peço que crie um novo tópico visto que foge um pouco do contexto, mesmo sendo questão de aparência do widget, mas uma é interno (código e estrutura) o outro já se trata do externo, ou seja, é questões diferentes.

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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