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.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
» Perfil do Usuário
Hoje à(s) 17:26 por vitorsali

» Pinta ícone
Hoje à(s) 17:23 por Smoke.xX

» Remover lista de moderadores dos tópicos
Hoje à(s) 16:58 por Kyo Panda

» Quadrado para redondo
Hoje à(s) 16:56 por Kyo Panda

» Lateral do fórum
Hoje à(s) 16:45 por iScroll

» Permitir que membros editem tópicos
Hoje à(s) 16:24 por vitorsali

» Criar o menu de usuário no topo
Hoje à(s) 15:07 por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
319 usuários online :: 7 usuários cadastrados, 1 Invisível e 311 Visitantes :: 1 Motor de busca

Connor R., ddr3, Kyo Panda, mizuno600, tikky, vitorsali, Yeshua

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Barra de ferramentas no fim do forum

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

Resolvido Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Qui 3 Nov 2016 - 21:12

Detalhes da questão


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

Descrição


Ola gostaria de uma barra de ferramenta no fim do meu forum.

Assim como está da foruameiros:



Mas na verdade eu só quero 2 funções nessa barra.

Tentarei demostrar aqui.


---[Menu aqui]----------------------[barra de procura aqui]----

Menu:eu gostaria de um espaço em branco para mim escrever um texto.

Barra de procura:Gostaria ade um barra personalizada (uma bem bonita rs)


é possivel?Ficarei muito grato se me ajudarem Feliz

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek Crowley em Sex 4 Nov 2016 - 10:10

Bom dia!

Eu tinha feito algo assim. Vê se é o que deseja:
Código:
<div id="ShekBar">
   <div class="left">
       <span><em class="fa fa-bars" style="color: #fff;"></em></span><span style="padding-left: 10px;"><a href="#"><em class="fa fa-cogs" style="color: #fff;"></em></a></span><span class="search_inputs"><input placeholder="Pesquisar..." name="search_keywords" class="inputbox medium" type="text" /><input value=" Pesquisar" class="button1" type="submit" /></span>
   </div>
   <div class="right">
      <a href="#"><em class="fa fa-globe"></em></a>
   </div>
</div>
E o CSS:
Código:
div#ShekBar {
    background: #5A5A5A;
    max-height: 100px;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0px;
    padding: 2px 0px 3px 15px;
}

span.search_inputs {
   padding-left: 10px;
}

span.search_inputs input.inputbox.medium {
   height: 17px;
}

div#ShekBar div.left {
   float: left;
}

div#ShekBar div.right {
   float: right;
}
Esse menu que fala, seria uma espécie de lista de links que ao passar o mouse, se abre?

Atenciosamente,
Shek King



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15580
Pontos Ativos : 22995

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Sex 4 Nov 2016 - 14:09

onde eu coloco o primeiro codigo?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum
  • 0

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Sex 4 Nov 2016 - 15:22

Em Painel de ControleVisualizaçãoTemplatesGeral, seguindo as orientações desse tópico, aconselho colocar o código em overall_header, logo abaixo da tag:

Código:
<body>

Aconselho também desativar a barra de ferramentas, pois a barra do @Shek Crowley ficará abaixo da mesma.

^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Sex 4 Nov 2016 - 16:28

COMO FICOU:
http://imgur.com/a/ZD4YE

* Eu gostaria que ficasse fixa no fim do forum.

* E tbm que seguisse esse planejamento:

--[MENU]--------------------[CAIXA DE PROCURA]---

OU

--[MENU]-[CAIXA DE PROCURA]------------[ICONE]---

seria possivel?


Última edição por Guilherme3f em Sex 4 Nov 2016 - 16:38, editado 1 vez(es)

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek Crowley em Sex 4 Nov 2016 - 16:32

Faltou me responder:
Shek escreveu:Esse menu que fala, seria uma espécie de lista de links que ao passar o mouse, se abre?
E... Tem certeza que fez a aplicação conforme mencionei no tópico? Porque, essa barra que te passei ta diferente em alguns pontos.

Para que ela fique parada, é só alterar o fixed do position e colocar absolute.



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15580
Pontos Ativos : 22995

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Sex 4 Nov 2016 - 16:43

coloquei conforme o panda disse....

Não,o menu gostaria que abrisse quando clikar,e aparecesse uma caixa tipo assim:

tentarei demostrar:

_________________________________________
|ADMINISTRADOR | membro |
|
| Exemplo | Exemplo3
| Exemplo2 | Exemplo4
|
|
|
|
|_________________________________________
^
|
-[MENU]--[BARRA DE PROCURA]-------------------[ICONE COM UM LINK]---



DEU PARA COMPREENDER? RS

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Dom 6 Nov 2016 - 21:26

Alguem pode me ajudar?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Dom 6 Nov 2016 - 22:38

Olá,

Eu precisarei de um pouco mais de detalhes sobre o conteúdo do menu. Não consegui captar o que deseja.

^-^


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Dom 6 Nov 2016 - 23:33

eu fiz um desenho no photoshop parecido com oque eu quiz demostrar la em cima.



OBS: claro que é tudo demonstração,é só um desenho marcado as posições onde eu quero que fique as ferramenta.



obrigado pela atenção.


Última edição por Guilherme3f em Dom 6 Nov 2016 - 23:49, editado 2 vez(es)

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Dom 6 Nov 2016 - 23:38

Mas em questão do conteúdo do menu aberto quando pressionada a opção Menu, poderia descrevê-la um pouco mais?


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Dom 6 Nov 2016 - 23:50

Ai quando clika no menu quero que apareça tipo assim:

http://imgur.com/a/nkL06

OBS: claro que é tudo demonstração,é só um desenho marcado as posições onde eu quero que fique as ferramenta.

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Dom 6 Nov 2016 - 23:55

Okay. Entendi o menu. E pela mensagem inicial do tópico, o senhor deseja configurar essas imagens/avatar no menu, correto? Não seria algo estático/imutável?


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Dom 6 Nov 2016 - 23:56

Gostaria que do lado do menu tivesse esse icone :


Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Dom 6 Nov 2016 - 23:58

@Kyo Panda escreveu:Okay. Entendi o menu. E pela mensagem inicial do tópico, o senhor deseja configurar essas imagens/avatar no menu, correto? Não seria algo estático/imutável?

Não entendi sua pergunta,desculpe-me.

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Seg 7 Nov 2016 - 0:00

Dentro do menu, pelo o que o senhor escreveu na mensagem inicial do fórum:

[...]Menu:eu gostaria de um espaço em branco para mim escrever um texto.

Isso quer dizer que posso deixar esse menu em branco, que o senhor colocará o conteúdo nele, correto? Ou quer que pré-programe 3 avatares para ficar ali dentro?


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Seg 7 Nov 2016 - 0:03

Sim eu quero que deixe em branco,mais como assim 3 avatares?
se fala as 3 colunas de cores?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Seg 7 Nov 2016 - 0:07

Sim, basicamente o exemplo que você passou. Encarei como três avatares Adm, Membros, Fake...

Enfim, devo deixar três colunas para você colocar o conteúdo ou o senhor mesmo as fará?

E peço perdão pelo batalhão de questões. >-<"


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Seg 7 Nov 2016 - 0:10

Que isso...tranquilo irmao.

sim!gostaria que deixa-se uma divesão das colunas mais não 3 colunas e sim 11...
ai o senhor se quiser pode aumentar a caixa de menu mais gostaria dela um pouco transparente.

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Seg 7 Nov 2016 - 2:06

Vamos lá:

  • Troque o HTML do @Shek Crowley por esse:

    Código:
    <!-- ShekBar -->
    <div id="ShekBar">
        <ul class="shekbar_menu">
            <li>COLUNA 1</li>
            <li>COLUNA 2</li>
            <li>COLUNA 3</li>
        </ul>
        <div class="left">
            <span>
                <a href="javascript:void(0);" class="shekbar_menu_toggle">
                    <em class="fa fa-bars" style="color: #fff;"></em> MENU
                </a>
            </span>
            <form action="/search" action="get" class="search_inputs">
                <input placeholder="Pesquisar..." name="search_keywords" class="inputbox medium" type="text" />
                <button class="button1" type="submit">
                    <em class="fa fa-search"></em>
                </button>
            </form>
        </div>
        <div class="right">
            <a href="/" class="shekbar_logo"><img src="http://illiweb.com/bl/logo.png" /></a>
        </div>
    </div>

    <script type="text/javascript">
        ; (function ($) {
            $(function () {
                $('.shekbar_menu_toggle').on('click', function () {
                    $('.shekbar_menu').toggleClass('shekbar_menu_open');
                });
            });
        }) (jQuery);
    </script>
    <!-- ShekBar -->

  • Procure no overall_header pela seguinte linha de código:

    Código:
    {CSS}

    Abaixo dela, inclua o seguinte código:

    Código:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

  • Troque o CSS passado pelo @Shek Crowley por esse:
    Código:
    div#ShekBar {
      background: #5a5a5a;
      max-height: 100px;
      position: fixed;
      bottom: 0;
      width: 100%;
      bottom: 0px;
      padding: 0 30px;
      box-sizing: border-box;
    }

    form.search_inputs {
      padding-left: 10px;
      position: relative;
      display: inline-block;
    }

    form.search_inputs input.inputbox.medium {
      background-color: #5a5a5a;
      height: 26px;
      border: none;
      padding: 0 10px;
      border-left: 1px #666 solid;
      border-right: 1px #666 solid;
      line-height: 26px;
      color: #fff;
      outline: none;
      box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
      transition: 250ms ease background-color;
    }

    form.search_inputs input.inputbox.medium:focus {
      background-color: #333;
    }

    div#ShekBar div.left {
      float: left;
    }

    div#ShekBar div.right {
      float: right;
    }

    .shekbar_menu {
      position: absolute;
      bottom: 26px;
      background: rgba(0, 0, 0, 0.8);
      list-style: none;
      color: #fff;
      margin: 0;
      padding: 0;
      height: 300px;
      width: 600px;
      left: -600px;
      opacity: 0;
      transition: 250ms ease;
      transition-property: left, opacity;
    }

    .shekbar_menu.shekbar_menu_open {
      left: 0;
      opacity: 1;
    }

    .shekbar_menu > li {
      float: left;
      width: 33.3%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      border-right: 1px #666 solid;
    }

    .shekbar_menu_toggle {
      color: #fff;
      text-decoration: none;
      padding: 0 10px;
      height: 26px;
      display: inline-block;
      line-height: 26px;
      transition: 250ms ease background-color;
    }

    .shekbar_menu_toggle .fa {
      margin-right: 5px;
    }

    .shekbar_menu_toggle:hover,
    .shekbar_menu_toggle:focus {
      background-color: #333;
    }

    form.search_inputs .button1 {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      color: #ccc;
      position: absolute;
      height: 26px;
      right: 10px;
      cursor: pointer;
      outline: none;
    }

    span.search_inputs .button1 .fa {
      line-height: 26px;
    }

    .shekbar_logo img {
      height: 24px;
      width: auto;
      margin-top: 1px;
    }


Créditos ao @Shek Crowley, eu fiz apenas algumas alterações no código dele.

^-^

---

EDIT.: Resultado http://ajuda-punbb.forumeiros.com

---

