Template tópicos recentes

3 participantes

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

Tópico resolvido Template tópicos recentes

Mensagem por Appoloz 21.07.17 1:05

Detalhes da questão


Endereço do fórum: http://alfheimrpg.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Gostaria do template tópicos recentes fosse deste modo:

Template tópicos recentes CiQUn3w

Forum visto: http://narutoworld.com.br/
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Harleen 21.07.17 1:54

Olá, leia esse tutorial
https://ajuda.forumeiros.com/t56843-

Porém acredito que com o seu tema não irá ficar bom, veja esse
https://ajuda.forumeiros.com/t109140-

Até mais
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 21.07.17 3:36

Ok, curti mais o segundo resultado, mas queria fazer umas modificações

No censo quando rolasse a barra para ver as outras caixas, o título permanecesse no alto, em quanto somente as barras rolariam, dá pra entender?

Gostaria de saber se tem como no campo das novidades fazer uma espécie de tópicos recentes somente de tópicos criados em um fórum específico...
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Harleen 21.07.17 5:52

Olá, qual o fórum em questão? poste o link aqui.



Seguindo as mesmas instruções, troque os códigos daquele tópico por esse

Código:
<div id="tablon-cuerpo">
                                                          
   <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                     ultimos temas                                   
      </div>
                                                                           
      <div id="micontenedor">
                                                                                                                                                                                                                                                                                                                                                              
      </div>
                                                                   
   </div>
                                                          
   <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                     ambientación                                   
      </div>
                                                                           
      <div id="img-amb" style="background: url('http://placehold.it/76x76')center">
                                                                                  
      </div>
                                                                       
      <div id="txt-amb">
                                                 Los héroes pueden caerse; los optimistas pueden perder la esperanza; la luz puede volverse oscura; un inocente puede ser culpable, tanto como una niña puede ser victima; el cazador, puede ser cazado; el valiente puede estar aterrado; y un genio, puede perder su mente.                               
      </div>
                                                               
   </div>
                                                          
   <div id="tablon-caja1">
                                                                             
      <div id="tablon-tit">
                                               administración                                   
      </div>
                                          <img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" />                         
   </div>
                                                          
   <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                     ¿Sabías que...?                                   
      </div>
                                                                 
      <div style="text-align: center;">
                                                                          
         <center>
                                                    <script language="javascript">
 
    function VecImagenes()
    {
    n=0;
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this.N=n;
    }
    var Imagenes=new VecImagenes();
    src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
    document.write("<img src="+src+" align=center>");
 
</script>                                   
         </center>
                                                                      
      </div>
                                                         
   </div>
                                                          
   <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                     censo                                   
      </div>
                                                                 
      <div id="gr1">
                                         00                       
      </div>
                                                     
      <div id="gr2">
                                         00                       
      </div>
                                                     
      <div id="gr3">
                                         00                       
      </div>
                                                     
      <div id="gr4">
                                         00                       
      </div>
                                                     
      <div id="gr5">
                                         00                       
      </div>
                                                     
      <div id="gr6">
                                         00                       
      </div>
                                                         
   </div>
                                                          
   <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                     Novedades                                 
      </div>
                                                               
      <div id="txt-nove">
                                                                      
         <div id="nove-fech">
                                                  00/00                             
         </div>
                                                                        
         <div id="nove">
                                                  novedad aquí novedad aquí                             
         </div>
                                                                        
         <div id="nove-fech">
                                                  00/00                             
         </div>
                                                                        
         <div id="nove">
                                                  novedad aquí                             
         </div>
                                                                        
         <div id="nove-fech">
                                                  00/00                             
         </div>
                                                                        
         <div id="nove">
                                                  novedad aquí                             
         </div>
                                                                        
         <div id="nove-fech">
                                                  00/00                             
         </div>
                                                                        
         <div id="nove">
                                                  novedad aquí                             
         </div>
                                                                        
         <div id="nove-fech">
                                                  00/00                             
         </div>
                                                                        
         <div id="nove">
                                                  novedad aquí                             
         </div>
                                                                
      </div>
                                                       
   </div>
