Barra no topo do fórum com link para o facebook

+2
Sennior
Ana Leandro
6 participantes

Ir para baixo

Tópico resolvido Barra no topo do fórum com link para o facebook

Mensagem por Ana Leandro 13.10.16 14:29

Detalhes da questão


Endereço do fórum: www.divorciados.forumeiros.com
Versão do fórum: PhpBB2

Descrição


Boa tarde,

Pretendo adicionar uma barra fixa no topo do meu fórum, semelhante à que aparece aqui no fórum dos fóruns a ocupar toda a tela (o meu fórum estará com uma largura de 85% e eu queria a barra de topo a ocupar os 100%). À esquerda, colocar o logo do fórum e o nome do mesmo; à direita o símbolo do facebook com um link para a página do facebook do SOS Divórcio.

Este pedido (criação da barra) foi rejeitado na secção gráfica e fui aconselhada a fazer o pedido aqui.

Agradeço, desde já, a ajuda que possam dar-me ou para a criação da barra ou para a disponibilização do código para a incorporar como pretendo.

Obrigada e até já Feliz

AL

Ana Leandro
Ana Leandro
****

Membro desde : 03/07/2008
Mensagens : 216
Pontos : 300

http://divorciados.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Sennior 13.10.16 20:29

Boas!

Poderíamos fazer essa edição com a própria barra da Forumeiros.
Peço gentilmente que a ative em teu fórum para podermos fazer as edições nela. Positivo

Até mais.
Haseo
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Ana Leandro 13.10.16 22:11

Olá Haseo,

Já está!Piscada
E agora?

Obrigada.
Ana Leandro
Ana Leandro
****

Membro desde : 03/07/2008
Mensagens : 216
Pontos : 300

http://divorciados.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Luiz 14.10.16 0:03

Olá!

Não sei se vai dar certo, adaptei este tutorial.
(https://ajuda.forumeiros.com/t35483-tutorial-inserir-copyright-em-todas-as-paginas)

Alterando algumas coisas.
Enfim, tente:

Adicione este JavaScript, com investimento em todas as páginas.
Código:

jQuery(document).ready(function() {
msg = '<a href="LINK DO SEU FACEBOOK" target="_blank"><img src="LINK DA IMAGEM" alt="Facebook"></a>';
jQuery('#fa_toolbar').html(jQuery('#fa_toolbar').html() + msg);
});


Se o primeiro não funcionar...

Código:

jQuery(document).ready(function() {
msg = ' ';
jQuery('#fa_toolbar').html(jQuery('#fa_toolbar').html(<a href="LINK DO SEU FACEBOOK" target="_blank"><img src="LINK DA IMAGEM" alt="Facebook"></a>) + msg);
});



Como disse anteriormente, não sei se vai dar certo, mas não custa tentar! Muito feliz

Atenciosamente, Luiz.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Cepheus 15.10.16 0:27

Eu fiz algo simples, só que nesse caso não necessita da barra da Forumeiros.
Crie um novo código JS, com investimento em todas as paginas.
Painel de Controle  :seta2: Módulos  :seta2: Barra no topo do fórum com link para o facebook  HtmlHTML & JAVASCRIPT :seta2: Barra no topo do fórum com link para o facebook  Type_subliGestão dos códigos JavaScript
Adicionar Criar um novo JavaScript


Onde está: LINK-DO-FACEBOOK altere para o link do seu facebook.
Código:
$(function() {   
var facebook = 'LINK-DO-FACEBOOK'; // COLOQUE O LINK DO FACEBOOK

var cpHtml = $('.bodylinewidth').before(
'<div id="barra_sos">'+
'  <div class="sos">'+
'    <div class="sos_info"><a href="http://divorciados.forumeiros.com/"><img src="http://i.imgur.com/6apymC9.png"></a></div>'+
'    <div class="sos_redes"><a href="'+facebook+'"><img src="http://i.imgur.com/KVt9LPl.png"></a></div>'+
'  </div>'+
'</div>');

var cpCss = $('.bodylinewidth').before(
     '<style>'+
     '.bodylinewidth{'+
     '    margin-top:55px;'+
     '}'+
     '#barra_sos{'+
     '    background-color: #fff;'+
     '    border-bottom:1px solid #000;'+
     '    width: 100%;'+
     '    top:0;'+
     '    left: 0;'+
     '    height: 42px;'+
     '    margin: 0 auto;'+
     '    position: fixed;'+
    '    z-index: 99999;'+
     '}'+
     '.sos{'+
     '    width: 85%;'+
     '    line-height: 25px;'+
     '    margin: 0 auto;'+
     '}'+
     '.sos_info{'+
     '    width: 50%;'+
     '    float: left;'+
     '}'+
     '.sos_info img{'+
     '    height: 40px;'+
     '    width: 150px;'+
     '}'+
     '.sos_info img:hover{'+
     ' background-color: #eee;'+
     '}'+
     '.sos_info a, .sos_info a:hover{'+
     '    text-decoration: none!important;'+
     '    font-size:20px;'+
     '}'+
     '.sos_redes{'+
     '    width: 50%;'+
     '    float: right;'+
     '    text-align: right;'+
     '    padding:5px 0px;'+
     '}'+
     '.sos_redes img{'+
     '    background-color: #c5403b;'+
     '    width: 30px;'+
     '    border-radius: 50%;'+
     '}'+
     '.sos_redes img:hover{'+
     '    background-color: #3b5998;'+
     '}'+
    '<style>'
 );

});

Até mais.
Cepheus
Cepheus
Membro

Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085

http://www.bestskins.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Ana Leandro 16.10.16 1:00

Cepheus, ficou excelente. Agradeço-te a ti e também ao Luiz!
Gostaria apenas de ajustar a cor das letras do logotipo para brancas já que com o vermelho de fundo (que eu, surpreendida comigo mesma, consegui alterar:P) estas ficaram sumidas...

Obrigada de novo. Pelo apoio técnico que dão aos administradores destes fóruns e pela paciência e dedicação que sempre demonstram. Não é para todos! Piscada
Ana Leandro
Ana Leandro
****

Membro desde : 03/07/2008
Mensagens : 216
Pontos : 300

http://divorciados.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Luiz 16.10.16 1:45

Olá.
As letras, fazem parte de uma imagem.

Você pode solicitar uma nova nas criações gráficas, ou mudar o background da barra para outra cor.
Até Muito feliz
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por while 16.10.16 2:45

Olá autora,

Como bem dito, o Cepheus utilizou uma imagem para o nome do fórum e o ícone, portanto, só pedindo uma alteração na mesma, o mais aconselhável seria ou você pedir na seção de Criação Gráfica ou mudar a cor da barra (de vermelho para outra), basta procurar no código JS por:

Código:
'#barra_sos{'+

Logo abaixo terá:
' background-color: #c5403b;'+

Ou algo semelhante a isto.... altere o valor que está em vermelho pela cor desejada.

Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Cepheus 16.10.16 23:17

Eu alterei, ao invés de imagem o titulo da barra poderá ser alterada nas marcações do código abaixo, lembrando que deixei tudo alterado conforme seu fórum.
Só substituir o código por esse:
Código:
 $(function() { 
    var facebook = 'https://pt-pt.facebook.com/sosdivorcio/'; // COLOQUE O LINK DO FACEBOOK
        logo = "http://i.imgur.com/bUOsjtp.png"; // LINK DO LOGOTIPO
       titulo = "SOS DIVÓRCIO"; // TITULO DO FÓRUM
       forumURL = "http://divorciados.forumeiros.com/"; // LINK DO SEU FÓRUM
   
    var cpHtml = $('.bodylinewidth').before(
    '<div id="barra_sos">'+
    '  <div class="sos">'+
    '    <div class="sos_info"><a href="'+forumURL+'"><img src="'+logo+'"> <span>'+titulo+'</span></a></div>'+
    '    <div class="sos_redes"><a href="'+facebook+'"><img src="http://i.imgur.com/KVt9LPl.png"></a></div>'+
    '  </div>'+
    '</div>');
   
    var cpCss = $('.bodylinewidth').before(
        '<style>'+
        '.bodylinewidth{'+
        '    margin-top:55px;'+
        '}'+
        '#barra_sos{'+
        '    background-color: #c5403b;'+
        '    width: 100%;'+
        '    top:0;'+
        '    left: 0;'+
        '    height: 42px;'+
        '    margin: 0 auto;'+
        '    position: fixed;'+
        '    z-index: 99999;'+
        '}'+
        '.sos{'+
        '    width: 85%;'+
        '    line-height: 25px;'+
        '    margin: 0 auto;'+
        '}'+
        '.sos_info{'+
        '    width: 50%;'+
        '    float: left;'+
        '}'+
        '.sos_info img{'+
        '    height: 38px;'+
        '    width: 50px;'+
        '}'+
        '.sos_info a:hover{'+
        ' background-color: #0000001a;'+
        '}'+
        '.sos_info a, .sos_info a:hover{'+
        '    text-decoration: none!important;'+
        '    font-size:16px;'+
       '    display: inline-block;'+
        '}'+
       '.sos_info a span {'+
        '    color: #fff;'+
        '    vertical-align: top;'+
        '    line-height: 40px;'+
       '    padding: 0 5px 0 0;'+
       '    text-shadow: 5px 1px 4px rgba(102, 102, 102, 0.4);'+
        '  } '+
        '.sos_redes{'+
        '    width: 50%;'+
        '    float: right;'+
        '    text-align: right;'+
        '    padding:5px 0px;'+
        '}'+
        '.sos_redes img{'+
        '    background-color: #c5403b;'+
        '    width: 30px;'+
        '    border-radius: 50%;'+
        '}'+
        '.sos_redes img:hover{'+
        '    background-color: #3b5998;'+
        '}'+
        '<style>'
    );
   
    });


Última edição por Cepheus em 17.10.16 1:33, editado 2 vez(es)
Cepheus
Cepheus
Membro

Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085

http://www.bestskins.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por while 17.10.16 1:05

Já que o Cepheus refez o código adicionando uma nova variável, está ok, só que notei um erro no código... Esqueceu do ; das var.

Como assim While? bom, no console irá pegar, mas na gestão dos códigos Javascripts não. Pois não carregará as informações das variáveis.

Troque por este:
Código:
$(function() { 
    var facebook = 'https://pt-pt.facebook.com/sosdivorcio/'; // COLOQUE O LINK DO FACEBOOK
      var  logo = "http://i.imgur.com/bUOsjtp.png";  // LINK DO LOGOTIPO
      var titulo = "SOS DIVÓRCIO"; // TITULO DO FÓRUM
      var forumURL = "http://divorciados.forumeiros.com/"; // LINK DO SEU FÓRUM
 
    var cpHtml = $('.bodylinewidth').before(
    '<div id="barra_sos">'+
    '  <div class="sos">'+
    '    <div class="sos_info"><a href="'+forumURL+'"><img src="'+logo+'"> <span>'+titulo+'</span></a></div>'+
    '    <div class="sos_redes"><a href="'+facebook+'"><img src="http://i.imgur.com/KVt9LPl.png"></a></div>'+
    '  </div>'+
    '</div>');
   
    var cpCss = $('.bodylinewidth').before(
        '<style>'+
        '.bodylinewidth{'+
        '    margin-top:55px;'+
        '}'+
        '#barra_sos{'+
        '    background-color: #c5403b;'+
        '    width: 100%;'+
        '    top:0;'+
        '    left: 0;'+
        '    height: 42px;'+
        '    margin: 0 auto;'+
        '    position: fixed;'+
        '    z-index: 99999;'+
        '}'+
        '.sos{'+
        '    width: 85%;'+
        '    line-height: 25px;'+
        '    margin: 0 auto;'+
        '}'+
        '.sos_info{'+
        '    width: 50%;'+
        '    float: left;'+
        '}'+
        '.sos_info img{'+
        '    height: 38px;'+
        '    width: 50px;'+
        '}'+
        '.sos_info a:hover{'+
        ' background-color: #0000001a;'+
        '}'+
        '.sos_info a, .sos_info a:hover{'+
        '    text-decoration: none!important;'+
        '    font-size:16px;'+
      '    display: inline-block;'+
        '}'+
      '.sos_info a span {'+
        '    color: #fff;'+
        '    vertical-align: top;'+
        '    line-height: 40px;'+
      '    padding: 0 5px 0 0;'+
      '    text-shadow: 5px 1px 4px rgba(102, 102, 102, 0.4);'+
        '  } '+
        '.sos_redes{'+
        '    width: 50%;'+
        '    float: right;'+
        '    text-align: right;'+
        '    padding:5px 0px;'+
        '}'+
        '.sos_redes img{'+
        '    background-color: #c5403b;'+
        '    width: 30px;'+
        '    border-radius: 50%;'+
        '}'+
        '.sos_redes img:hover{'+
        '    background-color: #3b5998;'+
        '}'+
        '<style>'
    );
   
    });

Créditos ao Cepheus, repute-o, pois ele fez acontecer. Feliz
Até mais.
while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Ana Leandro 17.10.16 15:11

Muito obrigada. Está tratado!Piscada
Ana Leandro
Ana Leandro
****

Membro desde : 03/07/2008
Mensagens : 216
Pontos : 300

http://divorciados.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: Barra no topo do fórum com link para o facebook

Mensagem por Cream 17.10.16 15:18

Barra no topo do fórum com link para o facebook  Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos