[Resolvido] [Resolvido] Logo, menu e coluna de widgets

por Magno.Peugeot 25.10.10 3:20

caros,

Vendo o seguinte fórum:
http://sitiomarado.forumeiros.com/

Fiquei com 2 dúvidas. Já fiz buscas e não consegui resolver nenhuma delas;

1) Como inverter o logo com o menu ?? Nesse fórum, o menu está acima do logo. Como se faz isso ????
2) A coluna da esquerda com os widgets, pode ser escondida, retrátil, apenas clicando no ícone >> ou <<. Como fazer isso ???

Meu fórum é INVISION,

[]´s

por Callie 25.10.10 8:25

Olá Magno.Peugeot,

1ª dúvida - Isso às vezes depende da versão do tema do fórum. Pode dizer-me qual é a do seu por favor?

2ª dúvida - Basta criar um widget personalizado, e colocar nele o seguinte código:

Código:: <br><br><div id="page-body"><div id="content-container"><div id="outer-wrapper"><div id="wrapper"><div id="container"><div id="content"><div id="left"><div id="forum-widget" style="height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute;background: #FFFFFF url(http://i39.tinypic.com/68esds.png) no-repeat 0 -13px;" onClick="if(my_getcookie('forum-widget')=='0') { jQuery('#content-container div#container').css('margin-right','-3px');jQuery('#content-container div#content').css('margin-right','3px');jQuery('#content-container div#left').animate({width: '180px',marginRight: '3px'}, 2000);jQuery('*+ html #content-container div#main').css('margin-left','183px');jQuery('#wrap').css('min-width','951px');jQuery('* html .conteneur_container_IE').css('margin-left','-1083px');jQuery('* html .conteneur_minwidth_IE').css('padding-left','1083px'); my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { jQuery('#content-container div#container').css('margin-right','0px');jQuery('#content-container div#content').css('margin-right','0px');jQuery('#content-container div#left').animate({width: '0px',marginRight: '0px'}, 2000);jQuery('*+ html #content-container div#main').css('margin-left','0px');jQuery('#wrap').css('min-width','768px');jQuery('* html .conteneur_container_IE').css('margin-left','-900px');jQuery('* html .conteneur_minwidth_IE').css('padding-left','900px'); my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div><div style="height:4px"></div><div class="module"><div class="inner"><span class="corners-top"><span></span></span> <script type="text/javascript"> if(my_getcookie('forum-widget')=='0') { jQuery('#content-container div#container').css('margin-right','0px');jQuery('#content-container div#content').css('margin-right','0px');jQuery('#content-container div#left').css('width','0px').css('margin-right','0px');jQuery('*+ html #content-container div#main').css('margin-left','0px');jQuery('#wrap').css('min-width','768px');jQuery('* html .conteneur_container_IE').css('margin-left','-900px');jQuery('* html .conteneur_minwidth_IE').css('padding-left','900px'); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

Coloque como título algo que lhe faça saber o que é aquele widget, depois coloque como "não" na opção "table type". Depois coloque o widget no topo da coluna.

Alguma dúvida por favor diga-nos.
Até mais.

por Solkis 25.10.10 11:17

Bom dia,

Irei começar pela segunda dúvida! Aqui fica para você, em primeira mão, um tutorial que somente irá sair aqui no FdF oficialmente nas próximas semanas, mas como está pronto acho que não tem problema em mostrar, será melhor do que eu explicar tudo novamente!

Ocultar os widgets do fórum:

Conteúdos aleatórios

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

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:

Para mais informações consulte a 2ª parte do tutorial:
Administração e instalação do portal / widgets

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:

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

Para a primeira dúvida, deverá adicionar o seguinte código CSS na Folha de estilos do seu fórum:

Código:: #submenu { top: 0; left: 5px; right: 5px; position: absolute; } #logostrip { margin-top: 25px; }

Até mais.

por Magno.Peugeot 26.10.10 0:02

Caros,

João, thks pela ajuda.

Solkis, 100% perfeito. Funciona que é uma beleza.
Desde já meus maiores agradecimentos e respeitos.
[]´s

Alexandre Magno

Hitskin.com

[Resolvido] [Resolvido] Logo, menu e coluna de widgets

[Resolvido] [Resolvido] Logo, menu e coluna de widgets

Re: [Resolvido] [Resolvido] Logo, menu e coluna de widgets

Re: [Resolvido] [Resolvido] Logo, menu e coluna de widgets

Re: [Resolvido] [Resolvido] Logo, menu e coluna de widgets