EDIT. 2: Esqueci de explicar as partes do código...

  • Altere o conteúdo das colunas em:
    Código:
    <li>COLUNA 1</li>
    <li>COLUNA 2</li>
    <li>COLUNA 3</li>
  • O ícone da direita é alterado em:
    Código:
    <a href="/" class="shekbar_logo"><img src="http://illiweb.com/bl/logo.png" /></a>

    É só trocar o conteúdo do href (/) para a URL do link e o src (http://illiweb.com/bl/logo.png) para a imagem desejada.


^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek Crowley em Seg 7 Nov 2016 - 12:25

Nossa Kyo, eu simplesmente amei isso! Eu amo você Eu amo você Ficou incrível.... Tive uma idéia!

Autor, me desculpe, não pude respondê-lo nestes dias devido a me envolver com outras atividades extracurriculares. Peço-lhe perdão pela demora. Triste

Até.



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15580
Pontos Ativos : 22995

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Seg 7 Nov 2016 - 12:29

Ficou perfeito irmão,Obrigado ao Shek Crowley e ao Kyo Panda
Ficou como eu queria! Feliz

Porém eu queria deixar 11 colunas.como eu adiciono ?
e tambem deixar uma margem entorno do menu ou melhor sub-menu

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum
  • 0

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Seg 7 Nov 2016 - 17:04

Agradeço os cumprimentos Shek. ^-^

---

Quanto às colunas, o processo é:

  • Adicione a quantidade de colunas que deseja no HTML:
    Código:
    <li>COLUNA 1</li>
    <li>COLUNA 2</li>
    <li>COLUNA 3</li>
    <li>COLUNA 4</li>
    ...
    <li>COLUNA N</li>
  • No CSS, nessa parte:
    Código:
    .shekbar_menu > li {
      float: left;
      width: 33.3%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      border-right: 1px #666 solid;
    }

    Alterar o width: 33.3%; para a largura da colunas. No caso, para três colunas estou usando 100 / 3, que é o 33,3 que vê no código, ou a largura total da div dividida por 3 colunas. Se desejar 11 colunas, seria 100 / 11, resultando em 9,09, mudando a regra para width: 9.09%; (perceba que na regra, o separador de decimais é ponto ao invés de vírgula).

  • Para editar a largura do menu (se ficar muito fina as colunas), nessa parte do CSS:

    Código:
    .shekbar_menu {
      position: absolute;
      bottom: 26px;
      background: rgba(0, 0, 0, 0.8);
      list-style: none;
      color: #fff;
      margin: 0;
      padding: 0;
      height: 300px;
      width: 600px;
      left: -600px;
      opacity: 0;
      transition: 250ms ease;
      transition-property: left, opacity;
    }

    Altere width: 600px; e left: -600px; para a largura desejada. Supomos que deseja um menu com 1000px de largura, as regras mudariam para width: 1000px; e left: -1000px;. O primeiro é a largura do elemento, o segundo é a posição que o elemento fica para a esquerda (para que o efeito de "aparecer" funcione).

---

Para a margem, adicione ao CSS:

Código:
.shekbar_menu {
    margin: 10px;
}

^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Seg 7 Nov 2016 - 18:33

Ficou muito estranho, não tem como dividir no meio o menu?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Ter 8 Nov 2016 - 0:34

Você diz, colocar uma margem entre as colunas?

---

P.S.: Pelo que vi no CSS, você definiu a regra como width: 9,09%; e deveria estar width: 9.09%; (ponto ao invés de vírgula).

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Ter 8 Nov 2016 - 0:55

|----------------------------------------------------
|ADM Memrbos Membros2
|
|
|
|--------------------------------------------------
|membros 4 membros 5
|
|
|
|
|---------------------------------------------------

Deu para entender?rs

e como coloco meu texte agr?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Ter 8 Nov 2016 - 1:18

Para isso teremos que fazer algumas alterações.

Troque o HTML por esse:
Código:
<!-- ShekBar -->
<div id="ShekBar">
   <div class="shekbar_menu">
      <ul>
         <li>COLUNA 1</li>
         <li>COLUNA 2</li>
         <li>COLUNA 3</li>
         <li>COLUNA 4</li>
         <li>COLUNA 5</li>
         <li>COLUNA 6</li>
      </ul>
      <ul>
         <li>COLUNA 1</li>
         <li>COLUNA 2</li>
         <li>COLUNA 3</li>
         <li>COLUNA 4</li>
         <li>COLUNA 5</li>
         <li>COLUNA 6</li>
      </ul>
   </div>
   <div class="left">
      <span>
         <a href="javascript:void(0);" class="shekbar_menu_toggle">
            <em class="fa fa-bars" style="color: #fff;"></em> MENU
         </a>
      </span>
      <form action="/search" action="get" class="search_inputs">
         <input placeholder="Pesquisar..." name="search_keywords" class="inputbox medium" type="text" />
         <button class="button1" type="submit">
            <em class="fa fa-search"></em>
         </button>
      </form>
   </div>
   <div class="right">
      <a href="/" class="shekbar_logo"><img src="http://illiweb.com/bl/logo.png" /></a>
   </div>
</div>

<script type="text/javascript">
   ; (function ($) {
      $(function () {
         $('.shekbar_menu_toggle').on('click', function () {
            $('.shekbar_menu').toggleClass('shekbar_menu_open');
         });
      });
   }) (jQuery);
</script>
<!-- ShekBar -->

E o CSS por esse:
Código:
div#ShekBar {
  background: #5a5a5a;
  max-height: 100px;
  position: fixed;
  bottom: 0;
  width: 100%;
  bottom: 0px;
  padding: 0 30px;
  box-sizing: border-box;
}

