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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Magno.Peugeot em 25/10/10, 12:20 am

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


Última edição por Magno.Peugeot em 25/10/10, 09:02 pm, editado 1 vez(es)

Magno.Peugeot
Nível 8

Inscrito dia : 22/01/2008
Mensagens : 122
Pontos Ativos : 124

Ver perfil do usuário http://clubepeugeotbr.ativoforum.com

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

Mensagem por Callie em 25/10/10, 05:25 am

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.
avatar

Callie
Principal contribuidor
Principal contribuidor

Feminino
Inscrito dia : 20/12/2009
Mensagens : 5007
Pontos Ativos : 7285

Ver perfil do usuário

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

Mensagem por Solkis em 25/10/10, 08:17 am

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




- 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


- 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(http://i42.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(http://i42.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.



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




- 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

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.
avatar

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12074

Ver perfil do usuário http://ajuda.forumeiros.com

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

Mensagem por Magno.Peugeot em 25/10/10, 09:02 pm

Caros,

João, thks pela ajuda.

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

Alexandre Magno

Magno.Peugeot
Nível 8

Inscrito dia : 22/01/2008
Mensagens : 122
Pontos Ativos : 124

Ver perfil do usuário http://clubepeugeotbr.ativoforum.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum