Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
198 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 192 Visitantes :: 1 Motor de busca

Claudio Arthur, iPlayer, iScroll, Kyo Panda, Luiz~, PESS_dodo

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Widget TeamSpeak3

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

Resolvido Widget TeamSpeak3

Mensagem por YouTube3 em Qua 8 Mar 2017 - 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: 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 : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Sex 10 Mar 2017 - 0:03

#up
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em Sex 10 Mar 2017 - 17:26

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

o/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Sab 11 Mar 2017 - 15:40

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 : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em Seg 13 Mar 2017 - 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.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Seg 13 Mar 2017 - 17:21

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 : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Ter 14 Mar 2017 - 23:45

#up
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em Qua 15 Mar 2017 - 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>



Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Qua 15 Mar 2017 - 17:21

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 : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Widget TeamSpeak3

Mensagem por Kyo Panda em Qua 15 Mar 2017 - 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;.


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3313
Pontos Ativos : 4617

http://ajuda.forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por YouTube3 em Qua 15 Mar 2017 - 17:42

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 : 1028
Pontos Ativos : 1465

http://Ajuda.Forumeiros.com

Resolvido Re: Widget TeamSpeak3

Mensagem por while em Qua 15 Mar 2017 - 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.

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 : 3105
Pontos Ativos : 4492

http://www.ajuda.forumeiros.com https://www.facebook.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