form.search_inputs {
  padding-left: 10px;
  position: relative;
  display: inline-block;
}

form.search_inputs input.inputbox.medium {
  background-color: #5a5a5a;
  height: 26px;
  border: none;
  padding: 0 10px;
  border-left: 1px #666 solid;
  border-right: 1px #666 solid;
  line-height: 26px;
  color: #fff;
  outline: none;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: 250ms ease background-color;
}

form.search_inputs input.inputbox.medium:focus {
  background-color: #333;
}

div#ShekBar div.left {
  float: left;
}

div#ShekBar div.right {
  float: right;
}

.shekbar_menu {
  position: absolute;
  bottom: 26px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  height: 400px;
  width: 800px;
  left: -800px;
  opacity: 0;
  margin: 10px;
  transition: 250ms ease;
  transition-property: left, opacity;
}

.shekbar_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 50%;
  overflow: hidden;
  border-bottom: 1px #666 solid;
}

.shekbar_menu ul:last-child {
  border-bottom: none;
}

.shekbar_menu.shekbar_menu_open {
  left: 0;
  opacity: 1;
}

.shekbar_menu ul > li {
  float: left;
  width: 16.66%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px #666 solid;
}

.shekbar_menu ul > li:last-child {
  border-right: none;
}

.shekbar_menu_toggle {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  height: 26px;
  display: inline-block;
  line-height: 26px;
  transition: 250ms ease background-color;
}

.shekbar_menu_toggle .fa {
  margin-right: 5px;
}

.shekbar_menu_toggle:hover,
.shekbar_menu_toggle:focus {
  background-color: #333;
}

form.search_inputs .button1 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ccc;
  position: absolute;
  height: 26px;
  right: 10px;
  cursor: pointer;
  outline: none;
}

span.search_inputs .button1 .fa {
  line-height: 26px;
}

.shekbar_logo img {
  height: 24px;
  width: auto;
  margin-top: 1px;
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Ter 8 Nov 2016 - 13:44

o menu não quer abrir agora. :/

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Ter 8 Nov 2016 - 16:55

Pelo que vi no seu HTML, o senhor não removeu todo o código anterior antes de colocar o novo. Assim sendo, essa parte está duplicada:

Código:
<script type="text/javascript">
  ; (function ($) {
      $(function () {
        $('.shekbar_menu_toggle').on('click', function () {
            $('.shekbar_menu').toggleClass('shekbar_menu_open');
        });
      });
  }) (jQuery);
</script>

Fazendo com que o menu não abra. ^-^


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Ter 8 Nov 2016 - 17:47

Ficou Incrível Panda!
Gostaria de adicionar mais alguns detalhes para ficar realmente perfeito!seria possivel?

1- gostaria de adicionar cores nos titulos "Colunas" e colocar um Glitter de acordo com cada cor dos titulos.

2- tambem colocar uma margem/borda da cor da barra de ferramentas assim como essa!

http://imgur.com/a/tTAZM

3- veja que em meu forum a um sistema "Noturno" Teria como deixa-lo visível?colocar na barra de ferramentas ou sla.
Veja:

http://imgur.com/a/8ymeP

4- e teria como desbugar isso aqui?

http://imgur.com/a/oYmat



PS: como eu escrevo o nome dos meus usuários debaixo dos titulos "colunas"?

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Ter 8 Nov 2016 - 19:37

Adicione ao CSS:

Código:
div#ShekBar {
    z-index: 100;
}

