Widget TeamSpeak3
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Widget TeamSpeak3
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: https://i.imgur.com/iWIswyn.jpg
Quando passo o mouse encima: https://i.imgur.com/a1Vpe7M.jpg
Quando clico em conectar-se: https://i.imgur.com/jKNIHZS.jpg
Fórum aonde vi: http://www.brasilplaystart.com.br/forum/
Até mais.
Re: Widget TeamSpeak3
O senhor precisaria nos fornecer as imagens a serem usadas nesse widget para seu fórum.
o/
o/
Re: Widget TeamSpeak3
Irei deixar está por enquanto: https://i.imgur.com/m1lugLN.png
Depois irei troca-lá.
Depois irei troca-lá.
Re: Widget TeamSpeak3
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.
Re: Widget TeamSpeak3
Sem problemas pode ser está mesmo: https://i.imgur.com/lsWPxLt.png
Re: Widget TeamSpeak3
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>
Re: Widget TeamSpeak3
A Imagem não aparece fica assim: https://i.imgur.com/m3ifFBu.jpg
Re: Widget TeamSpeak3
Nessa parte do CSS:
Remova o z-index: -1;.
- 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;.
Re: Widget TeamSpeak3
Fico perfeito só mais uma coisa, tem como deixar a barra do widget igual a está?
https://i.imgur.com/nPl6RNP.jpg
Fórum, em que vi: http://familyjns.net/forum/
https://i.imgur.com/nPl6RNP.jpg
Fórum, em que vi: http://familyjns.net/forum/
Re: Widget TeamSpeak3
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". |
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos