Colocar abas em widget

Olá!

Eu estou a usar um widget de "Acesso Rápido" no fórum, só que queria fazer uma alteração, queria colocar os títulos todos como aba ou seja "Suporte Design, Espaço Gráfico, Serviços a Usuários, Miscelânea" mantendo os ícones, retirar o "---" sublinhado e colocar como aba ao clicar nos títulos, ou seja deixar como o Acesso Rápido aqui na FdF.

Fórum: http://suportedesign.forumeiros.com/

Código:

Código:

    <style type="text/css">
    .lista {
        background-color: transparent;
        margin-left: -5px;
        padding: 5px;
        width: 165px;
    }
    .lista .h3 {
        border-bottom: 1px solid #454545;
        font: 17px Pacifico;
        margin-bottom: -15px;
    }
    </style>    
<p style="color: #c00; font-family: Arial;  font-size: 1.1em;  font-style: italic; text-align: justify; url('http://i45.servimg.com/u/f45/12/05/75/97/63083010.png') no-repeat scroll 234px -4px #F2F2F2;" class="msgboasvindas">
</p>
<table class="acaboudechegar">
                                                                       
   <tbody>
      <tr>
                                                                             
         <td class="lista">
                                                                                        
            <div class="h3">
                                                        <img src="http://i19.servimg.com/u/f19/18/07/03/67/sd10.png" style="width: 20px; height: 20px;" /> Suporte Design                                      
            </div><br /><a href="/f2-">Regulamento & Staff</a><br /><a href="/f4-">Anúncios e Atualizações</a><br /><a href="/f5-">Tire as suas Dúvidas</a> <br /><a href="/f7-">FAQ's</a><br />                                  
         </td>
                                                                           
      </tr>
                                                                      
      <tr>
                                                                             
         <td class="lista">
                                                                                        
            <div class="h3">
                                                        <img src="http://i19.servimg.com/u/f19/18/07/03/67/des10.png" style="width: 16px; height: 16px;" /> Espaço Gráfico                                      
            </div><br /><a href="/f26-">Criações Gráficas</a><br /><a href="/f44-">Tutoriais de Design</a><br /><a href="/f46-">Dúvidas sobre Design</a><br /><a href="/f35-">Galeria<br /> </a><a href="/f43-">Gifts</a><br /><a href="/f55-">Eventos COTW<br />  </a>      
         </td>
                                                                           
      </tr>
                                                                    
      <tr>
                                                                             
         <td class="lista">
                                                                                        
            <div class="h3">
                                                        <img src="http://i19.servimg.com/u/f19/18/07/03/67/serv10.png" style="width: 16px; height: 16px;" /> Serviços a Usuários                                    
            </div><br /><a href="/f12-">Questões sobre Códigos</a><br /><a href="/f48-">Tutoriais de Forumeiros</a><br /> <a href="/f49-">Espaço de Publicidade</a> <a href="/f50-">Análise de Fóruns</a> <br /><a href="/f59-">Temas para Fóruns</a><br />                                    
         </td>
                                                                           
      </tr>
                                                              
      <tr>
                                                                             
         <td class="lista">
                                                                                        
            <div class="h3">
                                                        <img src="http://i19.servimg.com/u/f19/18/07/03/67/misc10.png" style="width: 16px; height: 16px;" /> Miscelânea                                    
            </div><br /><a href="/f24-">Discussões Gerais</a><br /><a href="/f37-">Sugestões de Melhorias</a><br />                              
         </td>
                                                                           
      </tr>
                                                                                                    
   </tbody>
</table>

Olá amigo!

Aqui tem:

Código:

<script>function _CFAQ(){this.lastOpened='';return this}_CFAQ.prototype.IsDisplaySupported=function(){if(window.opera&&!document.childNodes)return false;if(document.getElementById||document.all)return true;return false};_CFAQ.prototype.getQueryVar=function(varName){var q=window.location.search.substring(1);var v=q.split('&');for(var i=0;i<v.length;i++){var p=v[i].split('=');if(p[0]==varName)return p[1]}return null};_CFAQ.prototype.getObj=function(obj){return(document.getElementById?document.getElementById(obj):(document.all?document.all[obj]:null))};_CFAQ.prototype.displayObj=function(obj,status){var x=this.getObj(obj);if(x&&x.style)x.style.display=status};_CFAQ.prototype.display=function(faq_id,isLink){if(this.IsDisplaySupported()){if(!isLink){if(this.lastOpened!=''){this.displayObj(this.lastOpened,'none')}if(this.lastOpened!=faq_id){this.displayObj(faq_id,'');this.lastOpened=faq_id}else{this.lastOpened=''}}return false}return true};var CFAQ=new _CFAQ();if(!CFAQ.IsDisplaySupported()){var u_faq=window.location.href;u_faq+=(u_faq.indexOf('?')>0?'&':'?')+'dhtml=no';window.location.replace(u_faq)}</script>
<dl class="faq">

      <dd onclick="return CFAQ.display('faq_a_3', false);"><div class="acesso_rapido" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_3', true);" onfocus="this.blur();">Suporte Design</div></dd><dd style="display: none;" id="faq_a_3">
        <span><a href="/f2-"> Regulamento e Staff</a> </span>
        <br>
        <span><a href="/f4-"> Anúncios e atualizações</a> </span>
        <br>
        <span><a href="/f5-"> Tire as suas Dúvidas</a> </span>
        <br>
        <span><a href="/f7-"> FAQ </a> </span>
        <br>
        </dd>

        <dd onclick="return CFAQ.display('faq_a_4', false);"><div class="acesso_rapido" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_4', true);" onfocus="this.blur();">Espaço gráfico</div></dd><dd style="display: none;" id="faq_a_4">
        <span><a href="/f26-"> Criações Gráficas</a> </span>
      <br>
      <span><a href="/f44-"> Tutoriais de Design</a> </span>
      <br>
      <span><a href="/f46-"> Dúvidas sobre Design</a> </span>
      <br>
        <span><a href="/f35-"> Galeria</a> </span>
        <br>
        <span><a href="/f43-"> Gifts</a> </span>
        <br>
        <span><a href="/f55-"> Eventos COTW</a> </span>
        <br>
        </dd>

        <dd onclick="return CFAQ.display('faq_a_5', false);"><div class="acesso_rapido" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_5', true);" onfocus="this.blur();"> Serviços a Usuários </div></dd><dd style="display: none;" id="faq_a_5">

        <span><a href="/f48-"> Tutoriais de Forumeiros</a> </span>
        <br>
        <span><a href="/f49-"> Espaço de Publicidade</a> </span>
        <br>
        <span><a href="/f50-"> Análise de Fóruns</a> </span>
        <br>
        <span><a href="/f59-"> Temas para Fóruns</a> </span>
        <br>
        </dd>

        <dd onclick="return CFAQ.display('faq_a_6', false);"><div class="acesso_rapido" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_6', true);" onfocus="this.blur();"> Miscelânea</div></dd><dd style="display: none;" id="faq_a_6">

        <span><a href="/f24-"> Discussões Gerais</a> </span>
        <br>
      <span><a href="/f37-"> Sugestões de Melhorias</a> </span>
        </dd>
        </dl>

Abraços.

Olá!

Amigo o efeito que quero é esse, mas a estrutura e o aspecto não, queria manter o mesmo que tenho, mas apenas colocar os links em abas, percebeu?

Olá!

Entendi perfeitamente!

Troque por este:

Código:

<script>function _CFAQ(){this.lastOpened='';return this}_CFAQ.prototype.IsDisplaySupported=function(){if(window.opera&&!document.childNodes)return false;if(document.getElementById||document.all)return true;return false};_CFAQ.prototype.getQueryVar=function(varName){var q=window.location.search.substring(1);var v=q.split('&');for(var i=0;i<v.length;i++){var p=v[i].split('=');if(p[0]==varName)return p[1]}return null};_CFAQ.prototype.getObj=function(obj){return(document.getElementById?document.getElementById(obj):(document.all?document.all[obj]:null))};_CFAQ.prototype.displayObj=function(obj,status){var x=this.getObj(obj);if(x&&x.style)x.style.display=status};_CFAQ.prototype.display=function(faq_id,isLink){if(this.IsDisplaySupported()){if(!isLink){if(this.lastOpened!=''){this.displayObj(this.lastOpened,'none')}if(this.lastOpened!=faq_id){this.displayObj(faq_id,'');this.lastOpened=faq_id}else{this.lastOpened=''}}return false}return true};var CFAQ=new _CFAQ();if(!CFAQ.IsDisplaySupported()){var u_faq=window.location.href;u_faq+=(u_faq.indexOf('?')>0?'&':'?')+'dhtml=no';window.location.replace(u_faq)}</script>
<style>
        .lista {
            background-color: transparent;
            margin-left: -5px;
            padding: 5px;
            width: 165px;
        }
        .lista .h3 {
            border-bottom: 1px solid #454545;
            font: 17px Pacifico;
            margin-bottom: -5px;
        }
        </style>
