Detalhes da questão

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

Descrição

Olá, gostaria de saber como faço para, ao invés de os widgets ficarem nas laterais, que eles fiquem alinhados lado a lado, como uma tabela, abaixo do menu e acima do chatbox, como nesse fórum:

http://godlikeheroes.forumeiros.com.pt

Olá, como vai?

Primeiramente no Painel de Controle vá em Módulos Portal & Widgets Gestão dos widgets do fórum e configure o widget de Tópicos Recentes dessa forma
http://prntscr.com/ffkjxk

Os que não estão marcados, deixe a seu gosto.

Depois vá em Visualização Página inicial Geral no campo Mensagem na Página Inicial adicione o seguinte código e salve

Código:

<div id="tablon-cuerpo">
                                                                        
   <div id="tablon-caja">
                                                                                           
      <div id="tablon-tit">
                                                           Últimos assuntos                                           
      </div>
                                                                                         
      <div id="micontenedor">
                                                                                                                                                                                                                                                                                                                                                                          
      </div>
                                                                                 
   </div>
                                                                        
   <div id="tablon-caja">
                                                                                           
      <div id="tablon-tit">
                                                           Ambientação                                           
      </div>
                                                                                         
      <div style="background: url('http://placehold.it/76x76')center" id="img-amb">
                                                                                                
      </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">
                                                     Administração                                           
      </div>
                                                <img title="nombre del staff" src="http://placehold.it/64x76" /><img title="nombre del staff" src="http://placehold.it/64x76" /><img title="nombre del staff" src="http://placehold.it/64x76" /><img title="nombre del staff" src="http://placehold.it/64x76" />                               
   </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">
                                                           Novidades                                         
      </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 id="tablon-premios">
                                                                                           
      <div id="tablon-tit1">
                                                           Prêmios do Mês                                           
      </div>
                                                                         
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                       
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                       
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                       
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                       
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                       
      <div id="premio-caja">
                                                                          
         <div style="background: url('http://placehold.it/136x95')center" id="premio-img">
                                                                                     
         </div>
                                                                          
         <div id="premio-nom">
                                                    nombre del pj                                 
         </div>
                                                                          
         <div id="premio-cat">
                                                    categoria                                 
         </div>
                                                                  
      </div>
                                                               
   </div>
</div><script>
jQuery(document).ready(function(){
    jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));
    });
</script>

Feito isso em Visualização Imagens e Cores Cores na aba Folha de estilo CSS, adicione

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;
}
 
#premio-caja {
  display: inline-block;
  width: 136px;
  height: 95px;
  overflow: hidden;
}
 
#premio-img {
  width: 136px;
  height: 95px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}
 
#premio-nom, #premio-cat {
  width: 126px;
  padding: 0px 5px;
  background: #8E9C8D;
  line-height: 20px;
  font-size: 8px;
  font-family: 'verdana';
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-weight: lighter;
}
 
#premio-cat {background: #BDB78C; }
 
#premio-caja:hover #premio-img {
  height: 55px;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

Qualquer alteração avise, até mais