Personalizar a parte inferior do fórum

[Showman]

Qual é minha questão:
Olá,abaixo estarei mostrando imagens de minha duvida.
Como está:
Como quero que fique:
Eu vi isto no BR Design http://br-design.forumeiros.com/# ,porém lá eles não tem Widgets no Fórum e o meu sim,portanto eu quero que fique igual,mas que não invada a area dos widgets do meu fórum,Obrigado.

Endereço do meu fórum:
http://hq-design.umforum.net

Versão do fórum:
PUNBB

[Consolado]

Olá!

Utilize esse código CSS:

Código:

ul.pun-legend{ margin-top: 10px; margin-bottom: 10px; float: right; width: 60%; padding: 5px 10px; text-align: left; background: white url(http://i36.servimg.com/u/f36/11/96/49/61/dropsh10.png) 0 -1px repeat-x; border: 1px solid #D6D6D6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 5px 0 #dcdcdc; -webkit-box-shadow: 0 2px 5px 0 #dcdcdc; box-shadow: 0 2px 5px 0 #dcdcdc;} ul.pun-legend li img{vertical-align: middle;} #pun-legend{padding-left: 0;} #pun-legend li{ width: 100%; text-shadow: 1px 1px 0 white; background: #f0f0f0; -moz-box-shadow: 0px 0px 7px 0px #dcdcdc; -webkit-box-shadow: 0px 0px 7px 0px #dcdcdc; box-shadow: 0px 0px 7px 0px #ababab; border: 1px solid white; padding-right: 0px;} ul#pun-legend li img{ margin-left: 15px; vertical-align: middle}

Painel de Controle Visualização Templates Geral index_boy
Substitua o conteúdo por esse:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<style>
  #general-stats{ width: 100%; text-shadow: 1px 1px 0 white; background: #f5f5f5; -moz-box-shadow: 0px 0px 7px 0px #dcdcdc; -webkit-box-shadow: 0px 0px 7px 0px #dcdcdc; box-shadow: 0px 0px 7px 0px #dcdcdc; border: 1px solid white;} #statistics{ vertical-align: top; padding-bottom: 15px; border-left: 1px solid white; width: 100%; float: right;} #statistics .stats-title{background: #e3e3e3;} .stats-content{ border-top: 1px solid #d9d9d9; padding: 15px;} .main-box{ background: white url(http://i36.servimg.com/u/f36/11/96/49/61/dropsh10.png) 0 -1px repeat-x; border: 1px solid #D6D6D6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 5px 0 #dcdcdc; -webkit-box-shadow: 0 2px 5px 0 #dcdcdc; box-shadow: 0 2px 5px 0 #dcdcdc} #legend{margin: 25px 0;} .groups{ background: url(http://i36.servimg.com/u/f36/11/96/49/61/custom10.png) no-repeat left; padding: 5px 0 5px 18px; float: right; margin-top: -22px;} #online{ vertical-align: top; border-right: 2px solid #d2d2d2; background: #eaeaea; width: 60%;} #online .on-title{background: #f3f3f3;} #online .on-title, #statistics .stats-title{ height: 70px; padding 0 0 0 20px; text-transform: uppercase; font-size: 30px; border-bottom: 1px solid white;} #online .on-title a, #statistics .stats-title a{ font-family: Century Gothic !important; bottom: -23px; position: relative; left: 20px;} .online-content{ border-top: 1px solid #d9d9d9; padding: 15px;} .globe, .chart{ margin-top: -3px; height: 28px; vertical-align: middle}
</style>
<div id="pun-visit" class="clearfix">
  <ul>
        <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
  </ul>
  <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
  <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
  <!-- BEGIN message_admin_titre -->
  <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
  </div>
  <!-- END message_admin_titre -->

  <!-- BEGIN message_admin_txt -->
  <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  </div>
  <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
  <div class="main-content">
<table id="general-stats" cellspacing="0" cellpadding="0"><tbody><tr><td id="online">  <div class="on-title"> <a href="/viewonline" rel="nofollow"> <img class="globe" src="http://i36.servimg.com/u/f36/11/96/49/61/earth10.png"> Quem está conectado </a> </div><div class="online-content">{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS} <br>{L_ONLINE_USERS}<br>Robôs (motores de busca) : <span style="font-family:Georgia,Verdana;"><span style="color:#1849b5">G</span><span style="color:#de3018">o</span><span style="color:#efbA00">o</span><span style="color:#1849b5">g</span><span style="color:#31b639">l</span><span style="color:#de3018">e</span></span><br><br><br></div></td><td id="statistics"><div class="stats-title"> <a href="/statistics" rel="nofollow"> <img class="chart" src="http://i36.servimg.com/u/f36/11/96/49/61/partie10.png"> ESTATÍSTICAS</a> </div><div class="stats-content">  {TOTAL_POSTS} <br>{TOTAL_USERS} <br>{NEWEST_USER}<br>{RECORD_USERS}</div></td>    </tr></tbody></table>
        <br><br><div class="main-box" id="legend"><div align="left" class="legend"><p>{LEGEND} : {GROUP_LEGEND}</p><a href="/groups" class="groups" align="right">Grupos</a>
      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
        <p class="page-bottom">
        {TOTAL_CHATTERS_ONLINE} :
        {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
              insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
        <!-- END switch_chatbox_popup -->
        </p>
      </div>
      <!-- END switch_chatbox_activate -->
  </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
  oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Feito isto, Salve e Publique .

Melhores cumprimentos.

[Showman]

Thank you,resolvido.