Template tópicos recentes

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:



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

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

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

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.

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

up

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.

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

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;
}

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?

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

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.

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