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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como remover essas bordas dos avatares?
Hoje à(s) 06:58 am por AlexG

» Como adicionar um fundo a barra de menus?
Hoje à(s) 01:38 am por SetRaiden

» Preciso de uma logo
Hoje à(s) 01:05 am por odelgado

» [FAQ] Gerir e configurar o Topic'it no seu fórum Forumeiros
Ontem à(s) 11:15 pm por Shek

» Preciso de Ajuda.
Ontem à(s) 11:12 pm por Shek

» Plaquinhas de Rank para o meu Fórum
Ontem à(s) 07:41 pm por Lost154

» Publicidade bugada
Ontem à(s) 07:31 pm por virus

Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
232 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 230 Visitantes :: 1 Motor de busca

IsmaelS., virus

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Widget TeamSpeak3

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

Resolvido Widget TeamSpeak3

Mensagem por HittFire em 28/03/17, 12:57 am

Detalhes da questão


Endereço do fórum: http://greeceally.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá queria ajuda para criar um widget de ts3 para o meu forum, similar ao deste tópico http://ajuda.forumeiros.com/t108264-widget-teamspeak3
Tentei reutlizar os codigos dispostos no link, porem não consegui

Imagem que pretendo ultilizar : http://imgur.com/a/ZXzQL
avatar

HittFire
Nível 2

Masculino
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12

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

Resolvido Re: Widget TeamSpeak3

Mensagem por HittFire em 28/03/17, 09:32 am

Alguma novidade? Desculpe se é considerado flood, é porque tópico apos o meu ja foram respondidos, por isso me surgiu a duvida se a duvida em questao, estava no local errado, abçs!
avatar

HittFire
Nível 2

Masculino
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12

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

Resolvido Re: Widget TeamSpeak3

Mensagem por Luiz em 28/03/17, 12:58 pm

Atenção!
Você não pode fazer UPs antes de se completar 24 horas desde a última mensagem deste tópico! Por este motivo, nós pedimos que você leia as regras do subfórum e principalmente os termos de uso do FdF: http://ajuda.forumeiros.com/t82-topic para não cometer novos erros!

---

Quanto à sua questão, crie um novo widget personalizado com o código:
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;
    background: url(http://i.imgur.com/67ZLZzE.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>

Até mais. Piscada


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget TeamSpeak3

Mensagem por HittFire em 29/03/17, 06:05 pm

Olá coloquei os codigos acima e o widget ainda não aparece Triste
Deixei a exibição de widget autorizada, mais nao ta indo Triste

avatar

HittFire
Nível 2

Masculino
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12

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

Resolvido Re: Widget TeamSpeak3

Mensagem por Luiz em 29/03/17, 06:09 pm

Olá.
Troque o código por:
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;
    background: url(http://i.imgur.com/67ZLZzE.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    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>

Até! =)


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Widget TeamSpeak3

Mensagem por HittFire em 29/03/17, 06:32 pm

Deu certo, estava esquecendo de dimensionar de acordo com o tamanho da imagem
avatar

HittFire
Nível 2

Masculino
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12

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

Resolvido Re: Widget TeamSpeak3

Mensagem por Luiz em 29/03/17, 07:04 pm

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

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

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