[FAQ] Barra de ferramentas

por Cream 07.02.13 16:54

Barra de Ferramentas

Com esta nova funcionalidade em nossos fóruns, é possível agora, ter acesso fácil a menus rápidos e, até mesmo, a uma central de notificações que te informa, desde a solicitação de uma mensagem, até a criação de alertas para seu usuário!

--> Perguntas e respostas frequentes <--
Ativar / Desativar barra de ferramentas e centro de notificações

1º - Ativando a função:
Aceda à:
Painel de controle -> Módulos -> Barra de Ferramentas -> Configuração

Ativar barra de ferramentas - Como o próprio título sugere, marque a opção Sim caso queira ativar a barra de ferramentas.

Fixar barra de ferramentas - Com esta opção poderá definir se quando descer a barra de rolagem a barra de ferramentas também descerá. Por fim apenas carregue no botão Salvar para que quaisquer alterações sejam efetuadas.

Cor e Cor do texto - Na caixa Cor vamos determinar a cor de fundo da barra de notificações. Você pode definir uma cor ou imagem de fundo usando CSS.
Cor do texto vamos definir a cor para o texto da barra de ferramentas. Da mesma forma mostrada acima, teremos uma cor personalizada assim que a sessão for salva.

Modificar os direitos autorais - Esta opção só será ativada após a compra da opção que lhe permite modificar / remover os direitos autorais do Forumeiros. Tal função permite personalizar o texto do link e a URL do link de direitos autorais na barra de ferramentas.

Logo da barra de ferramentas - Assim como a função citada acima, esta só será habilitada pós adquirir créditos, pois, ela altera o ícone que é mostrado ao lado Esquerdo do link Forumeiros da Barra.

Modificar os direitos autoriais - Se houver créditos em seu fórum, automaticamente as mudanças no direito autorial da barra serão realizadas.

Para os membros que utilizam de versões punBB/phpBB 2 e que possuem o template overall_header personalizado, é de grande importância que a tag {HOSTING_JS} esteja entre duas outras tags: <head> e </head>, para mais informações sobre edição de templates, leia: Modificar templates do fórum.

2º - As principais funções da Barra de Ferramentas:

Forumeiros.com Link obrigatório e que não deve ser removido por qualquer meio. A exclusão do mesmo, leva a exclusão do seu fórum.

Caixa de busca: É a caixa de busca do seu fórum.

Redes Sociais: Com esses botões, os membros estão aptos a twettar, pegar o link para um RSS e outras interações em redes sociais para seu fórum!

Central de Notificações Notifica-o de qualquer novidade em tempo real sobre o fórum. Tudo é editável e personalizável de acordo com a preferência do usuário.

Fechar/Abrir Caso o usuário deseje, ele pode fechar a barra e a navegação ficar individual e mais personalizada.

3º - Central de notificações

Algumas vezes pode acontecer de recebermos muitas notificações, isso se dá pelas configurações estabelecidas no seu próprio perfil, para modifica-las aceda à:
Menu do fórum -> Perfil / Notificações

Tipos de notificações - Uma lista é informada ao usuário informando o nome de cada notificação que ele poderá receber se marcá-las.

Por E-mail - Todo usuário poderá definir que tipo de notificação quer receber via e-mail quando a função "Aceitar newsletter" estiver ativada no perfil do usuário, em Preferências do perfil.

Na barra de ferramentas - Quando marcado as opções, assim que houver alguma atualização referente ao campo que foi marcado, esta por sua vez, será exibida na Barra de Ferramentas do fórum.

É possível personalizar a barra de ferramentas?
Claro! o seletor a ser utilizado para modificações gerais referentes a essa barra é este: #fa_toolbar.fa_toolbar_XL_Sized, #fa_toolbar.fa_toolbar_L_Sized, para saber como elaborar um novo código css, veja o tópico: Elaborar um código CSS.
Existe algum outro meio de remover o link legalmente?
Não. Qualquer remoção, seja por CSS, JS ou qualquer outro método não é permitido e resultará na exclusão do fórum.
Existe um vídeo tutorial?

Melhor visualização no site do Youtube: https://youtu.be/BWtu8x9r4BA

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Barra de Ferramentas

por VitorC. 14.11.15 0:41

Barra de Ferramentas

Introdução

Com o novo sistema de marcações, você é notificado quando algum outro usuário cita o seu nickname em um tópico através do caractere especial @. Você recebe a notificação pela Barra de Ferramentas (se instalada em seu fórum).

--> Perguntas e respostas frequentes <--

Como utilizar o sistema de marcações

1º - Como marcar:

