Personalizar cabeçalho

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

Resolvido Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 12:41 pm

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: Invision

Descrição


Bom, estava vendo nesse fórum esse menu: http://ipsfocus.net/4x/

http://i.imgur.com/iOcAmGl.png?2

Me interessei e queria por no meu fórum.
Já fiz alguma parte, o resto é CSS agora, veja:
http://testebpu.forumeiros.com/forum

Seria possível ajudar? Pode-se basear do fórum de testes mesmo para adiantar trabalho kk Feliz
Desde já agradeço
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 01:21 pm

Precisarei que o senhor nos passe seu overall_header.
Somente de backup, estou salvando um código que já fiz.

Não faça nada com ele por agora.
Spoiler:
Código:
div#primary_nav {
  background: rgba(255,255,255,0.1) url(http://i.imgur.com/CcLIuMn.png) repeat 50% 50%;
  box-shadow: inset rgba(255,255,255,0.1) 0px 0px 0px 1px, inset rgba(255,255,255,0.3) 0px 1px 0px, #000 0px 1px 2px;
  border-radius: 3px;
  position: relative;
  max-height: 60px;
}

div#primary_nav ul li a {
  padding: 20px;
  display: inline-block;
  font-size: 14px;
}

div#primary_nav * {
  font-size: 0px;
}

o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 01:54 pm

avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 02:03 pm

avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 03:10 pm

Certo, agora veja como ficou kkk
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 06:24 pm

Estranho. Suspeito...

Troque por:
-> https://pastebin.com/FPABmCyP

o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 06:29 pm

Estamos quase, veja o resultado lá..
Falta também adicionar aquela cor roxa Feliz
Depois vou personaliza-la deixando azul.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 06:40 pm

Olá,

Já deixei no estilo do seu fórum para poupar seu trabalho.
Espero que goste. Piscada

Adicione ao final de sua CSS, para que sobreponha aos outros estilos:
Código:
div#primary_nav {
  background: rgba(255,255,255,0.1) url(http://i.imgur.com/CcLIuMn.png) repeat 50% 50%;
  box-shadow: inset rgba(255,255,255,0.1) 0px 0px 0px 1px, inset rgba(255,255,255,0.3) 0px 1px 0px, rgba(0, 0, 0, 0.49) 0px 1px 2px;
  border-radius: 3px;
  position: relative;
  margin: 15px 0px;
  max-height: 60px;
  padding: 0px 10px;
}

div#primary_nav ul li a {
  padding: 20px;
  display: inline-block;
  font-size: 14px;
  color: rgba(255,255,255,1);
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  transition: all 0.15s ease-in-out;
  text-transform: uppercase;
}

div#primary_nav * {
  font-size: 0px;
}

body {
  background: #fff url(http://i.imgur.com/0B5lrds.png);
}

.pun {
  border-top: none!important;
}

div#branding {
  border-bottom: solid 2px #2ea3f2;
}

div#primary_nav ul li a:hover {
  color: rgba(255,255,255,1);
}

div#primary_nav ul li:before, div#primary_nav ul li:after {
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  left: -8px;
  right: 40px;
  background: url(http://ipsfocus.net/4x/uploads/set_resources_133/005d20f304c7929cbfdb3fe61d088022_nav-hover.png) no-repeat;
  background-position: 0 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.25s, 0.25s;
  transition-delay: 0.25s, 0s;
  transition-timing-function: ease-in-out;
  transform: scaleY(0) translate(0,0);
  transform-origin: 100% 50%;
}

div#primary_nav ul li:hover:before, div#primary_nav ul li:hover:after {
  opacity: 1;
  transform: scaleY(1) translate(0,0);
  transition-delay: 0s, 0s;
}

div#primary_nav ul li:hover {
  z-index: 98989889;
}

div#primary_nav ul li {
  vertical-align: top;
  transform: translate(0,0);
  position: relative;
}