<dl class="suportedesign">

      <dd class="lista" onclick="return CFAQ.display('faq_a_3', false);"><div class="acesso_rapido h3" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_3', true);" onfocus="this.blur();">Suporte Design</div></dd><dd style="display: none;" id="faq_a_3">
        <span><a href="/f2-"> Regulamento e Staff</a> </span>
        <br>
        <span><a href="/f4-"> Anúncios e atualizações</a> </span>
        <br>
        <span><a href="/f5-"> Tire as suas Dúvidas</a> </span>
        <br>
        <span><a href="/f7-"> FAQ </a> </span>
        <br>
        </dd>

        <dd class="lista" onclick="return CFAQ.display('faq_a_4', false);"><div class="acesso_rapido h3" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_4', true);" onfocus="this.blur();">Espaço gráfico</div></dd><dd style="display: none;" id="faq_a_4">
        <span><a href="/f26-"> Criações Gráficas</a> </span>
      <br>
      <span><a href="/f44-"> Tutoriais de Design</a> </span>
      <br>
      <span><a href="/f46-"> Dúvidas sobre Design</a> </span>
      <br>
        <span><a href="/f35-"> Galeria</a> </span>
        <br>
        <span><a href="/f43-"> Gifts</a> </span>
        <br>
        <span><a href="/f55-"> Eventos COTW</a> </span>
        <br>
        </dd>

        <dd class="lista" onclick="return CFAQ.display('faq_a_5', false);"><div class="acesso_rapido h3" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_5', true);" onfocus="this.blur();"> Serviços a Usuários </div></dd><dd style="display: none;" id="faq_a_5">

        <span><a href="/f48-"> Tutoriais de Forumeiros</a> </span>
        <br>
        <span><a href="/f49-"> Espaço de Publicidade</a> </span>
        <br>
        <span><a href="/f50-"> Análise de Fóruns</a> </span>
        <br>
        <span><a href="/f59-"> Temas para Fóruns</a> </span>
        <br>
        </dd>

        <dd class="lista" onclick="return CFAQ.display('faq_a_6', false);"><div class="acesso_rapido h3" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_6', true);" onfocus="this.blur();"> Miscelânea</div></dd><dd style="display: none;" id="faq_a_6">

        <span><a href="/f24-"> Discussões Gerais</a> </span>
        <br>
      <span><a href="/f37-"> Sugestões de Melhorias</a> </span>
        </dd>
        </dl>

Abraços.

Olá!

Tive que retirar o efeito pois estava meio estranho, mas é isso que desejo mas queria manter os ícones que estava e retirar os traços que dividem cada um, e deixar um espaço entre eles, ou seja deixar agradável amigo. O seu código deixou assim:

Olá.

Você já tem um CSS com a class .lista por isso o efeito fica assim. Tente desactivar o widget actual e coloque apenas o que eu lhe passei.

Até mais.

Olá!

E eu retirei o atual e coloquei o seu, mas continua na mesma amigo ...

Olá amigo!

Você não pode ter os dois ativos ao mesmo tempo.
Pois a class que eu usei também está no acesso rápido atual. Eu testei em um fórum de testes e está assim:



Abraços.

Olá caro amigo,

A sua dúvida foi solucionada ou ainda deseja alguma modificação?

Abraços

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre HTML & BBCode'

iChees escreveu:Olá caro amigo,

A sua dúvida foi solucionada ou ainda deseja alguma modificação?

Abraços

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre HTML & BBCode'

Olá!

Sim resolvido amigo obrigado!