Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá!

Eu sei que a versão ModernBB ainda não tem acesso aos templates, mas é possível na mesma deixar desta forma?:


- http://suportedesign.forumeiros.com/

Boa noite.

Você pode incluir uma imagem! É só acessar Visualização >> Imagens e Cores >> Gestão das imagens >> Modo avançado > e localizar o campo Imagem de fundo do menu de navegação e substituir pela imagem desejada.

Atenciosamente,
Shek

Olá!

Não é isso, o que queria dizer era que queira deixar o meu header como esse.

Olá autor, boa noite.

Adicione esse código em sua folha de estilo css:

Código:

.navbar {
                -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    -o-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    background: #FFF;
    border-bottom: 3px solid #febe29;
    height: 60px;
    line-height: 60px;
    width: 120%;
    margin-left:-60px;
    z-index: 999;
    margin-top:28px;
        }
        .navbar a {
                -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    -webkit-transition: color .2s ease;
    background-color: transparent;
    color: #848484;
    cursor: pointer;
    float: left;
    font-family: Ubuntu;
    font-size: 13px;
    font-weight: 700;
    height: 60px;
    line-height: 60px;
    list-style-type: none;
    margin-left: 1px;
    padding: 0 18px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease;
    margin-top:-20px;
    margin-left:-20px;
        }
        .navbar a:hover {
            background-color: #febe29;
    color: #FFF;
    margin-right: 5px;
    margin-left:5px; 
        }
      .navbar img {display:none;}
      .headerbar {    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-image: url(http://i.imgur.com/oojYbxi.png);
    background-position: right;
    background-size: 100%;
    box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    font-weight: 500;
    margin-bottom: 0;
    min-height: 200px;}
    .is-sticky .navbar {display:none;}

Veja se ficou bom....

Até mais.

Já apareceu algo, agora era só ajustar o resto e fica perfeito o menu onde tem aquele espaço em preto.

Troque o código por este:

Código:

 .navbar {
                -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    -o-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    background: #FFF;
    border-bottom: 3px solid #febe29;
    height: 80px;
    line-height: 60px;
    width: 120%;
    margin-left:-60px;
    z-index: 999;
    margin-top:51px;
        }
        .navbar a {
                -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    -webkit-transition: color .2s ease;
    background-color: transparent;
    color: #848484;
    cursor: pointer;
    float: left;
    font-family: Ubuntu;
    font-size: 13px;
    font-weight: 700;
    height: 60px;
    line-height: 60px;
    list-style-type: none;
    margin-left: 1px;
    padding: 0 18px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease;
    margin-top:-20px;
    margin-left:-20px;
        }
        .navbar a:hover {
            background-color: #febe29;
    color: #FFF;
    margin-right: 5px;
    margin-left:5px; 
        }
      .navbar img {display:none;}
      .headerbar {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-image: url(http://i.imgur.com/oojYbxi.png);
    background-position: right;
    background-size: 100%;
    box-shadow: rgba(0,0,0,0.3) 0 1px 5px;
    font-weight: 500;
    background-size:180%!important;
    margin-bottom: 0;
    min-height: 200px;
    }
    .is-sticky .navbar {display:none;}
    #logo > img {margin-left:-900px!important;margin-top:100px;}
    .is-sticky#headerbar-top {display:none;}

Ficou com bug por causa que você retirou a imagem anterior da logo, agora está certo.

Até mais.

Agora ficou pior do que estava a imagem de fundo ficou ampliada e o menu ainda está no meio e não queria o header tão largo.

Deixe o que eu já passei e Adicione mais esse código em sua folha de estilo css:

Código:

 #logo > img {margin-top:-170px!important;}
        .navbar {margin-top:180px!important;height:70px!important;}
        .headerbar {height:250px!important;background-size:120%!important;margin-top:-5px!important;}

Até mais.

Retirei na class headerbar o código, para não ficar tão ampliada a imagem, só que aparece uma barra em preta em cima e queria retirar:

Código:

background-size:180%!important;

Queria era centrar o menu e também adicionar aquela caixa de pesquisa ao lado do logo como está aqui:
http://suportedesign.forumeiros.com/

Vejo tudo certo aqui, veja minha tela:



Quanto a barra de buscar, infelizmente não tem como por conta de não ter template na nova versão.

Até mais.

Mas aqui não veja:


Queria era centar mesmo o menu, sobre aquela barra em preta em cima penso que seja por causa quando fazemos scroll aparece uma barra preta que era antes do menu.

É, adicione mais esse código em sua folha de estilo css:

Código:

.is-sticky#headerbar-top {display:none!important;}
.navbar a {margin-left:-190px!important;margin-right:170px!important;}

Até mais.

Ainda continua aparecer a tal borda em preto e quando faço um pouco de scroll veja:


Outra coisa é o efeito do menu que queria assim, ou seja a ocupar tudo e não fica-se por cima dos outros links:


Ele está assim:

Procure por:

Código:

.headerbar {background-size:120%!important;}

E troque por:

Código:

.headerbar {background-size:125%!important;}

Depois disto troque esse código que citei acima, me refiro a este:

Código:

.is-sticky#headerbar-top {display:none!important;}
.navbar a {margin-left:-190px!important;margin-right:170px!important;}

E troque por:

Código:

.is-sticky#headerbar-top {display:none!important;}
.navbar a {margin-left:-190px!important;margin-right:180px!important;}

Até mais.

O menu já não está colado um ao outro mas ainda não preenche tudo ainda continua arredondado e também continua com isto:

Certo, eu não havia lido bem... adicione esse código em sua folha de estilo css:

Código:

 .navbar a:hover {height:90px!important;margin-top:-25px!important;line-height:70px!important;}

e vale ressaltar que você não fez um passo que citei.... procure por:

Código:

.headerbar {background-size:120%!important;}

E altere por:

Código:

.headerbar {background-size:130%!important;}

Até mais.

O menu já está direito, agora só continua com aquele pormenor ao dar scroll

Seguinte, procure isto no seu css:

Código:

 .headerbar {height:250px!important;background-size:120%!important;margin-top:-5px!important;}


Troque por:

Código:

.headerbar {height:250px!important;background-size:130%!important;margin-top:-5px!important;}

Caso não resultar, apenas adicione mais esse código:

Código:

.headerbar {border-bottom: 9px solid #febe29;}

Ficará meio estranho essa segunda opção, mas, pelo menos não fica a linha preta.

Até mais.

A linha preta de cima desapareceu, mas agora só queria era retirar o efeito de da scroll e desaparecer a logo apenas queria deixar normal:

Eu não entendo... Você não é fundador do fórum que está falando?

Shek Crowley escreveu:Eu não entendo... Você não é fundador do fórum que está falando?

Do SD não mas do MP sim.

O efeito de scroll está nesse script:

Código:

<script type="text/javascript">//<![CDATA[
$(document).ready(function() {$(window).scroll(function() {var header_top = $('#headerbar-top');if (header_top.hasClass('w-toolbar')) {if ($(window).scrollTop() >= 42) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}} else {if ($(window).scrollTop() >= 1) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}}});});//]]></script>

Provavelmente no seu overall_footer_end. Basta removê-lo.

E como não é o fundador do Suporte de Design, tenha certeza de obter a permissão para utilizar o tema, pois o dono do SD tem a capacidade de remover o seu fórum se declarar plágio.

o/

Pois mas a nova versão ainda não deixa mexer na edição de templates. Sobre o tema da SD ele foi montado por um colega meu e não tem qualquer problema e também apenas quero o header.

Adicione a um novo script com Investimento em Todas as páginas:

Código:

(function($) {
  'use strict';
 
  $(function() {
    $('#headerbar-top').attr('id', 'headerbar-top-custom');
  });
}(jQuery));

Resultou, reparei agora numa coisa que é quem tiver maiores resoluções a barra do menu fica encolhida não fica ajustada para todas as resoluções:

Olá.
Vamos tentar com um pouco de JavaScript:

Primeiro, crie um novo JavaScript com investimento em todas as páginas:

Código:

$(function () {
   var $faWrap = $('#headerbar-top-custom');
   var $faMenu = $('ul.navbar.navlinks');

   $faWrap.replaceWith($faMenu);

});

E adicione ao final de sua Folha de Estilo CSS:

Código:

.navbar {text-align:center!important;}

Espero que resulte. -q
Até mais. =)

