Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
7kgmlcdkv
 
Luiz
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 

Quem está conectado
267 usuários online :: 4 usuários cadastrados, Nenhum Invisível e 263 Visitantes :: 2 Motores de busca

7kgmlcdkv, AlexG, soldado, uvmyyvpew

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Sistema de Abas

Página 1 de 2 1, 2  Seguinte

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

Resolvido Sistema de Abas

Mensagem por ZombieW em 16/10/15, 10:50 am

Detalhes da questão


Endereço do fórum: www.tutorialdopw.com
Versão do fórum: Phpbb3

Descrição


Bom dia,

Como posso implementar este sistema de abas que existe no início do FdF?



Última edição por ZombieW em 27/10/15, 12:34 pm, editado 1 vez(es)
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 10:54 am

Olá! Muito feliz

Eu penso que as imagens que estão aí sejam da propriedade Forumeiros. Ou seja, poderá usar, mas terá de substituir as imagens para evitar futuros problemas.
Aceda a Painel de Controle > Visualização > Página Inicial > Geral e na mensagem da página inicial coloque o seguinte código:
Código:
<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://illiweb.com/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://illiweb.com/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span>  
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a>  
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span>  
</div>
  
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema.  
</div>
   <br class="clear" />  
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a>  
</div>
  
<div id="faInfo">
          
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.        
 <div id="faNewsBox">
              
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>    
 </div>
              
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>    
 </div>
            
 </div>
            
 <div style="display:none" id="faNewsRSS">
      
 </div>
          
 </div>
          
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:        
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>    
 </div>
            
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />        
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.     <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!      
 </div>
            
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.      
 </div>
      
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
  
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
      
      homepage = J('.introduction', main)[0], // homepage message
      
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
      
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
      
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
      
      // profile variables
      profil,
      login;
      
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
      
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
      
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
  
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
  
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
      
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
      
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
      
      return false;
    }
  }
  
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
  
    if (this.src == 'http://illiweb.com/fa/m/tabs_less1.gif') {
      this.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://illiweb.com/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Atenciosamente.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 10:57 am

A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 10:59 am

Poderá também seguir este tutorial:
Seta http://ajuda.forumeiros.com/t76837-

Para que não fique igual. Feliz
Algo mais em relação a isto ou está resolvido?

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:03 am

Ainda não.

Vi o tutorial que você me passou, ele serve para:

seender escreveu:2º - Aplicação do código:
O código poderá ser aplicado em vários locais, para mais informações leia o tutorial referente ao local de possível adição:
Widgets do portal;
Widgets do fórum;
Mensagem na home page;
Página HTML.

Eu preciso inserir isso em tópicos, é possível?

Se sim, como eu chamarei o código de abas de dentro do tópico?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:06 am

Sim, é possível. Pórem, você precisa de ter o HTML ativo nos tópicos. (Painel de Controle > Geral > Mensagens e e-mails > Configuração Seta Permitir HTML: Sim.)

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:07 am

ZombieW escreveu:Se sim, como eu chamarei o código de abas de dentro do tópico?

Faltou você me responder isso! Mostrando a lingua
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:09 am

Desculpe. Rindo
Basta colocar exatamente o código como eu lhe forneci.
Código:
<style type="text/css">.homepageTitle { color:#39C; font-size:21px; font-style:italic; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; background:url(http://illiweb.com/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:40px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }

/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #39C; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #39C; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #39C; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#39C; }
#faInfoAnn { background-image:url('http://i18.servimg.com/u/f18/18/21/60/73/fdf_bu10.png') }
#faInfoSearch { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_se10.png') }
#faInfoExplain { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png') }
#faInfoSuggestion { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png') }
#faInfoStaff { background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }

/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://illiweb.com/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }

/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:85px; font-weight:bold; text-align:right; margin-right:6px; }

/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div style="display:none;" class="homepageTitle" id="hiddenTitle" itemprop="name">
    Bem vindo {USERNAME} ao fórum de suporte Forum<span style="color:#333">eiros</span> 
</div>
  <a href="http://www.forumeiros.com/" itemprop="url"><img alt="" src="http://i18.servimg.com/u/f18/18/45/41/65/fdf-f11.png" id="homepageLogo" itemprop="logo" /></a> 
<div class="homepageTitle">
    Bem vindo {USERNAME} ao fórum de suporte oficial de Forum<span style="color:#333">eiros</span> 
</div>
 
<div itemprop="description" style="text-align:justify">
    Bem vindo ao suporte <span style="color:#39C">Forum</span><span style="color:#333">eiros</span>, {USERNAME}. Este fórum é baseado em apoio de voluntários, por isso é necessário para fazer uma <strong><a rel="nofollow" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">busca</a></strong> antes de abrir um novo tópico para uma pergunta ou problema. Se não foram encontrados resultados, você pode, em seguida, abrir um novo tópico explicando claramente o problema. 
</div>
  <br class="clear" /> 
<div id="faInfoNav">
    <a href="#" class="infoActif" id="_faInfoAnn">Novidades e atualizações</a><a href="#" id="_faInfoSearch">Busca personalizada</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Proponha sua sugestão</a><a href="#" id="_faInfoStaff" style="border:none">Equipe Forumeiros</a> 
</div>
 
<div id="faInfo">
         
 <div class="infoBlock" id="faInfoAnn">
        Quando Forumeiros envia novidades aos seus fóruns, você poderá consultá-los logo abaixo.       
 <div id="faNewsBox">
             
 <div class="faNewsRow">
    <a href="/f1-" itemprop="url">Anúncios e Atualizações</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/f4-" itemprop="url">Anúncios do fórum de suporte</a>   
 </div>
             
 <div class="faNewsRow">
    <a href="/t23-" itemprop="url">Dúvidas mais frequentes</a>   
 </div>
           
 </div>
           
 <div style="display:none" id="faNewsRSS">
     
 </div>
         
 </div>
         
 <div style="display:none;" class="infoBlock" id="faInfoSearch">
        Tópicos que não recebem uma resposta por vários dias são automaticamente enviados para a Lixeira. Ao pesquisar é possível encontrar tópicos que se relacionam com o seu problema, e que já estão resolvidos! Faça uma busca personalizada usando a função logo abaixo:       
 <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
    <gcse:search> </gcse:search>   
 </div>
           
 <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
          <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />       
 </form>
        Por favor, lembre-se de buscar em nossa lista de <a href="/t23-" style="font-weight:bold;">perguntas frequentes</a> antes de criar uma dúvida caso não tenha encontrado o que deseja.     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoExplain">
        Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido! Para ajudá-lo nisso, nós aconselhamos que mantenha as informações <strong><a href="/profile?mode=editprofile">técnicas do seu perfil</a> atualizadas</strong>. É através delas, que vamos entender melhor sua questão.    <br /><br />    <strong>Aconselhamos ler : </strong><a href="/t82-regras" itemprop="url">Regulamento geral</a> • <a href="/t93381-" itemprop="url">Troca de senha da fundação</a> • <a href="/t817-" itemprop="url">Saiba o que fazer ao chegar no fórum</a> • <a href="/t21693-" itemprop="url">Sua segurança em Forumeiros</a>     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
        Se você tem novas ideias, não hesite em nos sugerir! Forumeiros é uma empresa aberta para receber seus feedbacks, pois, é dessa forma que construímos uma grande família facilitando o seu conforto, e de seus membros.    <br /><br />    Compartilhe a sua sugestão conosco, criando um novo tópico em <a href="/c6-" style="font-weight:bold;" itemprop="url">Sugestões e Melhoras</a>!     
 </div>
           
 <div style="display:none;" class="infoBlock" id="faInfoStaff">
        A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de suporte. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe neste tópico: <a href="/t7556-" itemprop="url">A equipe de suporte Forumeiros</a>    <br /><br />    Por favor <strong>não contactar vários membros da equipe de uma só vez</strong> para um mesmo assunto.     
 </div>
     
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
 
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
     
      homepage = J('.introduction', main)[0], // homepage message
     
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
     
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
     
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
     
      // profile variables
      profil,
      login;
     
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
     
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
     
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
 
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
     
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
     
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
     
      return false;
    }
  }
 
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
 
    if (this.src == 'http://illiweb.com/fa/m/tabs_less1.gif') {
      this.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://illiweb.com/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por Shek em 16/10/15, 11:10 am

ZombieW escreveu:A intenção não é copiar, mas sim aproveitar esse sistema de abas.

Vou inserir ela em tópicos com as informações de forma otimizada.

O código que você me passou, serve para o índice, creio eu.
Esse é o problema. Fizemos este recurso com base neste tutorial: http://ajuda.forumeiros.com/t76837- , sendo assim, não há motivos de usar o mesmo código do que temos aqui, basta personalizar o do tutorial e terá o mesmo efeito.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:13 am

@Fraise

É que eu ainda acho muito confuso...

Você poderia (se possível) mastigar um pouco mais?

Qual trecho vai no CSS?

Poderia fornecer um código de exemplo aqui com algumas abas e uma frase, só para eu entender?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 16/10/15, 11:15 am

Olá.

Tudo que está dentro do <style></style> é CSS.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:16 am

Shek escreveu:Olá.

Tudo que está dentro do <style></style> é CSS.

Certo, mas preciso deixar as tags de "Style" dentro do CSS? Normalmente não uso isso lá...
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:18 am

Senhor, não precisa colocar nada na folha de estilos!
Poderá fazer simplesmente assim quando quiser apresentar isso numa mensagem:
Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:21 am

Certo, vamos por partes:

Inserido isso no meu CSS:

Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>

Depois dentro de um tópico, eu coloquei esse código:

Código:
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">   <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado foi esse:

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:24 am

Vamos fazer de uma forma diferente, okay?
Adicione este código à sua folha de estilos:
Código:
div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}