div#primary_nav ul li:after {
  left: auto;
  right: -8px;
  width: 48px;
  background-position: 100% 50%;
  transform-origin: 0% 50%;
}

De preferência, coloque na CSS do Github (ao final), que já sobrepõe. Feliz

o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 06:55 pm

Estranho, apliquei em ambos, até coloquei <style> pelo Overall e nada kkk, não modificou mta coisa.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 06:58 pm

Ué...
Para mim resultou, veja:
-> http://prntscr.com/f4ltos

O senhor aplicou no fórum de testes com o template modificado? Errado
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 07:06 pm

Veja, quando está logado e quando sem registro como fica: http://imgur.com/a/5sps3

Gostaria de deixar as regras em Dropdown só que adicionar mais tópicos do que já está, seria possível?

E no lugar de "Regitrar e Logar" poderia ser assim:
http://i.imgur.com/fFDtOnV.png?1

O avatar, um menuzinho com dropdown tbm mas com o efeito do dropdown assim: http://i.imgur.com/zOIleLx.png?1

Daria certo ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 05/05/17, 07:16 pm

Nope. É bem difícil fazer isso.
Com meu atual tempo disponível, não teria tempo suficiente para fazer isso.

O senhor pode esperar outra pessoa, mas acho difícil também alguém ter tempo para isso.
O código que te mandei está funcional. Ele só deixa de funcionar, pois, ao estar logado, aparece outros menus nele. O que eu não tinha como prever, visto que o senhor não usa a variável que gera o menu de navegação, mas sim, um menu personalizado via HTML.

o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 05/05/17, 07:31 pm

Bom, pegue o código do outro fórum que eu tinha e era parecido.
Poderia me ajudar a arrumar?
http://i.imgur.com/rVekJ2n.png

Gostaria que a sequencia de "meu perfil, avatar, sair, e mensagem privada" fosse igual a essa print: http://i.imgur.com/4YBemcP.png
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 08/05/17, 11:41 am

Bom, consegui fazer um Dropdown que ficou assim: http://prntscr.com/f5hhgm

Mas eu gostaria dele assim: http://i.imgur.com/q3j9WVE.png , como nesse tutorial: http://censurado/t51-menu-do-usuario-em-drop-down
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 08/06/17, 05:44 pm

Crie um novo Javascript investido em Todas as Páginas com o código:
Código:
(function ($) {
  'use strict';

  $(function () {

    var $target = $('#myDropDown');
   
    var $drop = $target.after([
      '<div class="lz-dropdown-user" style="position: absolute; display: none;">',
      '  <div class="lz-avatar-wrap">',
      '    ' + _userdata["avatar"],
      '  </div>',
      '  <div class="lz-col-left">',
      '    <a href="/st/' + _userdata["username"] + '">Meu Conteúdo</a>',
      '    <a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>',
      '    <a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a>',
      '  </div>',
      '  <div class="lz-col-right">',
      '    <a href="/u' + _userdata["user_id"] + '">Meu Perfil</a>',
      '    <a href="/profile?mode=editprofile&page_profil=avatars">Mudar avatar</a>',
      '    <a href="/profile?mode=editprofile&page_profil=informations">Preferências</a>',
      '  </div>',
      '</div>',
    ].join('\n'));
   
    $target.attr('style', [
      'display: none !important;',
      'visibility: hidden !important;',
      'opacity: 0 !important;',
      'pointer-events: none !important;',
    ].join(' '));

    $('#drop_link').attr('onclick', '');
    $('#drop_link').on('click', function () {
      $('.lz-dropdown-user').toggle();
    });

    $('head').append([
      '<style type="text/css">',
      '  .lz-dropdown-user {',
      '    background-color: #fff;',
      '    z-index: 9999;',
      '    width: 400px;',
      '    height: 120px;',
      '    right: 0px;',
      '    box-sizing: border-box;',
      '    border-radius: 4px;',
      '    padding: 10px;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.63);',
      '  }',
      '',
      '  .lz-dropdown-user * {',
      '    box-sizing: border-box;',
      '  }',
      '',
      '  .lz-dropdown-user .lz-avatar-wrap img {',
      '    height: 65px;',
      '    width: 65px;',
      '    border: solid 3px #fff;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);',
      '    margin-top: 15px;',
      '    float: left;',
      '  }',
      '',
      '  .lz-dropdown-user a {',
      '    color: #245a88!important;',
      '    font-size: 12px!important;',
      '  }',
      '',
      '  .lz-dropdown-user a:hover {',
      '    text-decoration: underline!important;',
      '  }',
      '</style>',
    ].join('\n'));
  });
}(jQuery));

