Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 8 usuários online :: 0 registrados, 0 invisíveis e 8 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Ocultar os widgets do fórum
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
[TUTORIAL] Ocultar os widgets do fórum
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Ocultar os widgets do fórum |
Com este tutorial veremos como podemos ocultar os widgets da estrutura do fórum, para os usuários que usam o fórum em resoluções menores, naquelas em que os widgets laterais consomem muito espaço, prejudicando a visualização. Com este tutorial aprenderá a criar um botão para que o usuário possa escolher.
Atenção: o efeito não funciona para a versão phpBB 2!
--> Tutoriais e astúcias <--
Ocultar os widgets do fórum
Ocultar os widgets do fórum
1º - Criar dois widgets personalizados:
Para que o código funcione é necessário criar dois widgets, um que ficará no topo da coluna e outro que ficará na parte inferior.
Para criar o widget teremos de aceder a:
Painel de controle -> Módulos -> Portal & Widgets -> Widgets do fórum
E carregar em: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Para mais informações consulte a 2ª parte do tutorial: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
2º - Código de cada widget:
Agora teremos que ter cuidado, pois se queremos colocá-lo na coluna direita é um código e se queremos colocar na coluna esquerda é outro. Vejamos como deve ficar o código dos dois widgets para cada um dos casos a seguir:
- Códigos para o widget na coluna da esquerda
Widget número 1<div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(https://2img.net/h/oi42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget-ENDERECO_DO_FORUM')=='0') { my_setcookie('forum-widget-ENDERECO_DO_FORUM','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget-ENDERECO_DO_FORUM','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>
Widget número 2<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget-ENDERECO_DO_FORUM')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>
- Códigos para o widget na coluna da direita
Widget número 1<div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(https://2img.net/h/oi42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget-ENDERECO_DO_FORUM')=='0') { my_setcookie('forum-widget-ENDERECO_DO_FORUM','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget-ENDERECO_DO_FORUM','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>
Widget número 2<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget-ENDERECO_DO_FORUM')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>
Vermelho -> Cor do fundo do botão de contrair/expandir os widgets.
Verde -> Este nome deve ser único para que mais que um fórum não sejam afetados pelo mesmo sistema (por exemplo, se contrair o widget para este fórum tabém contrairá para outro), coloque algo do tipo forum-widget-ajudaforumeiroscom, evitando usar pontos, http... e coisas do gênero.
3º - Adicionar os novos widgets na estrutura:
Agora é necessário adicionar os widgets na estrutura do fórum. No ponto anterior chamamos os widgets de Widget número 1 e Widget número 2, mantenhamos este nome para sabermos o que deve ser feito. Deverá colocá-los na estrutura de forma que o 1 seja o primeiro da coluna e o 2 seja o último. Deverá ficar desta forma:
4º - Resultado final na forma de imagem:
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Ocultar os widgets do fórum |
Tópicos semelhantes
» [TUTORIAL] Slides em widgets
» [TUTORIAL] Colocar fundo em widgets
» [TUTORIAL] Multiplicar os widgets de novidades
» [TUTORIAL] Multiplicar os widgets de votação
» [TUTORIAL] Multiplicar o widgets de últimos assuntos
» [TUTORIAL] Colocar fundo em widgets
» [TUTORIAL] Multiplicar os widgets de novidades
» [TUTORIAL] Multiplicar os widgets de votação
» [TUTORIAL] Multiplicar o widgets de últimos assuntos
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry