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

[Ana Leandro]

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á

AL

[Sennior]

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.

Até mais.
Haseo

[Ana Leandro]

Olá Haseo,

Já está!
E agora?

Obrigada.

[Luiz]

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!

Atenciosamente, Luiz.

[Cepheus]

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   Módulos   HTML & JAVASCRIPT Gestão dos códigos JavaScript
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.

[Ana Leandro]

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!

[Luiz]

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é

[while]

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.

[Cepheus]

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>'
    );
   
    });

[while]

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.
Até mais.

[Ana Leandro]

Muito obrigada. Está tratado!

[Cream]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".