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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Efeito no avatar em mensagens no tópico
Hoje à(s) 01:34 am por Dark Hunter

» Imagem do topico
Ontem à(s) 11:50 pm por Harleen

» #10422 Forumeiros desativa e reenvia a url para este site
Ontem à(s) 10:39 pm por Forumpw

» [PEDIDO] - Logo
Ontem à(s) 09:38 pm por Tiger

» Caixa de resposta rápida nos tópicos
Ontem à(s) 09:07 pm por Harleen

» Template quebra ao ser editado
Ontem à(s) 08:52 pm por Starset

» Ícones de redes sociais e feed
Ontem à(s) 08:14 pm por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Fatalisss
 
Harleen
 
JulioPais
 
APOllO
 
Shek
 
Holkis
 
MtX
 
Forumpw
 
Roger_Crazzy
 

Quem está conectado
230 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 225 Visitantes :: 1 Motor de busca

Appoloz, Daemon, Jefferson105, Luiz, Sapinho

[ Ver toda a lista ]


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

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 03/11/16, 07:12 pm

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
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek em 04/11/16, 08:10 am

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


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16484
Pontos Ativos : 20865

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 04/11/16, 12:09 pm

onde eu coloco o primeiro codigo?
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 04/11/16, 01:22 pm

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.

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 04/11/16, 02:28 pm

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 04/11/16, 02:38 pm, editado 1 vez(es)
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek em 04/11/16, 02:32 pm

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.


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16484
Pontos Ativos : 20865

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 04/11/16, 02:43 pm

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
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 07:26 pm

Alguem pode me ajudar?
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 06/11/16, 08:38 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 09:33 pm

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 06/11/16, 09:49 pm, editado 2 vez(es)
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 06/11/16, 09:38 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 09:50 pm

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.
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 06/11/16, 09:55 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 09:56 pm

Gostaria que do lado do menu tivesse esse icone :

avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 09:58 pm

@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.
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 06/11/16, 10:00 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 10:03 pm

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

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 06/11/16, 10:07 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 06/11/16, 10:10 pm

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.
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 07/11/16, 12:06 am

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.


^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Shek em 07/11/16, 10:25 am

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é.


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16484
Pontos Ativos : 20865

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 07/11/16, 10:29 am

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
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 07/11/16, 03:04 pm

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

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 07/11/16, 04:33 pm

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

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 07/11/16, 10:34 pm

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).
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 07/11/16, 10:55 pm

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

Deu para entender?rs

e como coloco meu texte agr?
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 07/11/16, 11:18 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 08/11/16, 11:44 am

o menu não quer abrir agora. :/
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 08/11/16, 02:55 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 08/11/16, 03:47 pm

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"?
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 08/11/16, 05:37 pm

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.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 08/11/16, 06:08 pm

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 />
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 08/11/16, 11:10 pm

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>

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 09/11/16, 11:22 am

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
avatar

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 09/11/16, 02:08 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 09/11/16, 02:25 pm

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

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 09/11/16, 02:39 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

http://ajuda.forumeiros.com

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Guilherme3f em 09/11/16, 03:12 pm

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

Guilherme3f
Nível 7

Masculino
Inscrito dia : 12/10/2016
Mensagens : 93
Pontos Ativos : 115

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

Resolvido Re: Barra de ferramentas no fim do forum

Mensagem por Kyo Panda em 09/11/16, 03:14 pm

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:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3698
Pontos Ativos : 4940

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