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.

Fórum grátis: Ajuda e suporte para fóruns Forumeiros.com

Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Efeito hover perfil
Hoje à(s) 09:26 am por Kyo Panda

» Ajuda com o HTML
Hoje à(s) 03:39 am por Taxy_InSaniTy

» Página inicial em HTML
Hoje à(s) 03:36 am por Harleen

» Quero uma Skin igual essa aqui..
Hoje à(s) 02:55 am por Harleen

» O tópico ou mensagem que você está procurando não existe
Hoje à(s) 02:49 am por Harleen

» Template topicos recentes
Hoje à(s) 01:52 am por Harleen

» Assinatura grande!
Ontem à(s) 10:58 pm por Uatyla

Perdi minha senha!
 Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais marcados
@Shek (1371)
 
@Fraise (586)
 
@Sennior (542)
 
@Holkis (507)
 
@RafaelS. (289)
 

Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
Há 270 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 262 Visitantes :: 1 Motor de busca

'Dante, Connor R., Daemon, Kyo Panda, Luiz, Marcelo22m2, Roger_Crazzy, Shek

[ Ver toda a lista ]


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

Widget TeamSpeak3

Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode

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

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

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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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

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é! =)
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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

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".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum