Barra de ferramentas no fim do forum

por Guilherme3f 03.11.16 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:
Barra de ferramentas no fim do forum 245fwr5

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

por Shek 04.11.16 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

por Guilherme3f 04.11.16 14:09

onde eu coloco o primeiro codigo?

por Kyo Panda 04.11.16 15:22

Em Painel de Controle › Visualização › Templates › Geral, 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.

^-^

por Guilherme3f 04.11.16 16:28

COMO FICOU:
https://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?

por Shek 04.11.16 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.

por Guilherme3f 04.11.16 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

por Guilherme3f 06.11.16 21:26

Alguem pode me ajudar?

por Kyo Panda 06.11.16 22:38

Olá,

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

^-^

por Guilherme3f 06.11.16 23:33

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

Barra de ferramentas no fim do forum 2ql8knk

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

obrigado pela atenção.

por Kyo Panda 06.11.16 23:38

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

por Guilherme3f 06.11.16 23:50

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

https://imgur.com/a/nkL06

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

por Kyo Panda 06.11.16 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?

por Guilherme3f 06.11.16 23:56

Gostaria que do lado do menu tivesse esse icone :

Barra de ferramentas no fim do forum 6gd5cg

por Guilherme3f 06.11.16 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.

por Kyo Panda 07.11.16 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?

por Guilherme3f 07.11.16 0:03

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

por Kyo Panda 07.11.16 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. >-<"

por Guilherme3f 07.11.16 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.

por Kyo Panda 07.11.16 2:06

Vamos lá:

Troque o HTML do @Shek Crowley por esse:

Código:
 <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://2img.net/i/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>
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://2img.net/i/bl/logo.png" /></a>

É só trocar o conteúdo do href (/) para a URL do link e o src (https://2img.net/i/bl/logo.png) para a imagem desejada.

^-^

por Shek 07.11.16 12:25

Nossa Kyo, eu simplesmente amei isso! 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é.

por Guilherme3f 07.11.16 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

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

^-^

por Guilherme3f 07.11.16 18:33

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

por Kyo Panda 08.11.16 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).

por Guilherme3f 08.11.16 0:55

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

Deu para entender?rs

e como coloco meu texte agr?

por Kyo Panda 08.11.16 1:18

Para isso teremos que fazer algumas alterações.

Troque o HTML por esse:

Código::  <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://2img.net/i/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>

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

por Guilherme3f 08.11.16 13:44

o menu não quer abrir agora. :/

por Kyo Panda 08.11.16 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. ^-^

por Guilherme3f 08.11.16 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!

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

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

4- e teria como desbugar isso aqui?

https://imgur.com/a/oYmat

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

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

por Guilherme3f 08.11.16 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 />

por Kyo Panda 09.11.16 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>

^-^

por Guilherme3f 09.11.16 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á:

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

https://imgur.com/a/WCUTt

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

https://imgur.com/a/rI7vX

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

por Guilherme3f 09.11.16 16:25

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

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

por Guilherme3f 09.11.16 17:12

Muito obrigado Kyo panda,ficou como eu queria Feliz

Quero agradecer ao Shek Crowleypela atenção tbm.
Ficou perfeito!

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