Widget TeamSpeak3

3 participantes

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

Tópico resolvido Widget TeamSpeak3

Mensagem por YouTube3 08.03.17 19:40

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: https://i.imgur.com/iWIswyn.jpg
Quando passo o mouse encima: https://i.imgur.com/a1Vpe7M.jpg
Quando clico em conectar-se: https://i.imgur.com/jKNIHZS.jpg

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

Até mais.
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 10.03.17 0:03

#up
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda 10.03.17 17:26

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

o/
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: Widget TeamSpeak3

Mensagem por YouTube3 11.03.17 15:40

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

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda 13.03.17 11:26

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.
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: Widget TeamSpeak3

Mensagem por YouTube3 13.03.17 17:21

Sem problemas pode ser está mesmo: https://i.imgur.com/lsWPxLt.png
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 14.03.17 23:45

#up
YouTube3

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda 15.03.17 14:38

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>

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: Widget TeamSpeak3

Mensagem por YouTube3 15.03.17 17:21

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

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda 15.03.17 17:24

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;.
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: Widget TeamSpeak3

Mensagem por YouTube3 15.03.17 17:42

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

YouTube3
Super Membro

Membro desde : 04/01/2015
Mensagens : 1120
Pontos : 1597

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget TeamSpeak3

Mensagem por while 15.03.17 17:48

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.

Widget - Widget TeamSpeak3 Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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