</div>
 <script>
 
jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));
 
</script>

CSS
Código:
/*tablon de anuncios*/
#tablon-cuerpo {
  background: #fafafa;
  border: 3px double #65737A;
  padding: 10px;
}
 
#tablon-caja, #tablon-premios, #tablon-caja1 {
  width: 264px;
  height: 106px;
  overflow: auto;
  padding: 10px;
  background: #fff;
  line-height: 13px;
  font-size: 12px;
  font-family: 'arial';
  text-align: justify;
  display: inline-block;
  margin: -1px;
}
 
#tablon-premios {
  width: 836px;
  height: auto;
}
 
#tablon-tit, #tablon-tit1 {
  width: 274px;
  padding: 5px;
  background: #65737A;
  margin-top: -10px;
  margin-left: -10px;
  margin-bottom: 10px;
  line-height: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #F3F2ED;
  font-family: 'Unica One';
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-weight: lighter;
}
 
#tablon-tit1 {width: 846px; }
 
#img-amb {
  float: left;
  margin-right: 5px;
  width: 76px;
  height: 76px;
}
 
#txt-amb {
  height: 70px;
  padding: 3px 0px;
  overflow: auto;
}
 
#tablon-caja1 img {
  width: 64px;
  height: 74px;
  margin: 1px;
}
 
#gr1, #gr2, #gr3, #gr4, #gr5, #gr6 {
  width: 76px;
  height: 26px;
  margin: 1px 0px;
  padding: 5px;
  display: inline-block;
  font-family: 'Unica One';
  font-size: 12px;
  line-height: 26px;
  color: #fff;
  text-align: center;
}
 
#gr1 {background: #A63C40;}
#gr2 {background: #51AC74;}
#gr3 {background: #4E7A9F;}
#gr4 {background: #DCB34E;}
#gr5 {background: #AF6C77;}
#gr6 {background: #333333;}
 
#txt-nove {
  height: 76px;
  overflow: auto;
}
 
#nove-fech {
  width: 40px;
  display: inline-block;
  color: #65737A;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 15px;
  font-family: 'unica one';
}
 
#nove {
  width: 220px;
  line-height: 15px;
  display: inline-block;
}

Até mais.
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 21.07.17 18:00

Não mudou nada :/
Era para ser algo onde somente as barras coloridas se movessem ao mover a scroll bar, igual a área da ambientação, onde somente o texto se move ao mover a scroll bar.

O fórum em questão é esse: http://alfheimrpg.forumeiros.com/f10-novidades
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 22.07.17 18:52

up
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Kyo Panda 24.07.17 13:34

Troque o template por esse:

Código:
<div id="tablon-cuerpo">
                                                            
   <div id="tablon-caja">
                                                                              
      <div id="tablon-tit">
                                                      ultimos temas                                    
      </div>
                                                                           
      <div id="micontenedor">
                                                                                                                                                                                                                                                                                                                                                               
      </div>
                                                                     
   </div>
                                                            
   <div id="tablon-caja">
                                                                              
      <div id="tablon-tit">
                                                      ambientación                                    
      </div>
                                                                           
      <div id="img-amb" style="background: url('http://placehold.it/76x76')center">
                                                                                    
      </div>
                                                                        
      <div id="txt-amb">
                                                 Los héroes pueden caerse; los optimistas pueden perder la esperanza; la luz puede volverse oscura; un inocente puede ser culpable, tanto como una niña puede ser victima; el cazador, puede ser cazado; el valiente puede estar aterrado; y un genio, puede perder su mente.                                 
      </div>
                                                               
   </div>
                                                            
   <div id="tablon-caja1">
                                                                              
      <div id="tablon-tit">
                                                administración                                    
      </div>
                                          <img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" />                           
   </div>
                                                            
   <div id="tablon-caja">
                                                                              
      <div id="tablon-tit">
                                                      ¿Sabías que...?                                    
      </div>
                                                                  
      <div style="text-align: center;">
                                                                           
         <center>
                                                    <script language="javascript">
 
    function VecImagenes()
    {
    n=0;
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this.N=n;
    }
    var Imagenes=new VecImagenes();
    src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
    document.write("<img src="+src+" align=center>");
 
</script>                                    
         </center>
                                                                        
      </div>
                                                         
   </div>
                                                            
   <div id="tablon-caja">                                                                  
      <div id="tablon-tit">
         censo                                    
      </div>
      
      <div id="tablon-gr">
         <div id="gr1">
                                             00                        
         </div>
                                                         
         <div id="gr2">
                                             00                        
         </div>
                                                         
         <div id="gr3">
                                             00                        
         </div>
                                                         
         <div id="gr4">
                                             00                        
         </div>
                                                         
         <div id="gr5">
                                             00                        
         </div>
                                                         
         <div id="gr6">
                                             00                        
         </div>
      </div>
                                                         
   </div>
                                                            
   <div id="tablon-caja">
                                                                              
      <div id="tablon-tit">
                                                      Novedades                                 
      </div>
                                                               
      <div id="txt-nove">
                                                                  
      </div>
      
      <script>
         (function($) {
            'use strict';
            
            var pad = function(n, width, z) {
               z = z || '0';
               n = n + '';
               return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            }

            var $recent = $('#txt-nove');

            $.get('/feed', { f: 1 }, function(data) {
               $('item', data).each(function() {
                  var $this = $(this);
               
                  var date = new Date($.trim($this.find('pubDate').text()));
               
                  $('<div>', {
                     id: 'nove-fech',
                     text: pad(date.getDate(), 2) + '/' + pad(date.getMonth(), 2)
                  }).appendTo($recent);
               
                  $('<div>', {
                     id: 'nove',
                     html: $('<a>', {
                        href: $.trim($this.find('guid').text()),
                        text: $.trim($this.find('title').text())
                     }).prop('outerHTML')
                  }).appendTo($recent);
               });
            });
         })(jQuery);
      </script>
                                                         
   </div>
</div>
 <script>
 
jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));
 
</script>

Nessa linha:

