botões no banner

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

Atendido / Resolvido botões no banner

Mensagem por Jhool em 09/06/18, 04:48 pm

Detalhes da questão


Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição


Gostaria saber como colocar esse "widget/botão" no banner do meu fórum http://prntscr.com/jt1yup

Fórum em que vi: http://ultimatelife.forumeiros.com/forum

agradeço desde já!
avatar

Jhool
Usuário avançado

Masculino
Inscrito dia : 10/01/2017
Mensagens : 344
Pontos Ativos : 546

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

Atendido / Resolvido Re: botões no banner

Mensagem por RafaelS. em 09/06/18, 04:50 pm

Olá @Jhool,

Onde deseja colocar o botão, em seu fórum?
Forneça por favor os IP's para poder lhe passar o código já feito.

Até mais.
avatar

RafaelS.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3717
Pontos Ativos : 4720

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

Atendido / Resolvido Re: botões no banner

Mensagem por Jhool em 09/06/18, 05:00 pm

Mais ou menos aqui http://prntscr.com/jt242w

Servidor: 149.56.41.55:7777
TS: 198.50.243.44:7033
avatar

Jhool
Usuário avançado

Masculino
Inscrito dia : 10/01/2017
Mensagens : 344
Pontos Ativos : 546

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

Atendido / Resolvido Re: botões no banner

Mensagem por RafaelS. em 09/06/18, 05:41 pm

Olá @Jhool,

Adicione este JavaScript com investimento em todas as páginas:

Código:
$(function() {
$('#pun-logo').append('<div style="float:right"><div class="pun-server" style="float: right;margin-top: 120px;"><span class="button-server"><a href="samp://149.56.41.55:7777"><i class="fa fa-play-circle fa-3"></i> Conectar-se ao Servidor</a> </span></div><div class="pun-ts" style="margin-top: 175px;"><span class="button-ts"><a href="ts3server://198.50.243.44:7033"><i class="fa fa-volume-control-phone fa-4"></i> Conectar-se ao TeamSpeak³</a> </span></div><div class="pun-info" style="/* float: right; */margin-top: 14px;"><span class="info-server" style="font-size: 11px;color: #1f2b3b;text-shadow: 0px 1px 2px #0000009c;">SA:MP Versão 0.3.7-R2</span></div></div>');
});

Adicione ainda este CSS à sua folha de estilos:

Código:
.pun-ts {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(152, 152, 152, 0.45);
    border-radius: 5px;
}

.pun-server {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(3, 169, 244, 0.35);
    border-radius: 5px;
}

Até.
avatar

RafaelS.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3717
Pontos Ativos : 4720

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

Atendido / Resolvido Re: botões no banner

Mensagem por Jhool em 09/06/18, 05:47 pm

Depois que ativamos o código, o banner ficou jogado para a esquerda http://prntscr.com/jt2nf4
Consegue deixar ele bonitinho dessa forma: https://prnt.sc/jt1yup

Vá no fórum que citei e coloca o mouse encima, tem todo essa "graça"

Acha que consegue fazer algo semelhante?
avatar

Jhool
Usuário avançado

Masculino
Inscrito dia : 10/01/2017
Mensagens : 344
Pontos Ativos : 546

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

Atendido / Resolvido Re: botões no banner

Mensagem por RafaelS. em 09/06/18, 06:01 pm

Depois que ativamos o código, o banner ficou jogado para a esquerda
Ok. Troque o JavaScript que eu passei por este:

Código:
$(function() {
$('#pun-logo').append('<div style="position: absolute;top: 0;right: 5px;"><div class="pun-server" style="float: right;margin-top: 120px;"><span class="button-server"><a href="samp://149.56.41.55:7777"><i class="fa fa-play-circle fa-3"></i> Conectar-se ao Servidor</a> </span></div><div class="pun-ts" style="margin-top: 175px;"><span class="button-ts"><a href="ts3server://198.50.243.44:7033"><i class="fa fa-volume-control-phone fa-4"></i> Conectar-se ao TeamSpeak³</a> </span></div><div class="pun-info" style="/* float: right; */margin-top: 14px;"><span class="info-server" style="font-size: 11px;color: #1f2b3b;text-shadow: 0px 1px 2px #0000009c;">SA:MP Versão 0.3.7-R2</span></div></div>');
});

Consegue deixar ele bonitinho dessa forma: https://prnt.sc/jt1yup
O que torna ele "bonitinho" é o fato de eles usarem uma imagem de fundo, e ficar aquele efeito de transparência.

Vá no fórum que citei e coloca o mouse encima, tem todo essa "graça"

Acha que consegue fazer algo semelhante?

Eita, desculpa, não reparei que tinha efeito. Aqui tem, adicione ao seu CSS:

Código:
.pun-server:hover {
    background: #03a9f4;
}

.pun-ts:hover {
    background: #989898;
}

Até.
avatar

RafaelS.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3717
Pontos Ativos : 4720

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

Atendido / Resolvido Re: botões no banner

Mensagem por Jhool em 09/06/18, 11:22 pm

Tem como eu alterar a cor desses dois botões? (antes de colocar o mouse encima)
http://prntscr.com/jt5aes
avatar

Jhool
Usuário avançado

Masculino
Inscrito dia : 10/01/2017
Mensagens : 344
Pontos Ativos : 546

Ver perfil do usuário http://familiawarning.forumeiros.com/forum
  • 0

Atendido / Resolvido Re: botões no banner

Mensagem por Pedxz em 10/06/18, 08:16 am

Olá @Jhool,
no seu CSS localize:
Código:
.pun-ts {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(152, 152, 152, 0.45);
    border-radius: 5px;
}
 
.pun-server {
    transition: 0.6s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 12px;
    background: rgba(3, 169, 244, 0.35);
    border-radius: 5px;
}

e a frente de background: mude para a cor pretendida Muito feliz

Atenciosamente,
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1253
Pontos Ativos : 1643

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: botões no banner

Mensagem por Jhool em 10/06/18, 03:04 pm

Obrigado, pode fechar.
avatar

Jhool
Usuário avançado

Masculino
Inscrito dia : 10/01/2017
Mensagens : 344
Pontos Ativos : 546

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

Atendido / Resolvido Re: botões no banner

Mensagem por Fraise em 13/06/18, 05:34 pm

Tópico resolvido


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.
Fraise — Moderadeiro
avatar

Fraise
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5780
Pontos Ativos : 7391

Ver perfil do usuário https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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


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