Problema com alteração do Widget

Detalhes da questão

Endereço do fórum: http://policiagtsofc.forumeiros.com/
Versão do fórum: PunBB

Descrição

Estou com um pequeno problema no fórum. Logo abaixo, temos o código que desejo utilizar. Creio que esse código ficaria como WIDGET no fórum, entretanto, não estou conseguindo ter êxito nele.

Segue alguns print's como deveria ficar: 

Código:

<div class="best-user">
       <script>
    // Coloque o nome do usuário abaixo:
    window._best_user_username = 'bruno2321';
  </script>  <header class="best-user-header"><img class="best-user-avatar" src="http://www.habbo.com.br/habbo-imaging/avatarimage?head_direction=3&amp;direction=2&amp;gesture=sml&amp;action=sit&amp;size=l&amp;user=bruno2321"></header>  <main class="best-user-main">    <img class="best-user-img" src="https://i.imgur.com/Gvfj13a.png">    <span class="best-user-name">bruno2321</span>    </main>    
 <p class="best-user-desc" style="">
           A Diretoria do Corpo Executivo e toda a RCC gostaria de lhe parabenizar pelo excelente serviço em prol da Polícia RCC! Continue assim.          
 </p><main class="best-user-main">  </main>  <style>
    .best-user,
    .best-user::before,
    .best-user::after,
    .best-user *,
    .best-user *::before,
    .best-user *::after {
      box-sizing: border-box;
    }
  
    .best-user {
      font-family: 'Segoe UI', sans-serif;
      font-size: 13px;
      line-height: 1.5;
      color: #fff;
      width: 100%;
      border-radius: .25rem;
      background-color: #2ea3f2;
      text-align: center;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      border: solid 1px #2ea3f2;
      overflow: hidden;
    }
    .best-user-header {
      background-image: url(https://i.imgur.com/I0QMwM3.png);
      background-size: initial;
      background-position-y: 130%;
      background-position-x: -190px;
      background-repeat: no-repeat;
      padding: 0 1rem 0 1rem;
      height: 215px;
      border: none !important;
    }
    .best-user-header > img {
      display: inline-block;
    }
    .best-user-main {
      background-color: #eee;
      color: #444;
      padding: 0 1rem 1rem 1rem;
    }
    .best-user-main > img {
      max-width: 60px;
      display: block;
      margin: 0 auto;
    }
    .best-user-main > span {
      font-size: 1.9rem;
      letter-spacing: 1px;
      font-weight: 500;
      margin: 10px 0 20px 0;
      display: block;
      color: #2ea3f2;
      line-height: 1;
    }
    .best-user-main > p {
      text-align: justify;
      margin-bottom: 0;
    }
  </style>  <script>
    (function (_, window) {
      'use strict';
      
      /**
       * Não modifique a linha abaixo.
       * Só modifique o nome de usuário acima. ^
       *
       * Este nome de usuário (Dean.Santos) é um fallback necessário.
       */
      var username = window._best_user_username || 'Dean.Santos';
      
      _(function () {
        var uri = [
          'http://www.habbo.com.br/habbo-imaging/avatarimage',
          _.param({
            head_direction : '3',
            direction      : '2',
            gesture        : 'sml',
            action         : 'sit',
            size           : 'l',
            user           : username
          })
        ].join('?');
  
        _('.best-user-avatar').attr('src', uri);
        _('.best-user-name').text(username);
      });
    })(jQuery, window);
  </script>
</div>

Tento colocar esse modelo posicionado na posição de um widget. E não sei onde coloca se em: widget ou template ou css, mas preciso que fique ao lado como o fórum abaixo.
Fórum base: http://www.policiarcc.com/forum

Ué até onde eu sei a forumeiros não permite quaisquer tipo de plágio, e podi perceber que além de plagiar o template ainda tão tentando plagiar o código do fórum www.policiarcc.com copiaram sem autorização, e ate alguns documentos de autoria da RCC.

Tenho autorização.