Barra de ferramentas igual ao deste fórum

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?

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

Crie um novo JavaScript
Painel de Controle Módulos Html & JavaScript 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 Visualização Imagens e Cores 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

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

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


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

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

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.

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