Qual é minha questão:
Boas! Eu gostaria de saber como eu posso criar uma caixa parecida com essa cinzenta e cheia de "atalhos" deste forum » http://abrete-sesamo.foroactivo.com/   poderiam ajudar-me?

Endereço do meu fórum:
http://power-onepiece.ativo-forum.com/

Versão do fórum:
PHPBB3

Boa tarde!

Qual? Eu acessei o site e vi vários efeitos, mas não encontrei essa suposta caixa. Eu penso que seja a mensagem da home page, é isso?

Código:

<div class="mes-txt"><center>
    <style type="text/css">.cvuelta {-webkit-perspective:1000; -moz-perspective:1000; -o-perspective:1000; perspective:1000; width:90px; height:45px;}.cvueltacambio {-webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; width:90px; height:45px;}.cflop:hover .cvueltacambio {-webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -o-transform:rotateX(180deg); transform:rotateX(180deg);}.cfront {overflow:hidden; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden;-o-backface-visibility:hidden; backface-visibility:hidden; position:absolute;}.cback {overflow:hidden; -webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -o-transform:rotateX(180deg); transform:rotateX(180deg); opacity:0; -webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; position:absolute; width:90px; height:45px; background-color:#9e0c0c;}.cflop:hover .cback {-webkit-transition:all 2s ease-in-out; -moz-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; opacity:1; background-color:#000;}.contenido {width:90px; height:45px; background-color:#9e0c0c;}.cdentro {font-family:georgia; font-size:10px; color:#f1f1f1; text-transform:uppercase; text-align:center; padding-top: 5px;}.cdentro a:link, .cdentro a:active, .cdentro a:visited {font-size:10px; color:#fff; text-decoration:none; background-color:transparent;} .cdentro a:hover {color:#fff; font-size:13px; font-style: italic; text-decoration:none; background-color:transparent;}.cscrolling ::-webkit-scrollbar {width: 5px;}.cscrolling ::-webkit-scrollbar-track {background-color:#DFDFDF;}.cscrolling ::-webkit-scrollbar-thumb {background-color:#0A4A8D;}</style>
   <div style="width: 620px; height: 383px; background-color:#393939; padding:10px;">
      
      <table cellspacing="0">
         
         <tbody>
            
            <tr>
               
               <td>
                  
                  <div style="overflow: auto; height:220px;width:200px; background-color:#232323; margin-bottom: 10px; margin-right: 10px;">
                     
                     <center>
                         <img src="http://i.imgur.com/l3iECXN.png" alt="" border="0">
                     </center>
                     
                     <div style="font-family: georgia; font-size: 10px; text-align: justify; line-height: 120%; padding: 10px; color:#ededed;">
                         Hace mucho tiempo, cuando no existían países en este mundo, la gente sufría y no había forma de hacer frente a los sucesos desafortunados que ocurrían. Las personas eran pasto de los desastres naturales, el hambre, las enfermedades y la guerra. Sin embargo, un día apareció un misterioso y enigmático joven que, con su bastón mágico, hizo desaparecer todas las calamidades que poblaban la tierra. El pueblo, asombrado y agradecido, escuchó las palabras que dijo el misterioso joven: "Los seres humanos deben construir un país, ya que por separado son débiles, y deben unirse para apoyarse unos a otros si desean vivir. Si lo hacen, serán bendecidos con días de tranquilidad". Las personas estuvieron de acuerdo y entonces el joven ondeó su bastón una vez más para invocar una inmensa torre que surgió de las profundidades del mundo y a la que se clasificó con el nombre de "Celda". Entonces el joven dijo esto: "El que quiera ser el rey entrará aquí, si supera las pruebas dentro, se le concederá la facultad de ser rey”. De esta forma muchas personas entraron en la torre. Pero todas perecieron ante sus ocultos y peligrosos secretos. Pero al final alguien salió vivo de la celda. Un chico volvió con vida trayendo consigo tesoros y un extraño poder. Así, el niño se convirtió en el rey, y creo un gran y próspero país. La paz reinaba en el mundo gracias a él, y al misterioso joven a quién llamaron "Magi". La misión de los Magi es elegir a los candidatos a rey y guiarlos para que lo sean. En todas las épocas anteriores sólo ha habido tres Magi en el momento de elegir reyes, crear países, y construir un mundo entero. Sin embargo, en la era actual un cuarto Magi ha aparecido, Aladdin. Grandes cosas están por venir.
                     </div>
                     
                  </div>
                  
                  <div style="height:153px;width:200px; background-color:#232323;">
                     
                     <center>
                        
                        <div class="menu3">
                            <a href="http://abrete-sesamo.foroactivo.com/t8-normas-generales-ultima-modificacion-20-12-12">REGLAS GENERALES</a><a href="http://abrete-sesamo.foroactivo.com/t24-normativas-para-afiliaciones">NORMAS DE AFILIACIÓN</a><a href="http://abrete-sesamo.foroactivo.com/t28-esencia">ESENCIA DEL FORO</a><a href="http://abrete-sesamo.foroactivo.com/t14-registro-de-avatar-personajes-inventados">REGISTRO DE INVENTADOS</a><a href="http://abrete-sesamo.foroactivo.com/t13-registro-de-grupo-cannon-inventados">REGISTRO DE GRUPOS</a><a href="http://abrete-sesamo.foroactivo.com/f77-personajes-del-mes">PERSONAJE DEL MES</a><a href="http://abrete-sesamo.foroactivo.com/t16-normas-para-personajes-inventados">NORMAS PJ INVENTADOS</a><a href="http://abrete-sesamo.foroactivo.com/t9-grupos-tipos-de-personajes">DESCRIPCIÓN DE GRUPOS</a><a href="http://abrete-sesamo.foroactivo.com/f7-personajes-predeterminados">PERSONAJES CANNON</a>
                        </div>
                        
                     </center>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="height:120px;width:200px; background-color:#232323; margin-bottom:10px;">
                     
                     <div style="font-family: georgia; font-size: 11px; text-align: left; line-height: 120%; padding: 10px; color:#ededed;">
                        <em>{03/02}</em> ¡Nuevo grupo "Inactivos"! <br><em>{02/02}</em> ¡Nuevo foro "AU"!<br><em>{26/01}</em> Trama: Las fiestas del Imperio Laem
                     </div>
                     
                  </div>
                  
                  <div style="height:120px;width:200px; background-color:#232323; margin-bottom:10px;">
                     
                     <center>
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                    
                                    <div style="margin-top: 10px;">
                                       
                                       <div style="width:90px; height: 45px; background-color:#9e0c0c; border:3px solid #a59393;" class="cscrolling">
                                          
                                          <div class="cflop">
                                             
                                             <div class="cvueltacambio">
                                                
                                                <div class="cfront">
                                                   
                                                   <div style="width:90px; height:45px; background-image: url(http://i.imgur.com/rSuQ5Wc.png);">
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                                <div class="cback">
                                                   
                                                   <div class="contenido">
                                                      
                                                      <div class="cdentro">
                                                          Paca Pérez<br><a href="">MP</a>♣<a href="">PERFIL</a>
                                                      </div>
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                             </div>
                                             
                                          </div>
                                          
                                       </div>
                                       
                                       <div style="width:90px; height: 45px; background-color:#9e0c0c; border:3px solid #a59393;" class="cscrolling">
                                          
                                          <div class="cflop">
                                             
                                             <div class="cvueltacambio">
                                                
                                                <div class="cfront">
                                                   
                                                   <div style="width:90px; height:45px; background-image: url(http://i.imgur.com/rSuQ5Wc.png);">
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                                <div class="cback">
                                                   
                                                   <div class="contenido">
                                                      
                                                      <div class="cdentro">
                                                          Paca Pérez<br><a href="">MP</a>♣<a href="">PERFIL</a>
                                                      </div>
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                             </div>
                                             
                                          </div>
                                          
                                       </div>
                                       
                                    </div>
                                    
                                 </td>
                                 
                                 <td>
                                    
                                    <div style="margin-top: 10px;">
                                       
                                       <div style="width:90px; height: 45px; background-color:#9e0c0c; border:3px solid #a59393;" class="cscrolling">
                                          
                                          <div class="cflop">
                                             
                                             <div class="cvueltacambio">
                                                
                                                <div class="cfront">
                                                   
                                                   <div style="width:90px; height:45px; background-image: url(http://i.imgur.com/rSuQ5Wc.png);">
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                                <div class="cback">
                                                   
                                                   <div class="contenido">
                                                      
                                                      <div class="cdentro">
                                                          Paca Pérez<br><a href="">MP</a>♣<a href="">PERFIL</a>
                                                      </div>
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                             </div>
                                             
                                          </div>
                                          
                                       </div>
                                       
                                       <div style="width:90px; height: 45px; background-color:#9e0c0c; border:3px solid #a59393;" class="cscrolling">
                                          
                                          <div class="cflop">
                                             
                                             <div class="cvueltacambio">
                                                
                                                <div class="cfront">
                                                   
                                                   <div style="width:90px; height:45px; background-image: url(http://i.imgur.com/rSuQ5Wc.png);">
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                                <div class="cback">
                                                   
                                                   <div class="contenido">
                                                      
                                                      <div class="cdentro">
                                                          Paca Pérez<br><a href="">MP</a>♣<a href="">PERFIL</a>
                                                      </div>
                                                      
                                                   </div>
                                                   
                                                </div>
                                                
                                             </div>
                                             
                                          </div>
                                          
                                       </div>
                                       
                                    </div>
                                    
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                     </center>
                     
                  </div>
                  
                  <div style="overflow: auto; height:123px;width:200px; background-color:#232323;">
                     
                     <div style="font-family: georgia; font-size: 11px; text-align: left; line-height: 120%; padding: 10px; color:#ededed;">
                         ♣ Mínimo 10 líneas de rol.<br>♣ Avatares de 135x375px<br>♣ Firmas de 500x300px<br>♣ Máximo dos cannon por usuario.<br>♣ Máximo tres cuentas por usuario. <br>♣ Se advierte spoiler de la serie en este foro.
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="overflow: auto; height:250px;width:200px; background-color:#232323; margin-bottom: 10px; margin-left: 10px;">
                     
                     <div style="padding: 3px;">
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                     <img src="http://i.imgur.com/tS8ECpE.png">
                                 </td>
                                 
                                 <td>
                                    
                                    <div style="width: 100px; background-color:#9e0c0c; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ededed;">
                                        ganador
                                    </div>
                                    
                                    <div style="width: 100px; background-color:#a59393; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ffffff;">
                                        premio ganado
                                    </div>
                                    
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                    
                                    <div style="width: 100px; background-color:#9e0c0c; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ededed;">
                                        ganador
                                    </div>
                                    
                                    <div style="width: 100px; background-color:#a59393; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ffffff;">
                                        premio ganado
                                    </div>
                                    
                                 </td>
                                 
                                 <td>
                                     <img src="http://i.imgur.com/tS8ECpE.png">
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                     <img src="http://i.imgur.com/tS8ECpE.png">
                                 </td>
                                 
                                 <td>
                                    
                                    <div style="width: 100px; background-color:#9e0c0c; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ededed;">
                                        ganador
                                    </div>
                                    
                                    <div style="width: 100px; background-color:#a59393; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ffffff;">
                                        premio ganado
                                    </div>
                                    
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                    
                                    <div style="width: 100px; background-color:#9e0c0c; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ededed;">
                                        ganador
                                    </div>
                                    
                                    <div style="width: 100px; background-color:#a59393; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ffffff;">
                                        premio ganado
                                    </div>
                                    
                                 </td>
                                 
                                 <td>
                                     <img src="http://i.imgur.com/tS8ECpE.png">
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                        <table cellspacing="0">
                           
                           <tbody>
                              
                              <tr>
                                 
                                 <td>
                                     <img src="http://i.imgur.com/tS8ECpE.png">
                                 </td>
                                 
                                 <td>
                                    
                                    <div style="width: 100px; background-color:#9e0c0c; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ededed;">
                                        ganador
                                    </div>
                                    
                                    <div style="width: 100px; background-color:#a59393; padding: 5px; font-family: georgia; font-size: 9px; text-transform: uppercase; text-align: center; line-height:90%; color:#ffffff;">
                                        premio ganado
                                    </div>
                                    
                                 </td>
                                 
                              </tr>
                              
                           </tbody>
                           
                        </table>
                        
                     </div>
                     
                  </div>
                  
                  <div style="height:123px;width:200px; background-color:#232323; margin-left: 10px;">
                     
                     <div style="font-family: georgia; font-size: 10px; text-align: justify; line-height: 120%; padding: 10px; color:#ededed;">
                         Este Skin junto con el tablón de anuncios ha sido realizado en su totalidad por el usuario <a href="http://www.oursourcecode.net/u11477"><span style="color: #9e0c0c;">MmeRockabilish</span></a> de OurSourceCode.
                     </div>
                     
                  </div>
                  
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
   
</center>
 </div>

CSS:

Código:

.panel div.mes-txt, .panel p {
font-size: 1.2em;
line-height: 1.4em;
margin-bottom: 1em;
}

Atenciosamente,
Shek

Tópico movido de 'Questões sobre aparência' para 'Questões sobre códigos'