Últimos assuntos em página html personalizada

Detalhes da questão

Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá! Gostaria de saber se é possível incluir o Widget de últimos assuntos em uma página de html personalizada que um membro do FdF forneceu neste tópico: https://ajuda.forumeiros.com/t113463-pagina-inicial-personalizada-html#802238

O código final foi esse:

Código:

<!--  -------------- Todos os créditos Reservados ---------------  -->
<!--  -------------- Feito por iPrompt - FDF ---------------------  -->
<!--  -------------- Não retirar os créditos por favor -----------  -->  <meta charset="UTF-8" /><title>Naruto Rikudou</title>  
<div class="barra">
  <span>
  </span>
  <p style="">
      <a href="”register”">Cadastre-se</a>. Já é registrado? <a href="login">Faça seu login</a>
  </p><span></span>
</div>
 
<div style="" class="main-header__logo">
                    
  <center>
        <img class="header-logo" alt="Naruto Rikudou" src="https://i.imgur.com/wHHv814.png" style="width: 300px;margin-left: 0px;" />
  </center>
</div>
          
<div id="ultassunto">
              
  <div class="boxult">
                <img src="imagem" alt="" />          <span>Último assuntos</span>            
  </div>
              
  <div class="container">
                      
      <div id="id4">
                            
        <div class="box">
                      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          
            <center>
                  <span>Fórum</span>
            </center>
                                
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Solicitações</span>
            </center>
                        
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Off-topic</span>
            </center>
                          
        </div>
                        
      </div>
                      
      <div id="id2">
                            
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Regras</span>
            </center>
                      
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Assembleia</span>
            </center>
                          
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Podcast</span>
            </center>
                      
        </div>
                        
      </div>
                      
      <div id="id3">
                        
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Registros</span>
            </center>
                        
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />      
            <center>
              <span>Mundo</span>
            </center>
                      
        </div>
                                      
        <div class="box">
            <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
" alt="" /></a>          <img src="imagem" alt="" />    
            <center>
              <span>Parceiros</span>  
            </center>
                    
        </div>
                        
      </div>
        
  </div>
                  <footer>  </footer>
  <p style="display: block;
  position: absolute;
  bottom: -30;
  width: 65%;
  opacity: 0.6;">
      Todos direitos reservados / Feito Exclusivo a Naruto Rikudo RPG / 2019 - 2019
  </p><footer></footer>            <style>
footer {
  display: block;
  position: absolute;
  bottom: -30;
  width: 65%;
  opacity: 0.6;
}
 
#ultassunto {
  width: 36%;
  margin: 1rem auto;
  background: transparent;
  background-size: cover;
  display: flex;
}
.boxult {
 width: 240px;
    margin-left: 490px!important;
    height: 420px;
    box-sizing: border-box;
    padding: 1rem;
    margin: 1rem;
    text-align: center;
    position: absolute;
    border-radius: 10px;
    color: white;
    z-index: 2;
    background-color: #1b1f2f;
    margin-top: 30px!important;
}
 
 
#id4
{
  float:left;
}
#id3
{
  float:left;
}
body {
background: url('https://images5.alphacoders.com/673/thumb-1920-673682.png') no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
display: block;
}
 
#container img {float:left}
.container {
    width: 30%;
    margin-left: -140px!important;
    margin: 1rem auto;
    background: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background-size: cover;
}
.box {
  width: 140px;
  height: 130px;
  box-sizing: border-box;
  padding: 1rem;
  margin: 1rem;
  position: relative;
  border-radius: 10px;
  color: white;
  z-index: 2;
  background-color: #1b1f2f;
}
#id3
{
  float:right;
}
 
.barra {
background-color: black;
  position: relative;
  left: 0;
  float: right!important;
  right: 0;
  height: 45px;
  margin-top: -9px;
  width: 390px;
  border-bottom-left-radius: 16px;
color: white!important;
}
 
div p{
float:right;
  font-size: 20px;
  margin-top: -5px;
padding: 15px;
  display: block;
  position: absolute;
 
}
 
 
</style>
</div>

A ideia é que o Widget fique aonde tem um quadro que está intitulado "Últimos assuntos", como na imagem: https://i.imgur.com/O1GnB95.jpg

A página está cadastrada como: http://rikudourpg.forumeiros.com/h1-pagina-inicial-construcao

Obrigado desde já!!!!!! Vocês são top

Olá @Zênite,
Mude a sua página para a seguinte:

Código:

<!--  -------------- Todos os créditos Reservados ---------------  -->
<!--  -------------- Feito por iPrompt - FDF ---------------------  -->
<!--  -------------- Não retirar os créditos por favor -----------  -->
<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Naruto Rikudou</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>
        footer {
        display: block;
        position: absolute;
        bottom: -30;
        width: 65%;
        opacity: 0.6;
        }
        #ultassunto {
        width: 36%;
        margin: 1rem auto;
        background: transparent;
        background-size: cover;
        display: flex;
        }
        .boxult {
        width: 240px;
        margin-left: 490px!important;
        height: 420px;
        box-sizing: border-box;
        padding: 1rem;
        margin: 1rem;
        text-align: center;
        position: absolute;
        border-radius: 10px;
        color: white;
        z-index: 2;
        background-color: #1b1f2f;
        margin-top: 30px!important;
        }
        #id4 {
        float:left;
        }
        #id3 {
        float:left;
        }
        body {
        background: url('https://images5.alphacoders.com/673/thumb-1920-673682.png') no-repeat;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        padding: 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        display: block;
        }
        #container img {float:left}
        .container {
        width: 30%;
        margin-left: -140px!important;
        margin: 1rem auto;
        background: transparent;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        background-size: cover;
        }
        .box {
        width: 140px;
        height: 130px;
        box-sizing: border-box;
        padding: 1rem;
        margin: 1rem;
        position: relative;
        border-radius: 10px;
        color: white;
        z-index: 2;
        background-color: #1b1f2f;
        }
        #id3
        {
        float:right;
        }
        .barra {
        background-color: black;
        position: relative;
        left: 0;
        float: right!important;
        right: 0;
        height: 45px;
        margin-top: -9px;
        width: 390px;
        border-bottom-left-radius: 16px;
        color: white!important;
        }
        div p{
        float:right;
        font-size: 20px;
        margin-top: -5px;
        padding: 15px;
        display: block;
        position: absolute;
        }
      </style>
  </head>
  <body>
      <script type="text/javascript">
      (function($) {
      'use strict';
      $(function() {
      $('.subject-last-load').load('/forum .lastsubjects');
      });
      }(jQuery));
    </script>
      <div class="barra">
      <span>
      </span>
      <p style="">
      <a href="”register”">Cadastre-se</a>. Já é registrado? <a href="login">Faça seu login</a>
      </p><span></span>
      </div>
      <div style="" class="main-header__logo">
      <center>
      <img class="header-logo" alt="Naruto Rikudou" src="https://i.imgur.com/wHHv814.png" style="width: 300px;margin-left: 0px;" />
      </center>
      </div>
      <div id="ultassunto">
      <div class="boxult">
      <img src="imagem" alt="" />          <span>Último assuntos</span>     
      <div class="subject-last-load"></div>
      </div>
      <div class="container">
      <div id="id4">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>         
      <center>
      <span>Fórum</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Solicitações</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Off-topic</span>
      </center>
      </div>
      </div>
      <div id="id2">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Regras</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Assembleia</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Podcast</span>
      </center>
      </div>
      </div>
      <div id="id3">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Registros</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />     
      <center>
      <span>Mundo</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://img.artpal.com/96228/9-13-48t.jpg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />   
      <center>
      <span>Parceiros</span> 
      </center>
      </div>
      </div>
      </div>
      <footer>  </footer>
      <p style="display: block;
      position: absolute;
      bottom: -30;
      width: 65%;
      opacity: 0.6;">
      Todos direitos reservados / Feito Exclusivo a Naruto Rikudo RPG / 2019 - 2019
      </p><footer></footer>   
      </div>
      </body>
      </html>

Cordialmente,
pedxz.

Olá!

O widget funcionou, porém, ele não está se comportando como o da página do fórum (com barra de scroll e o botão de atualização), vide a imagem: https://i.imgur.com/VBwtvuN.png

E a mudança desestabilizou os créditos e os botões, colocando as palavras para fora das caixas.

Há como modificar isso?

Obrigado desde já e até!

Up, passou um tempo