Código:
$.get('/feed', { f: 1 }, function(data) {

Troque o 1 pelo ID do fórum desejado.

Para o titulo, precisaremos que aplique esse código para bolarmos o CSS.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 24.07.17 20:23

Têm como colocar a caixa de "novidades" para baixo da caixa que seria de "tópicos recentes"?
E os tópicos recentes pararam de funcionar.
Todavia, a ultima modificação feita foi a que o senhor @KyoPanda sugeriu
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Kyo Panda 25.07.17 12:41

Troque por esse:

Código:
<div id="tablon-cuerpo">
                                                           
  <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                      ultimos temas                                   
      </div>
                                                                           
      <div id="micontenedor">
                                                                                                                                                                                                                                                                                                                                                             
      </div>
                                                                   
  </div>
                                                           
  <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                      ambientación                                   
      </div>
                                                                           
      <div id="img-amb" style="background: url('http://placehold.it/76x76')center">
                                                                                   
      </div>
                                                                       
      <div id="txt-amb">
                                                Los héroes pueden caerse; los optimistas pueden perder la esperanza; la luz puede volverse oscura; un inocente puede ser culpable, tanto como una niña puede ser victima; el cazador, puede ser cazado; el valiente puede estar aterrado; y un genio, puede perder su mente.                               
      </div>
                                                               
  </div>
                                                           
  <div id="tablon-caja1">
                                                                             
      <div id="tablon-tit">
                                                administración                                   
      </div>
                                          <img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" /><img src="http://placehold.it/64x76" title="nombre del staff" />                         
  </div>
 
  <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                      Novedades                                 
      </div>
                                                               
      <div id="txt-nove">
                                                                 
      </div>
     
      <script>
        (function(_) {
            'use strict';
           
            var pad = function(n, width, z) {
              z = z || '0';
              n = n + '';
              return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            }

            var _recent = _('#txt-nove');

            _.get('/feed', { f: 1 }, function(data) {
              _('item', data).each(function() {
                  var _this = _(this);
             
                  var date = new Date(_.trim(_this.find('pubDate').text()));
             
                  _('<div>', {
                    id: 'nove-fech',
                    text: pad(date.getDate(), 2) + '/' + pad(date.getMonth(), 2)
                  }).appendTo(_recent);
             
                  _('<div>', {
                    id: 'nove',
                    html: _('<a>', {
                        href: _.trim(_this.find('guid').text()),
                        text: _.trim(_this.find('title').text())
                    }).prop('outerHTML')
                  }).appendTo(_recent);
              });
            });
        })(jQuery);
      </script>
                                                       
  </div>
                                                           
  <div id="tablon-caja">
                                                                             
      <div id="tablon-tit">
                                                      ¿Sabías que...?                                   
      </div>
                                                                 
      <div style="text-align: center;">
                                                                         
        <center>
                                                    <script language="javascript">
 
    function VecImagenes()
    {
    n=0;
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this[n++]="http://placehold.it/264x76";
    this.N=n;
    }
    var Imagenes=new VecImagenes();
    src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
    document.write("<img src="+src+" align=center>");
 
</script>                                   
        </center>
                                                                       
      </div>
                                                         
  </div>
                                                           
  <div id="tablon-caja">                                                                 
      <div id="tablon-tit">
        censo                                   
      </div>
     
      <div id="tablon-gr">
        <div id="gr1">
                                            00                       
        </div>
                                                       
        <div id="gr2">
                                            00                       
        </div>
                                                       
        <div id="gr3">
                                            00                       
        </div>
                                                       
        <div id="gr4">
                                            00                       
        </div>
                                                       
        <div id="gr5">
                                            00                       
        </div>
                                                       
        <div id="gr6">
                                            00                       
        </div>
      </div>
                                                         
  </div>
                                                           

</div>
 <script>
 
jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));
 
</script>

E adicione ao CSS:

Código:
#tablon-caja,
#tablon-caja1 {
    position: relative;
    padding-top: 40px;
    height: 76px;
}

#tablon-tit {
    position: absolute;
    top: 10px;
}

#tablon-gr {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 40px;
    bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 26.07.17 13:49

Agora no CENSO ele roda diretamente pra baixo, ele pula as duas caixas do meio (tem uma amarela e azul no meio, se vc rolar manualmente com a seta do mouse)...

E ainda não aparece nada nos tópicos recentes :/

Enquanto nas novidades ele pegou um tópico que não ta no forum de novidades

@edit: eu criei um novo topico na area de novidades e ele n atualizou no widget

@edit2: os topicos recentes tinha esquecido de ativar o widget, mas agora tem aquela barra lá em cima do forum "ultimos assuntos", como escondo?
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Harleen 26.07.17 14:45

Olá, procure na sua folha CSS o seguinte código
Código:
#content-container div#left {
    float: left;
    margin-right: 3px;
    overflow: hidden;
    width: 200px;
}

Troque o width: 200px; por width: 0;

E veja se resulta
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Appoloz 28.07.17 14:52

Não existe este código no meu css (existe agora pois eu o adicionei)
Mas mesmo eu adicionando-o no topo da css não resultou.
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Harleen 28.07.17 17:15

Olá eu não vejo o código modificado http://prntscr.com/g1hq6y, como disse acima, mude o width para 0, ficando
Código:
#content-container div#left {
float: left;
margin-right: 3px;
overflow: hidden;
width: 0 !important;
}

Resultado http://prntscr.com/g1hqhy

Até mais
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Template tópicos recentes

Mensagem por Harleen 02.08.17 14:43

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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