Para nicknames sem caracteres especiais e sem espaços, basta somente adicionar após o @. (Exemplo: @Shek);
Para nicknames que contenham caracteres especiais e/ou espaços, coloca-se entre aspas. (Exemplos: @"VitorC.", @"Eva Boss");
Para adicionar sinais gráficos após o nick, deve-se usar o mesmo sistema acima. (Exemplo: @"viniliff", moderador do Publicideiros).

2º - Notificação:
Ao ser marcado, você recebe instantaneamente* uma notificação na sua Barra de Ferramentas (se ela estiver instalada), que fica marcada por uma tag indicando a quantidade de notificações pendentes.
* - Caso o usuário esteja conectado.

(carregue na imagem para aumentar)
[FAQ] Barra de ferramentas FdGqgSe

Durante os primeiros 4 segundos após o tópico ser postado ou o recebimento de uma mensagem privada, a notificação é mostrada através de um popup que aparece logo abaixo da Barra de Ferramentas.

(carregue na imagem para aumentar)
[FAQ] Barra de ferramentas 2TQLjdh

Para ver as últimas notificações, basta clicar em 'Notificações', no lado direito da Barra.

(carregue na imagem para aumentar)
[FAQ] Barra de ferramentas LLvl681

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Como utilizar o sistema de marcações

por VitorC. 19.12.15 20:20

Barra de Ferramentas

Introdução

Com tantas utilidades, a barra de ferramentas veio para facilitar e agilizar o que conhecemos hoje como informações em tempo real. Neste pequeno tutorial, vamos introduzir um recurso fascinante que permite criar uma caixa de Login ao clicar em Login na barra de ferramentas.

--> Tutoriais, dicas e astúcias <--
Adicionar conexão rápida na Barra de Ferramentas

1º - Adição do código Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

O código a ser usado:

Código:: // LOGIN AO CLICAR NO BOTÃO LOGIN DA BARRA DE FERRAMENTAS (function() { var lang = { title : 'Por favor, entre com seu nome de usuário e senha', username : 'Nome de Usuário: ', password : 'Senha: ', automatic : 'Conectar-se automaticamente : ', login : 'Conectar-se', register : 'Inscrever-se', forgot : 'Esqueci minha senha', redirect : '/portal' // PÁGINA QUE SERÁ REDIRECIONADA APÓS O LOGIN }; // TEMA DA BARRA document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>'); $(function() { if (!_userdata.session_logged_in && _userdata.activate_toolbar) { var container = document.createElement('DIV'); container.id = 'fa_quick_login'; container.style.display = 'none'; container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>  |  <a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>'; document.body.appendChild(container); $(function() { var right = document.getElementById('fa_right'); if (right) { right.firstChild.onclick = function() { var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset; if (login) { if (/none/.test(login.style.display)) { login.style.display = ''; loffset = login.getBoundingClientRect(); login.style.top = offset.top + 30 + 'px'; login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px'; login.getElementsByTagName('FORM')[0].username.focus(); this.className += ' fa_login_actif'; } else { login.style.display = 'none'; this.className = this.className.replace(/fa_login_actif/, ''); } } return false; }; } }); } }); }());

Por gentileza, preste muita atenção no passo a seguir para saber como modificar a sua barra!

2º - As suas modificações:
Esse recurso também possibilita o administrador editar o idioma do conteúdo da caixa. Atente-se com os detalhes a serem modificados, para evitar bugs ou erros no fórum.

Código:: title : 'Por favor, entre com seu nome de usuário e senha', username : 'Nome de Usuário: ', password : 'Senha: ', automatic : 'Conectar-se automaticamente : ', login : 'Conectar-se', register : 'Inscrever-se', forgot : 'Esqueci minha senha',

De acordo com seu gosto e idioma, modifique o idioma da barra, tendo atenção no que encontra-se apenas dentro das aspas simples.

Se por ventura deseja modificar a URL para a página em que o membro será direcionado assim que efetuar o seu Login, basta modificar então:

Código:: redirect : '/portal' // PÁGINA QUE SERÁ REDIRECIONADA APÓS O LOGIN

Cor da barra: Você também pode mudar a cor da Caixa de Conexão alterando o CSS que encontra-se dentro do script. Para isso, apenas modifique:

Código:: document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url(http://i21.servimg.com/u/f21/18/21/41/30/arr10.gif);position:absolute;right:15px;top:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:300ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8B5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');

Como por exemplo, a cor Preta da Caixa para fóruns de cor Preto:

Caixa na cor Preta:

Barra escura em fórum no idioma Inglês:
[FAQ] Barra de ferramentas Dark11

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Adicionar conexão rápida na Barra de Ferramentas

Hitskin.com

[FAQ] Barra de ferramentas