Personalizar cabeçalho

3 participantes

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

Tópico resolvido Personalizar cabeçalho

Mensagem por iScroll 05.05.17 16:41

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/

https://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
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 17:21

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:

o/
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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 17:54

iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 18:03

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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 19:10

Certo, agora veja como ficou kkk
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 22:24

Estranho. Suspeito...

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

o/
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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 22:29

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 22:40

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/
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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 22:55

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 22:58

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

O senhor aplicou no fórum de testes com o template modificado? Errado
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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 23:06

Veja, quando está logado e quando sem registro como fica: https://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:
https://i.imgur.com/fFDtOnV.png?1

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

Daria certo ?
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 05.05.17 23:16

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/
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: Personalizar cabeçalho

Mensagem por iScroll 05.05.17 23:31

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

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 08.05.17 15:41

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

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 08.06.17 21:44

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/
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: Personalizar cabeçalho

Mensagem por Luiz 13.06.17 17:14

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.
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: Personalizar cabeçalho

Mensagem por Luiz 07.08.17 23:40

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/
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: Personalizar cabeçalho

Mensagem por iScroll 10.08.17 1:14

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?
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Luiz 10.08.17 1:43

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.
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: Personalizar cabeçalho

Mensagem por iScroll 14.08.17 0:29

iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 15.08.17 15:35

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 16.08.17 17:12

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 17.08.17 19:40

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 18.08.17 19:41

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 20.08.17 15:56

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 21.08.17 18:07

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 22.08.17 19:25

up
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 24.08.17 1:09

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 2:51

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 19:36

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;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 19:51

iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 19:57

Mais uma peça:

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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 20:14

Sem resultado.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 20:21

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;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 20:23

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 20:35

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;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 21:00

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 21:03

Como sempre, adicione um !important:

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

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por iScroll 25.08.17 21:14

Perfeito, pode fechar. Mt obrigado.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar cabeçalho

Mensagem por Kyo Panda 25.08.17 21:18

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.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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