[FAQ] Barra de ferramentas
2 participantes
Página 1 de 1
[FAQ] Barra de ferramentas
![]() | 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
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
![[FAQ] Barra de ferramentas Imagm110](https://i.servimg.com/u/f58/15/88/72/83/imagm110.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() 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. |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | 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:
![[FAQ] Barra de ferramentas HtrMR1v](https://i.imgur.com/HtrMR1v.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
3º - Central de notificações
![[FAQ] Barra de ferramentas UuUSP3a](https://i.imgur.com/UuUSP3a.png)
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
![[FAQ] Barra de ferramentas Result10](https://i.servimg.com/u/f58/15/88/72/83/result10.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
- É 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?
© Fórum dos Fóruns, Ace & Shek
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Barra de Ferramentas |
[FAQ] Como utilizar o sistema de marcações
![]() | 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](https://i.imgur.com/fdGqgSe.jpg)
![[FAQ] Barra de ferramentas FdGqgSe](https://i.imgur.com/fdGqgSe.jpg)
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](https://i.imgur.com/2TQLjdh.jpg)
![[FAQ] Barra de ferramentas 2TQLjdh](https://i.imgur.com/2TQLjdh.jpg)
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](https://i.imgur.com/lLvl681.jpg)
![[FAQ] Barra de ferramentas LLvl681](https://i.imgur.com/lLvl681.jpg)
© Fórum dos Fóruns & @VitorC.
![]() | 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 |
[FAQ] Barra de ferramentas
![]() | 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
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 >>
![[FAQ] Barra de ferramentas Painel13](https://i.servimg.com/u/f48/15/88/72/83/painel13.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
- 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;
};
}
});
}
});
}());
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',
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:
- Código:
// TEMA DA CAIXA
document.write('<style type="text/css">#fa_quick_login{color:#FFF;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#333;border:1px solid #111;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/arrd10.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:#CCC}#fa_quick_login a.gensmall:hover{color:#FFF}#fa_quick_login input{color:#FFF;background:#111;border:1px solid #444;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#666}#fa_quick_login input:focus{border-color:#999;outline:0}#fa_quick_login input.mainoption{color:#999;border:1px solid #999;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:#333;background:#999}#fa_quick_login input.mainoption:focus{color:#333;background:#FFF;border-color:#FFF}#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:#FFF;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
Barra escura em fórum no idioma Inglês:
![[FAQ] Barra de ferramentas Dark11](https://i.servimg.com/u/f21/18/21/41/30/dark11.png)
![[FAQ] Barra de ferramentas Dark11](https://i.servimg.com/u/f21/18/21/41/30/dark11.png)
© Fórum dos Fóruns
![]() | 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 |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Remover barra de pesquisa da barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
» Barra de ferramentas
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos