Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
wefr123
 
Luiz
 
Matt Shultz
 
iScroll
 
Harleen
 
Ketholy123
 
zHugh
 
T1ag0
 
PlayWillian
 
Lecxa
 

Quem está conectado
292 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 286 Visitantes :: 2 Motores de busca

Artref, DustyRhodes, Harleen, ranzatti, wefr123, xDominiC_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Barra de ferramentas igual ao deste fórum

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

Resolvido Barra de ferramentas igual ao deste fórum

Mensagem por Hukers em 31/01/16, 08:59 pm

Detalhes da questão


Endereço do fórum: http://gametizando.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá, gostaria de implementar o efeito da barra de ferramentas aqui do FdF no meu fórum, é possível?


Última edição por MateusR em 07/02/16, 02:00 pm, editado 1 vez(es)
avatar

Hukers
Nível 6

Masculino
Inscrito dia : 25/06/2013
Mensagens : 77
Pontos Ativos : 150

Ver perfil do usuário http://webgraphic.forumeiro.com/

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por Harleen em 01/02/16, 10:20 am

Bom dia, refere-se a isso http://prntscr.com/9xl3h5?

Crie um novo JavaScript
Painel de Controle Seta Módulos Seta Html & JavaScript Seta Gestão dos códigos JavaScript
Com o investimento Em todas as páginas adicione
Código:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#pun-navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
   
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
   
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
   
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
   
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
       
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
       
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
       
        document.body.appendChild(FA.Nav.toggler);
      };
     
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
   
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
     
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

Painel de Controle Seta Visualização Seta Imagens e Cores Seta Folha de estilo CSS
Código:
/* Menu */
#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
.post div[style*="-30px;"] {
  top:-60px !important;
}

Até mais
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1520
Pontos Ativos : 1970

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por Hukers em 01/02/16, 07:01 pm

Não exatamente, não quero o menu, quero apenas os bordados e a formatação dela, abaixo vai uma print.
avatar

Hukers
Nível 6

Masculino
Inscrito dia : 25/06/2013
Mensagens : 77
Pontos Ativos : 150

Ver perfil do usuário http://webgraphic.forumeiro.com/

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por HilterHP em 01/02/16, 07:56 pm

Adicione ao seu CSS:

Código:
#fa_toolbar {
    left: 0px;
    height: 30px;
    background-color: #333333;
    color: #FFFFFF;
    font-family: Helvetica, Verdana, Arial;
    font-size: 16px;
    z-index: 20002;
}
#fa_toolbar {
    background-color: #f7f7f7!important;
    border-bottom: 1px solid #CCC;
}
.fa_fix {
    position: fixed !important;
    position: absolute;
    top: 0;
    right: 0;
}
.fa_toolbar_XL_Sized {
    min-width: 980px;
    width: 100%;
}
#fa_toolbar_hidden {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    margin-top: -60px;
    background-color: #333333;
    border-radius: 0px 0px 5px 5px;
    z-index: 20002;
}

#fa_toolbar_hidden {
    border: 1px solid #CCC;
    border-radius: 0!important;
    border-right: 0;
    border-top: 0;
}
.fa_fix {
    position: fixed !important;
    position: absolute;
    top: 0;
    right: 0;
}
#fa_right {
    float: right;
    font-size: 14px;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_left {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    line-height: 30px !important;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_search {
    margin-left: 20px;
    height: 30px;
}
#fa_search {
    position: relative;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_share {
    margin-left: 20px;
    font-size: 16px;
    line-height: 30px !important;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
    color: #FFFFFF;
}

#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #39C!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}
#fa_welcome, #fa_right #fa_notifications {
    line-height: 30px;
    padding: 0px 5px;
    color: #FFFFFF;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_search #fa_magnifier {
    position: absolute;
    background-position: -30px 0px;
}
#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show {
    background-image: url('http://www.illiweb.com/fa/i/toolbar/toolbar.png');
    width: 30px;
    height: 30px;
    cursor: pointer;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
.fa_tbMainElement, .fa_tbMainElement a, #fa_show {
    display: inline-block !important;
    vertical-align: middle;
}
#fa_search #fa_textarea {
    text-indent: 30px !important;
    width: 200px;
    height: 24px;
    padding: 0px;
    border: 0px;
    margin-top: 3px;
    border-radius: 5px;
    line-height: 24px;
}

#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
avatar

HilterHP
Nível 10

Masculino
Inscrito dia : 24/02/2014
Mensagens : 257
Pontos Ativos : 409

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

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por Hukers em 02/02/16, 06:45 pm

Ficou meio bugada e a caixa de pesquisa não abre igual a aqui..
avatar

Hukers
Nível 6

Masculino
Inscrito dia : 25/06/2013
Mensagens : 77
Pontos Ativos : 150

Ver perfil do usuário http://webgraphic.forumeiro.com/

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por HilterHP em 02/02/16, 07:29 pm

Para a barra de pesquisa, acho que irá necessitar de um JavaScript
avatar

HilterHP
Nível 10

Masculino
Inscrito dia : 24/02/2014
Mensagens : 257
Pontos Ativos : 409

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

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por Rafael em 04/02/16, 06:12 pm

Olá!

Apague todos os códigos aqui passados, e coloque este:

Código:
#fa_search {
position: relative;
}
#fa_search #fa_textarea {
transition: ease;
transition-duration: 1.5s;
background: #39C none repeat scroll 0% 0% !important;
border: 1px solid #39C !important;
border-radius: 3px 0px 0px 3px !important;
color: #39C !important;
cursor: text;
font-size: 12px !important;
height: 16px !important;
line-height: 12px !important;
margin-right: 23px !important;
padding: 3px 0px 3px 1px !important;
width: 0px !important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
transition: ease;
transition-duration: 0.5s;
background: #FFF none repeat scroll 0% 0% !important;
color: #444 !important;
outline: medium none;
padding: 3px !important;
width: 150px !important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent !important;
    border: 1px solid #39C !important;
    border-radius: 3px !important;
    color: #39C !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    margin-top: 3px !important;
    padding: 0px 6px !important;
    text-decoration: none !important;
    transition: all 200ms ease 0s;
}
#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #39C !important;
    border-color: #39C !important;
    color: #FFF !important;
}
#fa_right #fa_hide {
    background-color: transparent !important;
    border: medium none !important;
    margin-top: 0px !important;
    padding: 0px !important;
    transition: none 0s ease 0s !important;
}

Até mais.
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3116
Pontos Ativos : 4027

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

Resolvido Re: Barra de ferramentas igual ao deste fórum

Mensagem por Noiadofuk em 04/02/16, 06:24 pm

Complementando ... crie um novo javascript com investimento em todas as paginas com esse codigo:

Código:
$(function(){$(function(){var area=document.getElementById('fa_textarea');if(area){if(area.setAttribute)area.setAttribute('style','text-indent:0px !important;');area.value='Buscar...';area.onclick=function(){if(this.value=='Buscar...')this.value=''};area.onblur=function(){if(!this.value)this.value='Procurar...'};document.getElementById('fa_magnifier').onclick=function(){this.parentNode.submit()}}})});
avatar

Noiadofuk
Nível 7

Masculino
Inscrito dia : 07/01/2016
Mensagens : 90
Pontos Ativos : 137

Ver perfil do usuário http://brasilplaylife-samp.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