Em seguida, crie um novo JS com investimento em todas as páginas:
Código:
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

Depois é só usar este código nas mensagens:
Código:
<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise

avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:36 am

Seguido o passo-a-passo e o resultado foi esse:



Além de bugar meu perfil à esquerda (está muito para baixo).
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:38 am

Impossivel! O senhor usou apenas este código, certo?
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:42 am

@Fraise

Sim amigo,

JavaScript:



Tópico:

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 16/10/15, 11:44 am

Não é esse o código e sim este:
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Atenciosamente.
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 16/10/15, 11:45 am

Eu sei @Fraise , você passou errado antes, mas testei também com esse outro correto e o resultado ainda é o mesmo.

http://www.tutorialdopw.com/t1165-#3527
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 18/10/15, 03:08 am

Bom dia.

Mas... Se você vai usar o script somente para os tópicos, então por o marcou para todas as páginas? Assim que fiz isso, você gerou um erro "Uncaught SyntaxError: Unexpected identifier" em todos os seus javascripts. Triste


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 18/10/15, 07:33 pm

@Shek

Alterei para "nos Tópicos", mas o resultado ainda é o mesmo.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 19/10/15, 01:48 am

Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada. Triste


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 19/10/15, 09:48 am

Shek escreveu:Eu não posso fazer qualquer teste, pois, o fórum não permite novas inscrições, e a conta ShiftActif foi deletada. Triste

