Widget personalizado

2 participantes

Ir para baixo

Tópico resolvido Widget personalizado

Mensagem por BrunoLemos 04.12.17 17:30

Detalhes da questão


Endereço do fórum: http://aquariumbrasil.forumeiro.com
Versão do fórum: phpBB3

Descrição


Criei um Widget com esse codigo abaixo porém o mesmo deu erro na hora de logar e cadastrar, como faço para que ele funcione sem dar esse problema novamente?

Código:
 <style>
button.accordion {
    background-color: #D9EFFF;
    color: #d9efff;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ADDEDE;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: #D9EFFF;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
<h2>
</h2>
<p>
</p>
<button class="accordion">
    <strong><a href="http://aquariumbrasil.forumeiro.com/">Inicio</a></strong>
</button>
<button class="accordion">
    <strong><a href="http://aquariumbrasil.forumeiro.com/c5-category">Administração</a></strong>
</button>
 
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c3-category"><strong>Aquapaisagismo e Projetos</strong></a>
</button>
 
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Aquarismo Doce</strong></a>
</button>
<div class="panel">
      
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Peixes de Água Doce</strong></a>
   </button>
      
   <div class="panel">
      
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c13-caracideos-tetras-neons-e-mais"><strong>Caricídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c8-ciclideos"><strong>Ciclídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c10-guppies-e-poeciliideos"><strong>Lebistes</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c11-killifishes-cyprinodontiformes"><strong>Killifishes</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c16-betta-e-anabantideos"><strong>Betta</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c17-peixe-arco-iris"><strong>Arco-íris</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c18-cobitideos-botias-e-dojos"><strong>Cobtídeos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c19-peixes-gato-cascudos-peixes-de-fundo"><strong>Cascudos</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c20-ciprinideos-kinguios-carpas-e-lagos"><strong>Kinguios</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c14-invertebrados"><strong>Invertebrados</strong></a>
      </button>
         
      <button class="accordion">
          <a href="http://aquariumbrasil.forumeiro.com/c9-outras-especies"><strong>Outros</strong></a>
      </button>
      
   </div>
      
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c21-album-de-fotos"><strong>Álbum de Fotos</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c22-alimentos-vivos-e-receitas"><strong>Alimentos</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c23-aquarismo-doce"><strong>Aquarismo Geral</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c26-faca-voce-mesmo"><strong>Faça você Mesmo</strong></a>
   </button>
    
   <button class="accordion">
       <a href="http://aquariumbrasil.forumeiro.com/c27-lojas-e-links"><strong>Lojas e Links</strong></a>
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
    
   <button class="accordion">
      
   </button>
</div>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c15-aquarismo-marinho"><strong>Aquarismo Marinho</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c1-submissoes-ao-forum"><strong>Submissões ao fórum</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c12-parceiros"><strong>Parceiros</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c7-vendas-e-anuncios"><strong>Vendas e Anúncios</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c33-revista-aquarium-brasil"><strong>Revista Aquarium Brasil</strong></a>
</button>
<button class="accordion">
    <a href="http://aquariumbrasil.forumeiro.com/c32-lixeira"><strong>Lixeira</strong></a>
</button>
 <script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
</script>


Última edição por BrunoLemos em 06.12.17 17:48, editado 1 vez(es)
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 04.12.17 17:55

Olá,

Não vejo o Widget que se referi ativo. O senhor poderia ativa-lo para que eu possa verificar o que esta ocorrendo.

Até mais!
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 04.12.17 18:00

Acabei de ativar o mesmo, caso vc não esteja logada não irá conseguir visualizar a área de loguin ou cadastro.


Edit: Deixei o widget desabilitado para que os usuários tenham acesso ao fórum.
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 16:17

@Ketholy

Boa tarde, se você ou qualquer outro puder me dar um suporte estou online, o que realmente quero é um menu no estilo sanfona vertical (accordion) se for possível por favor me ensinem a melhor forma pois o que fiz bugou meu fórum na pagina de loguin.

Nota: quero esse menu para colocar junto aos Widgets do forum
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 16:25

BrunoLemos escreveu:@Ketholy

Boa tarde, se você ou qualquer outro puder me dar um suporte estou online, o que realmente quero é um menu no estilo sanfona vertical (accordion) se for possível por favor me ensinem a melhor forma pois o que fiz bugou meu fórum na pagina de loguin.

Nota: quero esse menu para colocar junto aos Widgets do forum

Boa tarde BrunoLemos,

Peço que o senhor tenha um pouco de paciência, o código repassado contém algumas falhas, precisarei editar e testa-lo para que ele funcione corretamente e o seu problema seja sanado. Porém irei precisar de algumas informações: Esse código foi o senhor que elaborou? Caso não de onde o retirou?.

Aguardo as informações, até mais.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 16:27

@Ketholy

Grato pelo seu retorno

O codigo eu que editei porem a base tirei deste site: https://www.w3schools.com/howto/howto_js_accordion.asp
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 17:33

BrunoLemos escreveu:@Ketholy

Grato pelo seu retorno

O codigo eu que editei porem a base tirei deste site: https://www.w3schools.com/howto/howto_js_accordion.asp

Troque o código por esse:

Código:
<style>
button.accordion {
  background-color: #D9EFFF;
  color: #d9efff;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
  background-color: #ADDEDE;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  background-color: #D9EFFF;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<h2>
</h2>
<p>
</p>
 
<button class="accordion">
     <strong><a href="http://aquariumbrasil.forumeiro.com/">Inicio</a></strong>
</button>
 
<button class="accordion">
     <strong><a href="http://aquariumbrasil.forumeiro.com/c5-category">Administração</a></strong>
</button>
 
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c3-category"><strong>Aquapaisagismo e Projetos</strong></a>
</button>
 
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Aquarismo Doce</strong></a>
</button>
<div class="panel">
          
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c4-category"><strong>Peixes de Água Doce</strong></a> 
   </button>
          
   <div class="panel">
                 
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c13-caracideos-tetras-neons-e-mais"><strong>Caricídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c8-ciclideos"><strong>Ciclídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c10-guppies-e-poeciliideos"><strong>Lebistes</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c11-killifishes-cyprinodontiformes"><strong>Killifishes</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c16-betta-e-anabantideos"><strong>Betta</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c17-peixe-arco-iris"><strong>Arco-íris</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c18-cobitideos-botias-e-dojos"><strong>Cobtídeos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c19-peixes-gato-cascudos-peixes-de-fundo"><strong>Cascudos</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c20-ciprinideos-kinguios-carpas-e-lagos"><strong>Kinguios</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c14-invertebrados"><strong>Invertebrados</strong></a>     
      </button>
                   
      <button class="accordion">
                 <a href="http://aquariumbrasil.forumeiro.com/c9-outras-especies"><strong>Outros</strong></a>     
      </button>
             
   </div>
          
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c21-album-de-fotos"><strong>Álbum de Fotos</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c22-alimentos-vivos-e-receitas"><strong>Alimentos</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c23-aquarismo-doce"><strong>Aquarismo Geral</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c26-faca-voce-mesmo"><strong>Faça você Mesmo</strong></a> 
   </button>
        
   <button class="accordion">
            <a href="http://aquariumbrasil.forumeiro.com/c27-lojas-e-links"><strong>Lojas e Links</strong></a> 
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
        
   <button class="accordion">
             
   </button>
</div>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c15-aquarismo-marinho"><strong>Aquarismo Marinho</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c1-submissoes-ao-forum"><strong>Submissões ao fórum</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c12-parceiros"><strong>Parceiros</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c7-vendas-e-anuncios"><strong>Vendas e Anúncios</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c33-revista-aquarium-brasil"><strong>Revista Aquarium Brasil</strong></a>
</button>
<button class="accordion">
     <a href="http://aquariumbrasil.forumeiro.com/c32-lixeira"><strong>Lixeira</strong></a>
</button><script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function() {
  this.classList.toggle("active");
  var panel = this.nextElementSibling;
  if (panel.style.maxHeight){
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
 }
}
</script>

Creio que agora vá funcionar, testei e todos os links estão ativos e com o redirecionamento funcional.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 17:38

Infelizmente o problema permanece o mesmo tem algo que possamos fazer, para melhorar este código simplesmente algum tutorial que me ensine a fazer este tipo de menu funcionar?

Edit: O Widget também faz com que a pagina de postagem não funcione
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 17:43

BrunoLemos escreveu:Infelizmente o problema permanece o mesmo tem algo que possamos fazer, para melhorar este código simplesmente algum tutorial que me ensine a fazer este tipo de menu funcionar?

Edit: O Widget também faz com que a pagina de postagem não funcione

Estranho, ele está completamente funcional no meu fórum de teste, queira checar: http://jogosrpg-com-br.forumeiros.com/forum. O senhor se referia aos links que não estava funcionando ou eu entendi errado seria a aparência que queria mudar?
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 18:06

Widget personalizado Sem_ty11

Acessei seu forum de testes e não consigo visualizar a área de loguin também uso o Chrome Atualizado, o widget funciona porem ele buga outras áreas do meu fórum.


Basicamente o que eu quero fazer é isso aqui ó:
Widget personalizado Fdf_fw10
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 18:15

Primeiramente seria contra as regras copiar alguma funcionalidade do FDF, em segundo tenho algo parecido com o que deseja, mais o senhor que terá que edita-lo a seu gosto.

Código:
Código:
 <script src="http://illiweb.com/fa/js_16/collapsible_faq.js" type="text/javascript"></script>
    <script>
    jQuery(document).ready(function() {
      jQuery('.toggleable').css('display', 'none');
     
      jQuery('#forunslist').click( function() {
          jQuery('#toggle1').animate({
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);

          jQuery('#toggle2').animate({
            width: '0px',
            height: '0px',
            opacity: '0%',
            display: 'block',
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);
      });
     
      jQuery('#forunslist2').click( function() {
          jQuery('#toggle2').animate({
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);

          jQuery('#toggle1').animate({
            width: '0px',
            height: '0px',
            opacity: '0%',
            display: 'block',
            width: 'toggle',
            height: 'toggle',
            opacity: 'toggle'
          }, 4000);
      });
    });
    </script><div id="toggle1">

    <dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onclick="return CFAQ.display('l1', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l1', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/questions.png" style="width: 15px;height: 15px" border="0"> Forumeiros e você</div></dd><dd style="display:none;" id="l1"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Regulamento-e-staff-f4/">Regulamento e staff</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/Anuncios-e-atualizacoes-f1/">Anúncios e atualizações</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t23.htm">Perguntas e respostas...</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-t6745.htm">Tutoriais e astúcias</a></span></dd><dd onclick="return CFAQ.display('l2', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l2', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/admin.png" style="width: 15px;height: 15px" border="0"> Ajuda e suporte</div></dd><dd style="display:none;" id="l2"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-de-conexao-f6/">Problemas de conexão</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-um-script-f7/">Questões sobre códigos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-com-o-painel-de-controle-f8/">Questões sobre Painel C...</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../administrar-a-aparencia-do-seu-forum-f9/">Questões sobre a aparência</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../problemas-diversos-f10/">Questões diversas</a></span></dd><dd onclick="return CFAQ.display('l3', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l3', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/magic.png" style="width: 15px;height: 15px" border="0"> Serviços para usuários</div></dd><dd style="display:none;" id="l3"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/criacoes-graficas-f71/">Criações Gráficas</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="/-h2.htm">Galeria de trabalhos gráficos</a></span>  <span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../hitskincom-tire-suas-duvidas-f24/">Hitskin.com</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/-c9/">Espaço publicidade</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/forum-de-analises-f50/">Fórum de análises</a></span></dd><dd onclick="return CFAQ.display('l4', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l4', true);" onfocus="this.blur();"><img src="http://2img.net/i/fa/fdf/fenetres.png" style="width: 15px;height: 15px" border="0"> Miscelânea</div></dd><dd style="display:none;" id="l4"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://ajuda.forumeiros.com/sugestoes-e-melhoras-f48/">Sugestões / Melhoras</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../discussoes-gerais-f12/">Discussões gerais</a></span></dd><dd onclick="return CFAQ.display('l5', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l5', true);" onfocus="this.blur();"><img src="http://i47.tinypic.com/1115fmg.png" style="width: 15px;height: 15px" border="0"> Forumeiros</div></dd><dd style="display:none;" id="l5"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/" target="_blank">Criar Fórum grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/criar-forum/condicoes-gerais.htm" target="_blank">Condições Gerais</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/ferramentas/" target="_blank">Ferramentas de usuário</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.forumeiros.com/pt/litigation/" target="_blank">Litígio</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.directorioforuns.com/" target="_blank">Diretório dos fóruns</a></span></dd><dd onclick="return CFAQ.display('l6', false);"><div style="cursor: pointer;" onclick="return CFAQ.display('l6', true);" onfocus="this.blur();"><img src="http://www.criarumblog.com/rsc/img/logo_blog.png" style="width: 15px;height: 15px" border="0"> Outros serviços</div></dd><dd style="display:none;" id="l6"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://pt.hitskin.com/" target="_blank">HitSkin</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.criarumblog.com/" target="_blank">Criar Blog grátis</a></span><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="http://www.servimg.com/" target="_blank">Servimg</a></span></dd></dl><div style="font-size:110%; margin-top: 8px;"><a href="http://www.orkut.com/Main#Community.aspx?cmm=81505901" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Orkut</a><br><a href="http://www.facebook.com/s.php?q=portugueses&amp;init=q#/pages/Forumeiros/49653389908" target="_blank"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">  Forumeiros no Facebook</a></div><div style="font-size:110%; margin-top: 8px;"><a href="javascript:if%20(%20navigator.appName%20!=%20'Microsoft%20Internet%20Explorer'%20){window.sidebar.addPanel('F%C3%B3rum%20dos%20F%C3%B3runs','http://ajuda.forumeiros.com','');}else{%20window.external.AddFavorite('http://www.forumeiros.com','F%C3%B3rum%20dos%20F%C3%B3runs');}" target="_blank"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Adicionar aos favoritos</a>

    <br><a href="javascript:" id="forunslist"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Lista dos fóruns de suporte oficiais</a>

    <br><a href="javascript:" onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Definir página inicial...</a><div onclick="(document.getElementById('hp').style.display == 'none') ? document.getElementById('hp').style.display = 'block' : document.getElementById('hp').style.display = 'none';" id="hp" style="display: none; padding: 5px; margin: 6px; border: 1px dashed #FFF; cursor: pointer;"><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://forumeiros.com');" alt="Definir o Forumeiros como página inicial" title="Definir o Forumeiros como página inicial">Forumeiros</a><br><a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://ajuda.forumeiros.com');" alt="Definir o FDF como página inicial" title="Definir o FDF como página inicial">Fórum dos fóruns</a></div></div><div align="center" style="margin-top: 6px;"><a href="http://www.forumeiros.com/" target="_blank"><img src="http://i86.servimg.com/u/f86/11/66/91/15/creer_10.png"></a></div>

    </div><div id="toggle2" class="toggleable" style="font-size: 120%; display: none; ">

    <img src="http://i62.servimg.com/u/f62/11/22/70/40/750px-10.png"> <a href="http://help.ahlamontada.com/">Árabe</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_f12.png"> <a href="http://forum.forumactif.com">Francês</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_e10.png"> <a href="http://help.forumotion.com">Inglês</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c14.png"> <a href="http://cz.forumotion.com">Tcheco</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_g10.png"> <a href="http://hilfe.forumieren.com">Alemão</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_s18.png"> <a href="http://asistencia.foroactivo.com">Espanhol</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_i16.png"> <a href="http://aiuto.forumattivo.com">Italiano</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r11.png"> <a href="http://help.forum2x2.ru">Russo</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_p13.png"> <a href="http://ajuda.forumeiros.com">Português</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_r10.png"> <a href="http://help.forumgratuit.ro">Romeno</a><br>
    <img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_c12.png"> <a href="http://help.longluntan.cn">Chinês</a><br>
    <img src="http://i62.servimg.com/u/f62/11/22/70/40/turkey10.png"> <a href="http://destek.yetkin-forum.com">Turco</a>

    <br><br><a href="javascript:" id="forunslist2"><img src="http://im0.all-up.com/i/img/puce_fleche.png">  Fechar</a>

    </div>

Recomendo que leia esse tutorial: https://ajuda.forumeiros.com/t16592-tutorial-inserir-widget-cliques-rapidos

Até mais!
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 18:31

Bem Ketholy é mais ou menos isso que seu código faz porém eu queria com um design mais moderno.
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 18:37

BrunoLemos escreveu:Bem Ketholy é mais ou menos isso que seu código faz porém eu queria com um design mais moderno.

A personalização o senhor mesmo pode optar por fazer, assim o senhor saberá como deixa-la a seu gosto. O mais difícil lhe repassei, tanto o código como o tutorial dá pra personalizar a seu gosto.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 18:40

Tentei mudar apenas o primeiro icone e o menu perdeu o "efeito sanfona":

Veja a imagem:Widget personalizado Fdf_fw11

eu só mudei a imagem mais nada...
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 05.12.17 18:47

BrunoLemos escreveu:Tentei mudar apenas o primeiro icone e o menu perdeu o "efeito sanfona":

Veja a imagem:Widget personalizado Fdf_fw11

eu só mudei a imagem mais nada...

Retire a alteração realizar por você e me informe uma personalização básica que queira aplicar, como por exemplo: Cor, espessura, etc.

Obs: Deixe o mesmo ativado em seu fórum, irei realizar as alterações por lá mesmo.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por BrunoLemos 05.12.17 18:58

No caso eu só queria meus links mesmo fiz um outro teste lá no forum logo abaixo do seu codigo mais ou menos como eu gostaria que ficasse um design mais moderno.


Edit: Ketholy obrigado pela disponibilidade porém sanei minha questão com o procedimento abaixo:

Inserir na aba CSS:

Código:
/* Menu Vertical Sanfona
----------------------------------------------- */
.verticalsanfona ul {
margin: 0;
padding: 0;
list-style:none;
width: auto;
}
.verticalsanfona ul li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: auto;
background-color:#f0f0f0;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.verticalsanfona ul li h3 {
display:block;
margin: 0;
padding:10px;
padding-left:20px;
height:19px;
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:capitalize;
color: #000;
background: #cccccc url(ENDEREÇO-DA-SUA-IMAGEM) repeat;
text-align: left;
font-size:16px;
}
.verticalsanfona ul li h3 a{
color: #000;
}

.verticalsanfona ul li h3 a:hover{
color: #fff;
}

.verticalsanfona ul li div {
margin:0;
overflow: auto;
padding:10px;
padding-left:20px;
height:220px;
}

.verticalsanfona ul li:hover {
height: 280px;
}

.verticalsanfona:hover ul li:hover h3 {
color:#fff;
background: #000000 url(ENDEREÇO-DA-SUA-IMAGEM) repeat;;
}

.verticalsanfona ul li h3:hover {
cursor:pointer;
}


Inserir HTML no conteúdo do novo Widget:
Código:
<div class="verticalsanfona">
<ul>
<li>
<h3>Título 1</h3>
<div>Coloque aqui o conteúdo para o Titulo 1.</div></li>
<li><h3>Titulo 2</h3>
<div>Coloque aqui o conteúdo para o Titulo 2</div></li>
<li><h3>Titulo 3</h3>
<div>Coloque aqui o conteúdo para o Titulo 3.</div></li>
<li><h3>Titulo 4</h3>
<div>Coloque aqui o conteúdo para o Titulo 4</div></li>
</ul>
</div>

Agora é só acrescentar seus títulos e conteúdo ao seu menu e pronto!

Deixo aqui para alguém que queira o mesmo efeito que eu!

Resultado:

Widget personalizado Menu-sanfona-com-css3
BrunoLemos
BrunoLemos
***

Membro desde : 06/10/2016
Mensagens : 156
Pontos : 208

http://aquariumbrasil.forumeiro.com https://www.facebook.com/admbrunolemos

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget personalizado

Mensagem por Ketholy 06.12.17 19:28

Disponha! Piscada

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos