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 https://ajuda.forumeiros.com/t108264-widget-teamspeak3
Tentei reutlizar os codigos dispostos no link, porem não consegui

Imagem que pretendo ultilizar : https://imgur.com/a/ZXzQL

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!

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: https://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.

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

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

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