Você se refere ao meu fórum?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 20/10/15, 01:09 am

Exatamente. Thumbleft


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 20/10/15, 09:32 am

Shek escreveu:Exatamente. Thumbleft

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 20/10/15, 09:36 am

ZombieW escreveu:
Shek escreveu:Exatamente. Thumbleft

Impossível.

Nenhum usuário é deletado (pode ser banido/bloqueado) e seu usuário nunca foi registrado.

E também, meu fórum está aceitando inscrições desde sempre.

Apesar que, eu teste e não está de fato, porém, o fórum está configurado sim para aceitar:


Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 20/10/15, 09:59 am

Fraise escreveu:Simples de resolver. Basta aceder a Painel de Controle > Geral > Fórum > Configuração e em "Fórum de férias" marcar a opção Não.

Não me recordo de tê-lo colocado em "Férias", mas enfim, removi a opção.

Tente novamente Shek.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 23/10/15, 09:09 am

"up"
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 26/10/15, 11:19 am

"up"
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 27/10/15, 11:39 am

Certo, vamos recomeçar...

Removi todo meu CSS, exceto por:

Código:
/* Sistema de Abas - Início */
div.aba {
  background:#000;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}
/* Sistema de Abas - Fim */

Este é o JS:

Código:
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">  <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})

E este é o que está no tópico:

Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

O resultado é esse:

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 27/10/15, 12:08 pm

Olá!

Mas... Para tópicos não funciona. Só funciona nos setores de aceitam o HTML, como mensagem da página inicia, páginas HTML, Widgets e etc.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 27/10/15, 12:30 pm

Certo Shek,

Sendo assim, há como criar um sistema parecido?

Só para você entender, eu preciso melhorar a forma de como o usuário olha que está nessa postagem.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 27/10/15, 12:34 pm

Olá!

É como o seender mencionou aqui: http://ajuda.forumeiros.com/t78753-sistema-de-abas É complicado, pois, se usar DIVs dentro dos posts, é provável que ocorra bugs. Se houvesse BBcode (nativo) do tipo DIV, talvez desse certo.

Até mais!


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 27/10/15, 01:13 pm

Ok Shek,

Você disse que em páginas HTML funciona, correto? Podemos fazer um teste então?

Mantenho o CSS, mantenho o JS, mas como insiro o sistema numa página HTML?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 27/10/15, 10:04 pm

Utilizando o mesmo código que estava a utilizar nas mensagens. Feliz
Código:
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>


</div>

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 28/10/15, 09:40 am

Estranhamente continua não funcionando...

http://www.tutorialdopw.com/h10-sistema-de-abas

Código:
<div id="seender_abas"><div id="aba1" class="aba">Conteúdo da aba 1.</div><div id="aba2" class="aba">Conteúdo da aba 2.</div>
</div>
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 31/10/15, 04:05 pm

Bora lá galerinha, não deve ser tão difícil assim! =/

"up"
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Shek em 31/10/15, 08:13 pm

Mas... Como vai funcionar se você colocou apenas o HTML?? Suspeito... Além do mais, não é difícil, o que eu não entendo é o motivo pelo qual o senhor não tentou usar o que é ensinado no tutorial, ao invés de só colocar o HTML.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16927
Pontos Ativos : 21262

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 02/11/15, 01:44 pm

Porque o CSS e o JS já estão ativos no fórum.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por Fraise em 04/11/15, 11:22 pm

Que tal tentarmos um outro código?
jQuery:
Código:
$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

CSS:
Código:
#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}

HTML:
Código:
<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
         <table align="left" border="0" width="2%">
            <tr>
               <td>
          USUA
               </td>
            </tr>
         </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                     NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
               <td>
                      SOFT
                  </td>
                </tr>
            </table>
        </div>       

Resulta? Feliz

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 05/11/15, 09:32 am

Para evitar erros ou conflitos, ao invés de fazer no "Tutorial do PW", eu fiz no "Tutorial do CA".

Sendo assim, esse foi o resultado:

http://www.tutorialdoca.com/h38-sistema-de-abas

Triste
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 05/11/15, 02:49 pm

Boa tarde!

Vamos testar em uma página HTML, ok? Peguei um script aleatório dos que o Fraise postou, modifiquei e veja:
(Coloque-o completamente na página HTML)

Código:
<html><head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head>
<script>$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
  }</script>