.shekbar_menu {
    border: 10px #313131 solid;
    border-radius: 5px;
 
}

.shekbar_menu li span {
    background: url(https://i58.servimg.com/u/f58/15/62/32/35/backro15.gif) repeat;
}

div#contenido {
    padding-bottom: 50px;
}

Isso deve resolver os itens 2, 3 e 4 e parcialmente o 1. Para personalizar o 1, na coluna, onde está como:

Código:
<li>FUNDADOR</li>

Troque por:

Código:
<li><span style="color: #f00;">FUNDADOR</span></li>

Em color: #f00;, você pode alterar a cor do título. O glitter será aplicado automaticamente após isso.

---

Para as linhas, após o título, apenas adicione um:

Código:
<br />

O código acima faz os textos após irem para a linha de baixo.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Ter 8 Nov 2016 - 20:08

Ficou perfeito panda,ta 99,9999 perfeito...
só não consegui ainda colocar o texto abaixo dos titulos
Achu que não entendi bem o codigo <br />

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Qua 9 Nov 2016 - 1:10

Ficaria assim:

Código:
<li>
  <span style="color: #f00;">FUNDADOR</span><br />
  Linha 1<br />
  Linha 2 e mais algum texto<br />
  Linha N
</li>

^-^

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Qua 9 Nov 2016 - 13:22

Desculpe por em comodar tanto o senhor,mas teria como adicionar mais alguns detalhes?

1. Teria como centralizar o nomes dos usuarios?Veja como está:

http://imgur.com/a/MyI8m

2.teria como deixar uma espaço entre o titulo da coluna e o nome do usuario,acho que estão muito perto um do outro.Veja:

http://imgur.com/a/WCUTt

3.teria como colocar um brilho externo nos nomes dos usuarios assim como nesse exemplo?

http://imgur.com/a/rI7vX

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Qua 9 Nov 2016 - 16:08

Adicione ao CSS:

Código:
.shekbar_menu span {
    display: inline-block;
    margin-bottom: 10px;
    text-shadow: 0 0 1px #000, 0 0 5px #FFF;
    font-weight: 700;
}

.shekbar_menu li {
    text-align: center;
    line-height: 1.5em;
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Qua 9 Nov 2016 - 16:25

O brilho externo é na lista que vai ficar de baixo da colunas

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Qua 9 Nov 2016 - 16:39

Troque o último código passado por esse:

Código:
.shekbar_menu span {
    display: inline-block;
    margin-bottom: 10px;
    text-shadow: initial;
    font-weight: 700;
}
 
.shekbar_menu li {
    text-align: center;
    line-height: 1.5em;
    text-shadow: -2px -2px 3px #FFF, 2px 2px 3px #FFF, -1px -1px 1px #000, 1px 1px 1px #000;
}


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em Qua 9 Nov 2016 - 17:12

Muito obrigado Kyo panda,ficou como eu queria Feliz
Quero agradecer ao Shek Crowleypela atenção tbm.
Ficou perfeito!

Guilherme3f
Nível 7

Masculino
Inscrito dia : 13/10/2016
Mensagens : 93
Pontos Ativos : 245

http://teste-kmz.forumeiros.com/forum

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em Qua 9 Nov 2016 - 17:14

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Flecha ajudeiros Condições gerais de uso & equipe voluntária de suporte.
Flecha ajudeiros Lista de perguntas e respostas e Tutoriais e astúcias.
Flecha ajudeiros Sistema de busca do fórum.
Fóruns interessantes:
Flecha ajudeiros Ajuda e Suporte.
Flecha ajudeiros Serviços Extras.
Flecha ajudeiros Publicidade & SEO.
Flecha ajudeiros Sugestões e Melhoras.
Desenvolvedores:
Flecha ajudeiros Addons ou Plugins.
Flecha ajudeiros Desenvolvimento Beta.

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2272
Pontos Ativos : 5180

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