Como fazer um quadro personalizado no índice

Qual é minha questão:
Bem, vi que em muitos fóruns, há um quadro igual a esse: http://the-olympiansworld.forumeiros.com/ (Onde Tem novidades, nossos parceiros, etc)...

Gostaria de saber, como fazer um desses?


Endereço do meu fórum:
http://pokemonfronteira.forumeiros.com

Versão do fórum:
PHPBB2

No seu fórum, vá em Painel de controle > Visualização > Página inicial > Geral > Mensagem na Página Inicial. Nesse campo você pode inserir o HTML que quiser.

Não sei se seria do agrado do dono do fórum que houvesse um elemento igual ao do fórum dele em outro, logo, diga quais são as informações que quer ali que podemos dar uma alterada.

Abraços.

Tipo, eu gostaria de uma HTML Totalmente personalizável, não a do dono de tal fórum, apenas queria alguma coisa, que pudesse personalizar como base, aquele foi só um exemplo do jeito (o quadrado)


Obrigado

Olá e boa noite!

Queira adicionar em PA > Visualização > Página inicial > Geral > Mensagem da Homepage > este código:

Código:

<div class="mes-txt"><center>
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC"><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Marcellus+SC"><style type="text/css">.fundo {opacity: 0.0; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background: #000; color: #fff; text-align: justify; width: 300px; height: 300px; overflow: auto;} .fundo:hover { opacity: .78} #wood{width: 77px; height: 77px; position: relative; overflow: hidden; opacity: 1; margin: 2px;} #wood .stock{ -webkit-transition: 2s all ease-in-out; -moz-transition: 2s all ease-in-out;-o-transition: 2s all ease-in-out;transition: 2s all ease-in-out; position: absolute; left: 0px; bottom: 0px; width: 77px; height: 77px; opacity: 1;} #wood:hover .stock {-webkit-transition: 2S all ease-in-out; -o-transition: 2S all ease-in-out; -moz-transition: 2S all ease-in-out;transition: 2S all ease-in-out; left: -200px;}</style>
   <div style="width: 850px; height: 440px; background: #0f1319; border: 5px solid #090e16;">
      
      <div style="width: 850px; height: 20px; font-size: 25px; font-family: Marcellus SC; color: #fff; text-transform: uppercase; margin-top: 13px; ">
          Convidado, bem vindo(a) à The Olympians World!
      </div>
      
      <div style="width: 840px; height: 310px; background: #061119; border: 1px solid #090e16; margin-top: 10px;">
         
         <table>
            
            <tbody>
               
               <tr>
                  
                  <td>
                     
                     <div style="width: 300px; height: 300px; background-image: url('http://i55.servimg.com/u/f55/18/65/76/72/sem_t139.png'); margin-left: 0px; font-size: 10px; color: #191818; border: 3px solid #090e16;">
                        
                        <div class="fundo">
                           
                           <div style="font-family: Alegreya Sans SC; font-size: 20px; color: #fff; text-align: center; margin-top: 10px; text-transform: uppercase;">
                               ❝ Nossa Trama ❞
                           </div>
                            o acampamento encontrava-se há muito tempo em paz, e missões quase nunca eram requisitadas.mas como nesse mundo semideus nunca serão postos em paz, uma nuvem de perigo havia pairado sobre a vida dos semideuses.missões foram novamente requisitadas e certos semideuses e mortais se encontravam muitas vezes em momentos de perigo.alguns semideuses não acabavam voltando destas perigosas e misteriosas missões, e foi ai que quiron, que acabara por virar o diretor do acampamento suplente já que díonisio (baco) havia “pagado” sua divida para com zeus (jupíter) tomando conta dos semideuses por 100 anos, acabou solicitando alguma ajuda para os deuses e foi-lhe dito que havia algo muito errado acontecendo.antigos males estavam começando a se agitar e as coisas estavam se tornando perigosas.quiron não havia sido informado ao certo o que eram esses males, mas a confirmação deveria vir do oraculo, o qual encontrava-se insistentemente mudo. as coisas no acampamento jupíter não poderiam ser piores, já que o atual pretor governava sozinho, e acava por se tornar um completo tirano e passava seus dias em nova roma, fazendo orgias e apostando cartas, um completo inútil.os centuriões acabavam por se aventurar sozinhos com seus guerreiros paraas colinas de berkeley e oakland para proteger o acampamento de invasões, e infelizmente em uma dessas espedições o leitor de augures havia sido morto por uma empusa, o que acabava dificultando a comunicação entre o destino e o acampamento, mantendo-os cegos para o futuro.os centuriões que acabavam por ser o futuro de nova roma, acabaram por estabelecer um plano para deposição do pretor e dar um golpe de estado que o tirasse do poder. em contrapartida, existiam muitos filhos de deuses menores aparecendo de uma única vez.os mais notaveis são alguns filhos de éolo, deus dos ventos, os quais são os únicos que conseguem controlar os anemoi, causadores de tantos desastes, assim como os filhos de hécate (trivia) controlando as empusas, assistentes de sua mãe. e distante dali, a morte estava acabando de receber alguns probleminhas com essa loucura de monstros.as portas da morte estavam sobrecarregadas com a quantidade de monstros de despache e os mesmos não estavam sendo levados completamente pelo deus da morte, responsável por este feito.thanatos(orco) então avistou um garoto que havia separado de sua irmã, os dois filhos do deus da guerra.o menino chamado freddy foi arrastado para um local mais afastado por uma empusa, e a mesma se aproveitou do corpo dele, usando de seu charme e começando a sugar toda sua força vital, sem deixar escapar nada.ela quase o matou, mas o deus da morte interferiu naquele momento, acabando por levar a alma da fera para o tartaro de imediato.ele então ofereceu ao quase morto uma chance de eternidade, algo que nenhum ser humano poderia recusar.em troca, o deus queria sua alma e sua servidão pelo tempo que ele vivesse e não caisse em batalha.a única coisa que ele deveria fazer seria recrutar ceifadores para auxiliar no trabalho de ceifar almas com mais eficiencias, o que estava sobrecarregando o mesmo estes ultimos dias.
                        </div>
                        
                     </div>
                     
                  </td>
                  
                  <td>
                     
                     <div style="width: 200px; height:300px; background: #0f1319; margin-left: 0px; border: 3px solid #090e16;">
                        
                        <div style="font-family: Alegreya Sans SC; font-size: 20px; color: #fff; text-align: center; margin-top: 5px; text-transform: uppercase;">
                            ❝ Links Diretos ❞
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                           
                           <div class="links2">
                               <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t519-regras-gerais">Regras do RPG</a>
                           </div>
                           
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t400-lista-de-presentes-de-reclamacao-divina">Presentes Divinos</a>
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t466-tutorial-interpretativo">Tutorial Interpretativo</a>
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/f101-ouvidoria">Atualização e Registros</a>
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t467-caracteristicas-dos-semideuses">Caract. dos Semideuses</a>
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t427-sistematica-do-rpg">Sistemática</a>
                        </div><br>
                        <div style="width: 200px; height: 20px; background: #090e16; text-align: center; text-transform: uppercase; font-size: 10px; color: #fff">
                            <a class="postlink" href="http://the-olympiansworld.forumeiros.com/t551-o-requerimento-de-missao-o#1965">Requerimento de Missão</a>
                        </div>
                        
                     </div>
                     
                  </td>
                  
                  <td>
                     
                     <div style="width: 310px; height:150px; background: #0f1319; margin-left: 0px; margin-top: -150px; border: 3px solid #090e16;">
                        
                        <div style="font-family: Alegreya Sans SC; font-size: 20px; color: #fff; text-align: center; margin-top: 5px; text-transform: uppercase;">
                            ❝ Novidades ❞
                        </div><br>
                        <div style=" width: 310px; height:100px; background: #090e16; text-align: justify; font-size: 10px; text-transform: uppercase; color: #fff;">
                            ✖ Fiquem atentos, em breve teremos teste para filhos de POSEIDON!<br> ✖ Em breve daremos sequência à Mini-Trama, fiquem atentos! Acontecimentos importantes para o RPG está para acontecer.
                        </div>
                        
                     </div>
                     
                  </td>
                  
               </tr>
               
            </tbody>
            
         </table>
         
         <div style="width: 310px; height:145px; background: #0f1319; margin-left: 519px; margin-top: -155px; border: 3px solid #090e16;">
            
            <div style="font-family: Alegreya Sans SC; font-size: 20px; color: #fff; text-align: center; margin-top: 5px; text-transform: uppercase;">
                ❝ Nossos Parceiros ❞
            </div><br>
            <div style=" width: 310px; height:100px; background: #090e16;">
                <br><marquee onmouseout="this.start();" onmouseover="this.stop();" direction="left" behavior="scroll"><a href="http://www.zonkos.com.br/topsites/index.php?id=810"><img src="http://www.zonkos.com.br/topsites/img.php?id=810" style="width: 120px; height: 60px;"></a> <a href="http://sslf.forumeiros.com/forum"><img src="http://s5.postimg.org/af4ocjbab/BAN_ANIMADO_SSLF.gif " style="width: 120px; height: 60px;"></a> <a href="http://rpg-thehungergames.forumeiros.com/"><img src="http://img23.imageshack.us/img23/3476/5ye0.png" style="width: 120px; height: 60px;"></a> <a href="http://narniarpgonline.forumeiro.com/"><img src="http://i.imgur.com/poRuW3i.gif" style="width: 120px; height: 60px;"></a> <a href="http://www.narutothegames.com/forum"><img src="http://i.imgur.com/VMID41G.gif" style="width: 120px; height: 60px;"></a> <a href="http://www.hogwartsanime.com/"><img src="http://i.imgur.com/a86W0Aj.png" style="width: 120px; height: 60px;"></a> <a href="http://cupcakegraphics.forumeiros.com/"><img src="http://i.imgur.com/NvYBWq0.png" style="width: 120px; height: 60px;"></a><a href="http://xmutantesrpg.forumeiros.com/"><img src="http://imageshack.us/a/img5/760/ixiq.jpg" style="width: 120px; height: 60px;"></a> <a href="http://nwheroes-olympus.forumeiros.com/"><img src="http://i49.servimg.com/u/f49/17/89/52/94/untitl21.png" style="width: 120px; height: 60px;"></a> <a href="http://z7.invisionfree.com/turningJAPANESE/index.php"><img src=" http://i914.photobucket.com/albums/ac342/turning_japanese/img3.png" style="width: 120px; height: 60px;"></a> <a href="http://rpg-monsterhigh.forumeiros.com/"><img src=" http://i41.tinypic.com/vr3i4g.jpg" style="width: 120px; height: 60px;"></a> <a target="_blank" href=" http://isolemnlyswear.forumeiro.com/"><img border="0" src=" http://i55.servimg.com/u/f55/18/65/76/72/sem_t105.png" title=" I SOLEMNLY SWEAR " alt=" I SOLEMNLY SWEAR " style="width: 120px; height: 60px;"></a> <a target="_blank" href="http://lynx-editions.forumeiros.com/"><img border="0" src=" http://i.imgur.com/68FClqw.png" title=" LYNX EDITIONS " alt=" LYNX EDITIONS " style="width: 120px; height: 60px;"></a> </marquee>
            </div>
            
         </div>
         
      </div>
      
      <table>
         
         <tbody>
            
            <tr>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t147.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Dionísio <br><a href="http://the-olympiansworld.forumeiros.com/u1"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=1"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t146.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Quione<br><a href="http://the-olympiansworld.forumeiros.com/u30"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=30"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t152.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Moiras<br><a href="http://the-olympiansworld.forumeiros.com/u383"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=383"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t148.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Artemis<br><a href="http://the-olympiansworld.forumeiros.com/u166"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=166"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t149.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Ares<br><a href="http://the-olympiansworld.forumeiros.com/u105"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=105"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t150.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Atena<br><a href="http://the-olympiansworld.forumeiros.com/u10"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=10"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="margin-top: 5px;">
                     
                     <div id="wood">
                        
                        <div class="stock">
                            <img src="http://i55.servimg.com/u/f55/18/65/76/72/sem_t151.png">
                        </div>
                        
                        <div style="background: #101f2a; width: 77px; height: 77px; padding-top: 8px; font-size: 10px; text-transform: uppercase; font-family: economica; font-weight: lighter; text-align: center; color: #fff; line-height: 100%;">
                            <br><br>Afrodite<br><a href="http://the-olympiansworld.forumeiros.com/u3"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/bg-use10.png"></a> <a href="http://the-olympiansworld.forumeiros.com/privmsg?mode=post&amp;u=3"><img border="0" alt="" src="http://i55.servimg.com/u/f55/18/65/76/72/icone_11.png"></a>
                        </div>
                        
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="width: 250px; height: 77px;">
                     
                     <div style="font-family: Alegreya Sans SC; font-size: 20px; color: #fff; text-align: center; margin-top: 5px; text-transform: uppercase;">
                         ❝ Obrigado! ❞
                     </div><br>
                     <center>
                         O nosso obrigado à equipe <a rel="nofollow" target="_blank" class="postlink" href="http://lynx-editions.forumeiros.com/">Lynx Editions</a> pelo designer desenvolvido.
                     </center>
                     
                  </div>
                  
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
</center>
 </div>

Atenciosamente,
Shek

Olá Shek,

Sem sucesso... Ao aplicar este código, a pagina fica totalmente bagunçada...

O Logo fica em baixo, os menus aleatóriamente divididos pela página...

Boa tarde!

Você tem print de como ficou em seu fórum? Eu testei novamente o código e funciona!

Ah! Sim, consegui, Shek

Era um tal de '' WYSIWYG '' que estava ativado, dificultando a colocação deste quadro

Obrigado Shek ^^'