Resultou mas o menu ficou à esquerda e a logo desapareceu.

Olá.
Por favor, remova o JavaScript para que eu possa fazer ajustes.
Obrigado desde já.

Até mais. =)

Retirado o javascript.

Olá.
Tentaremos pela segunda vez:

---

Crie um novo JavaScript com investimento em todas as páginas:

Código:

(function ($) {
   $('.navbar.navlinks').clone().appendTo('body').addClass('second');
}(jQuery));

Feito isso, adicione ao final de sua Folha de Estilo CSS:

Código:

ul.navbar.navlinks {
    visibility: hidden;
}

ul.navbar.navlinks.second {
    visibility: visible!important;
    position: absolute;
    top: 40px;
    width: 100%;
    max-width: 100%;
}

Até mais.

Simplesmente removeu o menu de navegação.

Tente mudar somente o JavaScript por este (ainda com investimento em todas as páginas):

Código:

(function ($) {
   $(function () {
      $('.navbar.navlinks').clone().appendTo('body').addClass('second');
    });
}(jQuery));

Lembre-se de aplicar o CSS passado anteriormente (se retirou). Caso não tenha retirado, mantenha-o.

Até mais.

Os .CSS mantive, agora ficou um pouco estranho apesar de o lado esquerdo já estar para todas as resoluções.

Altere o CSS que passei anteriormente por este:

Código:

ul.navbar.navlinks {
    visibility: hidden;
}
 
ul.navbar.navlinks.second {
    visibility: visible!important;
    position: absolute;
    top: 40px;
}

Até mais.

Resultou agora falta era centrar o menu e o efeito ao passar o mouse nele está meio estranho.

Olá.
Adicione este código ao final de sua CSS:

Código:

ul.navbar.navlinks.second {
    margin-top: 0px!important;
    margin-left: 0px!important;
    top: 240px!important;
    overflow: hidden;
}

div#page-body {
    margin-top: 55px;
}


.navbar a {
    border-radius: 0px!important;
}

Resultou?
Aproveitei e corrigi alguns erros do seu outro tópico de uma vez. xD

Resultou mas veja o que acontece quando abro caixas ou até mesmo a mensagem de pop-up:


Ela fica por baixo da barra, agora não sei se é dos códigos do Header ou da outra dúvida da barra de forumeiros.

Respondi sua questão no outro tópico, por se tratar da barra de ferramentas.
No mais, sua questão encontra-se resolvida?

Se sim, clique no botão resolvido:


Até mais. =)

Só tem uma coisa que reparei agora, se reparar dá para fazer scroll para o lado direito e não queria isso.

Isso ainda será resolvido no outro tópico também.

Então resolvido e obrigado! ^^