<style>#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
  }</style>

<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
  <tr>
      <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
      <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
            <tr>
              <td>
          USUA
              </td>
            </tr>
        </table>
      </div>

      <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      EMPR
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                    NOTA
                  </td>
                </tr>
            </table>
        </div>
       
      <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
              <td>
                      SOFT
                  </td>
                </tr>
            </table>
  </div>    </html>

Mas, você deseja para os tópicos, certo?
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1435
Pontos Ativos : 2004

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

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 11:07 am

@MateusAnjosV

Opa, esse funcionou para a página HTML!

http://www.tutorialdoca.com/h38-sistema-de-abas

Sim, desejo para os tópicos (se for possível)
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 11:18 am

Bom dia!

Nesse caso, aplique o CSS:
Código:
#tabelafraise {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}
Crie um javascript, nos tópicos:
Código:
$(document).ready(function() {
   
    $(".menu[data-tab]").click(function() {
       
        // reseta as propriedades das outras abas     
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
       
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
   
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

E quando for postar, utilize:
Código:
<table id="tabelafraise" width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
 <tr>
     <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
   <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
   <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
   <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
 </tr>
</table>
     <div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
        <table align="left" border="0" width="2%">
           <tr>
              <td>
         USUA
              </td>
           </tr>
        </table>
     </div>

     <div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     EMPR
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                    NOTA
                 </td>
               </tr>
           </table>
       </div>
       
     <div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
           <table border="0" width="" align="left"valign="top">
               <tr>
              <td>
                     SOFT
                 </td>
               </tr>
           </table>
       </div>

Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1435
Pontos Ativos : 2004

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

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 11:32 am

Certo, tudo instalado.

http://www.tutorialdoca.com/t1746-teste-sistema-de-abas#2042

Fiz apenas uma modificação na tabela para ficar menor e quebrar em 2 linhas:

Código:
<table id="tabelafraise" width="450" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
<tr><td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
<td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td></tr>
<tr><td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
<td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
</tr>
</table>
<div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
<table align="left" border="0" width="2%">
<tr>
<td>USUA</td>
</tr>
</table></div>
<div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>EMPR</td>
</tr>
</table></div>
<div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>NOTA</td>
</tr>
</table></div>     
<div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
<table border="0" width="" align="left"valign="top">
<tr>
<td>SOFT</td>
</tr>
</table></div>

Mas como você pode ver o texto ao clicar nos "botões" não funciona.

Sei que fui avisado que bugs podiam ocorrer.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 11:35 am

Relaxe, não vai "rolar" bugs, ok?
Ele funciona sim, veja:
http://prntscr.com/8zonsh


Acrescente em seu CSS, assim, modificamos a cor do texto:
Código:
.conteudo {color: gray !important}
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1435
Pontos Ativos : 2004

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

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 11:40 am

@MateusAnjosV

Funcionou, obrigado.

Porém, eu vi que cada botão trás o texto em uma linha.

É possível sempre trazer na mesma linha?

Pergunto porque minha ideia é criar de fato uma tabela bem grande com diversas armas. E o usuário escolher uma das versões das armas nesse sistema de abas.

Só que se uma arma sair numa posição e outra mais abaixo, vai dar no mesmo de não ter o sistema de abas! :S
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Sistema de Abas

Mensagem por MateusAnjosV em 06/11/15, 11:54 am

Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1435
Pontos Ativos : 2004

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

Resolvido Re: Sistema de Abas

Mensagem por ZombieW em 06/11/15, 01:36 pm

MateusAnjosV escreveu:Entendo... adicione mais este CSS:
Código:
#div_usua {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_empr {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_nota { position: relative;top: -48px !important}
#div_soft { position: relative;top: -68px !important}
Eu não estou conseguindo clicar... então não testei, fui na cabeça mesmo...

É, ele bugou após clicar em qualquer uma das abas.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1262
Pontos Ativos : 1779

Ver perfil do usuário http://www.perfectteam.org

Página 1 de 2 1, 2  Seguinte

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