Widgets verticalmente abaixo do menu

3 participantes

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

Tópico resolvido Widgets verticalmente abaixo do menu

Mensagem por Blackfyre 03.06.17 19:49

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



Última edição por Blackfyre em 06.06.17 23:50, editado 1 vez(es)
Blackfyre

Blackfyre
Novo Membro

Membro desde : 31/05/2017
Mensagens : 24
Pontos : 38

http://www.ojogodostronosrpg.forumeiros.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Widgets verticalmente abaixo do menu

Mensagem por Harleen 03.06.17 23:28

Olá, como vai?

Primeiramente no Painel de Controle vá em Módulos Seta Portal & Widgets Seta 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 Seta Página inicial Seta 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 Seta Imagens e Cores Seta 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
Harleen

Harleen
Super Membro

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

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Widgets verticalmente abaixo do menu

Mensagem por Shek 07.06.17 21:01

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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