o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 13/06/17, 01:14 pm

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 07/08/17, 07:40 pm

A pedido do autor do tópico, o tópico está voltando à atividade.

---

Edit:

Eu fui em seu fórum, e este foi o resultado do código JavaScript passado por mim acima:
-> http://prntscr.com/g5mxiz

Há algo de errado? o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 09/08/17, 09:14 pm

Um pouco, veja a imagem e note a diferença
https://m.imgur.com/q3j9WVE?r

No meu forum as letras estão muito separadas uma das outras.
Gostaria também de adicionar uma setinha em cima como se fosse um balão de conversa. Seria possível?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Luiz em 09/08/17, 09:43 pm

Na época que fiz esse código JavaScript eu tinha formas diferentes de resolver as coisas.
Remova o JavaScript e me passe seu "overall_header". o/

Alguns UPs deste tópico foram removidos.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 13/08/17, 08:29 pm

avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 15/08/17, 11:35 am

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 16/08/17, 01:12 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 17/08/17, 03:40 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 18/08/17, 03:41 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 20/08/17, 11:56 am

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 21/08/17, 02:07 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 22/08/17, 03:25 pm

up
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 23/08/17, 09:09 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 24/08/17, 10:51 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 03:36 pm

Adicione ao seu CSS:

Código:
.lz-avatar-wrap {
    position: absolute;
    top: 0;
    left: 15px;
}
 
.lz-dropdown-user {   
    padding-left: 85px;
    height: 95px;
}
 
.lz-dropdown-user .lz-col-left,
.lz-dropdown-user .lz-col-right {
    line-height: 1.5rem;
    width: 50%;
    box-sizing: border-box;
    float: left;
}
 
.lz-dropdown-user .lz-col-left a,
.lz-dropdown-user .lz-col-right a {
    display: block;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 25/08/17, 03:51 pm

avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 03:57 pm

Mais uma peça:

Código:
.lz-dropdown-user {
    padding-left: 80px;
    height: 96px;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 25/08/17, 04:14 pm

Sem resultado.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 04:21 pm

O CSS do site está sobrescrevendo o do GitHub. Coloque !important na frente das regras:

Código:
.lz-dropdown-user {
    padding-left: 80px !important;
    height: 96px !important;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 25/08/17, 04:23 pm

Na verdade era outro código, já resolvi.
Agora teria como adicionar uma setinha ?
Bem aqui http://prntscr.com/gd1afl
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 04:35 pm

Código:
#user_navigation {
    overflow: visible;
}

#user_navigation > ul > li {
    position: relative;
}

.lz-dropdown-user::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5px 10px 7.5px;
    border-color: transparent transparent #fff transparent;
    top: -8px;
    right: 8px;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 25/08/17, 05:00 pm

HEUHEUHEUEHUE
Não aparece mais o cabeçalho: http://prntscr.com/gd1r45
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 05:03 pm

Como sempre, adicione um !important:

Código:
#user_navigation {
    overflow: visible !important;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Personalizar cabeçalho

Mensagem por iScroll em 25/08/17, 05:14 pm

Perfeito, pode fechar. Mt obrigado.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda em 25/08/17, 05:18 pm

o/

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

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

- Tópicos similares

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