Widget TeamSpeak3
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode
Página 1 de 1 • Compartilhe •
Widget TeamSpeak3
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
HittFire- Nível 2
-
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12
Re: Widget TeamSpeak3
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!
HittFire- Nível 2
-
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12
Re: Widget TeamSpeak3
![]() | 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.


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. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Re: Widget TeamSpeak3
Olá coloquei os codigos acima e o widget ainda não aparece
Deixei a exibição de widget autorizada, mais nao ta indo

Deixei a exibição de widget autorizada, mais nao ta indo

HittFire- Nível 2
-
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12
Re: Widget TeamSpeak3
Olá.
Troque o código por:
Até! =)
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. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Re: Widget TeamSpeak3
Deu certo, estava esquecendo de dimensionar de acordo com o tamanho da imagem
HittFire- Nível 2
-
Inscrito dia : 20/03/2017
Mensagens : 6
Pontos Ativos : 12
Re: Widget TeamSpeak3
![]() | 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. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode
Página 1 de 1
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum