Mudar a aparência das estatísticas

Detalhes da questão

Endereço do fórum: http://testedeskinsgoo.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Oi, estou tendo dificuldades em ajeitar as estatísticas do fórum para ficar igual ao print:

Print:


Index_Body:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><!-- END switch_user_logged_in -->
 
<br class="clear" />
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
        <div class="inner"><span class="corners-top"><span></span></span>
                <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
                        <div class="user_login_form center">
                                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                                {S_HIDDEN_FIELDS}<input class="mainoption button1" 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'" 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>
        <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
        <div class="panel introduction">
                <div class="inner"><span class="corners-top"><span></span></span>
        <!-- BEGIN message_admin_titre -->
                <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
        <!-- END message_admin_titre -->
 
        <!-- BEGIN message_admin_txt -->
                <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
        <!-- END message_admin_txt -->
                <span class="corners-bottom"><span></span></span></div>
        </div>
<!-- END message_admin_index -->
 
{CHATBOX_TOP}
{BOARD_INDEX}
<div style="padding: 5px; position: relative; margin-top: 40px;">
<!-- BEGIN disable_viewonline -->
 
        <!-- BEGIN switch_viewonline_nolink -->
        <div class="h3">{L_WHO_IS_ONLINE}</div>
        <!-- END switch_viewonline_nolink -->
 
<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<div class="enlinea">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
 
<br />
{LOGGED_IN_USER_LIST}
 
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
 
</div>
        <!-- BEGIN switch_statistics_nolink -->
        <div class="h3">{L_STATISTICS}</div>
        <!-- END switch_statistics_nolink -->
 
<div class="stats1">
{TOTAL_POSTS}
</div>
<div class="stats2">
{TOTAL_USERS}
</div>
<div class="stats3">
{NEWEST_USER}
</div>
  <div class="grupos"><table cellspacing="0"><td><div class="grup" style="background: #ECD078; margin-right: 5px;">Nombre grupo 1</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #D95B43">Nombre grupo 2</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #C02942; margin-right: 5px;">Nombre grupo 3</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #542437">Nombre grupo 4</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #53777A; margin-right: 5px;">Nombre grupo 5</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #CAE186">Nombre grupo 6</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #E5B817; margin-right: 5px;">Nombre grupo 7</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #F35B68">Nombre grupo 8</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #B31837; margin-right: 5px;">Nombre grupo 9</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #6F141D">Nombre grupo 10</div><div class="censo">00 Miembros</div></td></table> 
  </div>
        <!-- BEGIN switch_chatbox_activate -->
        <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
        <div class="page-bottom">
        {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
        {CHATTERS_LIST}<br />
        </div>
                <!-- 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 -->
        <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
</div>
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
        <div class="inner"><span class="corners-top"><span></span></span>
                <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
                        <div class="user_login_form center">
                                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                                <!-- BEGIN switch_fb_connect -->
                                <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" 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>
        <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
 
<br style="clear:both" />
 
 
{AUTO_DST}
 
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });
 
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

fonte: http://thecaptainknowsbest.tumblr.com/tagged/oscuro

Adicione ao seu CSS:

Código:

#main-content > div[style^="padding"] {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.enlinea, .stats1, .stats2, .stats3, .grupos {
    width: 33%;
    float: left;
    box-sizing: border-box;
    margin-left: 33%;
}

.enlinea {
    padding: 20px;
    border: 10px #000 solid;
    border-top-color: #7a1e48;
    border-left-color: #7a1e48;
    font-size: 12px;
}

.stats1, .stats2, .stats3 {
    padding: 15px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    background-color: #7a1e48;
    margin-top: 5px;
    width: 33%;
    float: left;
}

#i_whosonline {
    position: absolute;
}

.grupos {
    position: absolute;
    right: 0;
}

.grupos table {
    table-layout: fixed;
    width: 100%;
}

.grup, .censo {
    text-transform: uppercase;
    font-size: 12px;
    padding: 10px;
    text-align: center;
    color: #333;
    font-weight: 700;
}

.censo {
    padding: 5px 10px;
    background-color: #000;
    color: #fff;
    margin-bottom: 5px;
}

#picture_legend {
    display: none;
}

A imagem é a "Quem está online?" no Painel de controle. o/

Umas perguntas:
1) Se olhar entre as estatísticas e os grupos, vai perceber que tem coisa da antiga estatística atrás, como apago?
2) Não tem como sincronizar esses grupos com os grupos do fórum? Em número de membros, cor, nomes e quando a pessoa entrar no grupo, já dar um +1 nos números de participantes?
3) Tem como fazer com que, assim que clicar no nome do grupo, ele ser direcionado para o grupo em si?
4) Tem como deixar em português? =x
5) Tem como deixar as estatísticas de número de mensagens postadas, etc, no lugar de onde ficaria a imagem? =x

1) Não captei o que essa "coisa antiga" é. Poderia tirar uma captura de tela?
2) Os grupos acredito que consigamos colocar os do fórum. Já o número de membros não é certeza. Eu tenho que ver.
3) Yep.
4) Un momento, estoy hablando español, que diablos! ~ Sim, há como.
5) Sim.

Precisarei do seu index_body e CSS para isso. o/

Então, os grupos são os mesmos desse fórum: http://goldofolympus.forumeiros.com/ só estou tentando adiantar a próxima skin pra não enlouquecer ashuashuashu Agora vamos aos pedidos que fez:

1) Print: https://i.imgur.com/JQU0KOn.png
2) Css:

Código:

/*CSS escrito por SmokePeach para uso libre dentro de ForoActivo.
Modificaciones hechas por "Aquí va tu nombre".*/

/*Forma del foro*/
#wrap {
  background-color: #111625;
  width: 1120px;
margin-top: -5px;
margin-bottom: -50px;
  border-bottom: 25px solid #341931;
}

.forabg {
border-top-left-radius: 0px 0px;
border-top-right-radius: 0px 0px;
border-bottom-left-radius: 0px 0px;
 
}

#logo {
float: none;
padding: 0px;
}

body {
background-color:#080c17;
}

/*Botones de Foroactivo*/
.button, .button1, .button2, input.button, input.button1, input.button2, button.bbcode, #submit_button, #profile-advanced-button, #login_popup_buttons, #login_popup_buttons input, .liteoption {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
-moz-box-shadow: 0 1px 2px rgba(COLOR);
border: medium none;
color: #341931;
display: inline-block;
outline: medium none;
text-shadow: 0 1px 1px rgba(#7a1e48);
}

.button:hover, .button1:hover, .button2:hover, input.button:hover, input.button1:hover, input.button2:hover, button.bbcode:hover, #submit_button:hover, #profile-advanced-button:hover, #login_popup_buttons:hover, #login_popup_buttons input:hover, .liteoption:hover {
border: none;
color: #571b3c;
}

button.button2, .button2, #button, .fontbutton {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
-moz-box-shadow: 0 1px 2px rgba(COLOR);
border: medium none;
color: #341931;
display: inline-block;
outline: medium none;
text-shadow: 0 1px 1px rgba(#7a1e48);
}

button.button2:hover, .button2:hover, #button:hover, .fontbutton:hover {
border: none;
color: #571b3c;
}

/*Menu Top*/
a.mainmenu {
  position: relative;
  border-bottom: 0px;
  font-family: Loved by the King;
  font-size: 20px;
  color: #341931;
  font-weight: bold;
  top:0px;
}

ul.navlinks {
  position: relative;
  border-bottom: 0px;
  font-family: shadows into light;
  font-size: 20px;
  color: #341931;
  font-weight: bold;
   }
ul.linklist li a {
    position: relative;
  border-bottom: 0px;
  font-size: 12px;
  color: #341931;
cursor:allowed;
}

ul.linklist li a img:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.65;
opacity: 0.65;
position: relative;

cursor:allowed;
}

/*Pestañas de Perfil*/
#tabs a span {
-moz-border-radius: 0.5em 0.5em 0em 0em;
-moz-box-shadow: 0 1px 2px rgba(COLOR);
border: medium none;
color: #7a1e48;
display: inline-block;
outline: medium none;
text-shadow: 0 1px 1px rgba(#111625);
}

#tabs a span:hover {
background-position:center;
color: #7a1e48;
}

#tabs .activetab a span {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
-moz-box-shadow: 0 1px 2px rgba(COLOR);
border: medium none;
color: #7a1e48;
display: inline-block;
outline: medium none;
width: 95px;
}

#tabs .activetab a span:hover {
color: #111625;
}

/*Leyendas de Grupos*/
p em b a.gensmall {
 font-family: Loved by the King;
 font-size: 30px;
  font-style: none;
  font-weight: normal;
  letter-spacing: 2px;
  line-height:35px;
}

p em {
font-style: none;
color: transparent;
}

/*Nombre de Usuario*/
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
font-weight: bold;
font-size: 2em;
font-family: Loved by the King;
text-decoration: none;
letter-spacing: 1px;
  text-align: center;
}
.postprofile {
display: block;
text-align: center;
}
.postprofile dd {
text-align: left;
margin-top: 10px;
}

/*Cabecera Categorías*/
li.header {
  background-color:#341931;
  border-bottom: 10px solid #7a1e48;
  border-top: 10px solid #111625;
color: #111625;
font-family: Loved by the King;
font-size: 40px;
margin-right: -10px;
padding: 10px 10px 10px;
height: 31px;
letter-spacing: 0;
text-align: center;
}

li.header dl.icon {
font-size:15px;
color: #111625;
padding: 3px 0 10px;
text-align: center;
}


.table-title, .table-title h2 {
color: #111625;
font-family: Loved by the King;
font-size: 30px;
  text-align: right;
  letter-spacing: 1px;
}

.table-title h2, li.header dl.icon dd.dterm {
text-align: center;
}

li.header dd, li.header dt {
text-transform: none;
}

/*Imagen de Fondo de Categorías*/
ul.forums {
border-bottom: 20px solid #341931;
}

h1.page-title {
  background-color:#341931;
  border-bottom: 10px solid #7a1e48;
  border-top: 10px solid #111625;
color: #111625;
font-family: Loved by the King;
font-size: 30px;
font-weight: 700;
  height: 40px;
margin-right: 5px;
  margin-left: 5px;
  padding: 3px 10px 10px;
letter-spacing: 0;
text-align: left;
}

LastPost, Mensajes y Temas

.forabg li.row dl.icon dd.lastpost

.forabg li.header dd.lastpost {
  font-size: 20px;
  font-family: Loved by the King;
  color:#111625;
}

.forabg li.header dd.posts {
display: none;
}

.forabg li.header dd.topics {
display: none;
}

li.header dl.icon dd.lastpost{
    display: none;
}

dd.lastpost span.color-groups {/*marca el autor del post*/
background-image:url(http://i149.photobucket.com/albums/s51/SmokePeach/bgautor3_zpsbe9d7d24.png);
  background-repeat:no-repeat;
  background-position: center center;
   float: center;
   padding-left: 0px;
        padding-top:-1px;
  font-size: 18px;
  font-family: Loved by the King;
   }

dd.lastpost{
color: #bfbfbf;
  font-family:Arial;
font-size: 10px;
padding: 3px;
text-align: center;
width: 155px;
  display: block;
  padding: 3px;
  padding-top: 10px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
}


dd.topics {
background-color: #341931;
color: #bfbfbf;
width: 80px;
height: 10px;
font-size: 9px;
padding-top: -7px;
padding-bottom: 2px;
}

dd.posts {
background-color: #341931;
color: #bfbfbf;
width: 80px;
height: 10px;
font-size: 9px;
padding-top: -7px;
padding-bottom: 2px;
}


dd.views {
background-color: #341931;
color: #bfbfbf;
width: 80px;
height: 10px;
font-size: 9px;
padding-top: -7px;
padding-bottom: 2px;
}

li.header dd {
    display: none;
}

li.header dl.icon {
font-size: 25px;
color: #bfbfbf;
padding: 3px 0px 10px;
text-align: left;
}
*/

/*Fondo Descripción Foros*/
/*Para usarse se escribe dentro de la descripción de los foros \'span class="desc3" o "desc4" \'según el que quieran y cierran con \'/span\'*/
/*Desc3*/

.desc3 {
 
background-image: url(http://i149.photobucket.com/albums/s51/SmokePeach/bg5_zps96b07f6d.png);
  background-repeat:no-repeat;
  color: #d4d4d4;
  font-family: Arial;
font-size: 12px;
line-height: 11px;
  padding:10px;
display: block;
width: 350px;
height: 50px;
 
}

/*Desc alternativos*/

.desc4 {
 
background-image: url(http://i149.photobucket.com/albums/s51/SmokePeach/bg3_zpscac7c8af.png);
  background-repeat:no-repeat;
  color: #d4d4d4;
  font-family: Arial;
font-size: 12px;
line-height: 11px;
  padding:10px;
display: block;
width: 350px;
height: 100px;
 
}

.desc5 {
 
background-image: url(http://i149.photobucket.com/albums/s51/SmokePeach/bg1_zps3061a4f8.png);
  background-repeat:no-repeat;
  color: #d4d4d4;
  font-family: Arial;
font-size: 12px;
line-height: 11px;
  padding:10px;
display: block;
width: 350px;
height: 100px;
 
}

.desc6 {
 
background-image: url(http://i149.photobucket.com/albums/s51/SmokePeach/bg2-1_zpse0832d47.png);
  background-repeat:no-repeat;
  color: #d4d4d4;
  font-family: Arial;
font-size: 12px;
line-height: 11px;
  padding:10px;
display: block;
width: 350px;
height: 100px;
 
}
/*Links Internos de la descripción. Se agrega class="formdesc" al link.*/
.formdesc a:link, .formdesc a:visited, .formdesc a:active {
background-color: transparent;
color: #9d2053;
font-size: 10px;
letter-spacing: 1px;
padding: 1px;
}

.formdesc {
background-color: #341931;
display: block;
font-size: 10px;
margin-top: 10px;
padding: 3px;
text-align: center;
}

/*Titulos de los Foros Indice*/
a.forumtitle {
  border-left: 20px solid #341931;
 font-family: Loved by the King;
  text-aling: center;
font-size: 25px;
color: #341931;
  padding-left: 10px;
  padding-right: 20px;
  -webkit-transition: all .5s linear;
}
a.forumtitle:hover {
padding-left: 25px;
}

/*Titulos internos*/
a.forumlink: {
  border-left:5px solid #341931;
letter-spacing : 3px;
text-decoration: none;
color : #341931;
  -webkit-transition: all .5s linear;
}

a.forumlink: hover{
  padding-left: 5px;
color : #7a1e48;
text-transform:lowercase;
border-bottom: dotted 1px #341931;
}


a.topictitle:{
color : #341931;
border-left: solid 5px #341931;
  -webkit-transition: all .5s linear;
}

a.topictitle:hover{
text-decoration: none;
letter-spacing : 3px;
  border-left: solid 10px #341931;
}

/*Imagen de footer*/
#page-footer {
background-image: url("agregar el link de la imagen.");
background-position: bottom;
background-repeat: no-repeat;
padding-bottom: 90px;
  margin-top: 120px;
}
/*Links Footer*/
#page-footer div.navbar {
font-family: small fonts;
font-size: 12px;
text-align: center;
}
/*Spoiler, code y quote*/
dl.codebox {
background-color: #571b3c;
border:1px solid #9d2053;
    border-bottom: 10px solid #9d2053;
  color:#bfbfbf;
}

dl.codebox:hover {
border:1px dotted #9d2053;
}

dl.codebox dt {
border-bottom:1px dotted #9d2053;
display:block;
font-size:10px;
color:#bfbfbf;
margin-bottom:3px;
font-family:Arial,Helvetica,sans-serif;
}

dl.codebox code {
color:#bfbfbf;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
}

blockquote {
background-color: #571b3c;
border: 1px solid #9d2053;
  border-bottom: 10px solid #9d2053;
}

blockquote:hover {
  border: 1px dotted #9d2053;
border-bottom: 10px solid #9d2053;
}

.content blockquote {
color:#bfbfbf;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
}

/*Chatbox*/
#chatbox_header {
background: url("http://i149.photobucket.com/albums/s51/SmokePeach/BttS/backblue.jpg");
  border:2px solid #026d74;
}

body.chatbox {
   background-image: url("http://i149.photobucket.com/albums/s51/SmokePeach/BttS/backwht.jpg");
   }

.chatbox-title {
font-size:25px;
letter-spacing:2px;
  color: #602932;
font-family:Amatic SC;
font-weight:normal;
}

#chatbox_footer {
background-image: url(\'http://i149.photobucket.com/albums/s51/SmokePeach/BttS/backblue.jpg\');
}

/*Estadísticas Footer*/

.h3 {
color: #341931;
font-family: Loved by the King;
font-size: 20px;
height: 45px;
text-align: center;
width: 1100px;
  text-transform: lowercase;
}

.h3 {
font-weight: 700;
}

/*Autor de un Post*/
p.author {
 background-image:url(http://i149.photobucket.com/albums/s51/SmokePeach/bgautor_zps5b04f19d.png);
  background-repeat:no-repeat;
  background-position:center center;
 margin-top: 20px;
 padding: 3px !important;
 position: relative;
 right: -7em;
 text-align: center;
}

p.author {
 font-family: Loved by the King, Arial;
 font-size: 15px;
 line-height: 1.2em;
 margin-top: 15px;
 padding: 0 0 5px;
}

/*Widgets*/
.module .h3 {
visibility:hidden;
}

#content-container div#left {
  background-color:#111625;
  border-top: 20px solid #341931;
  border-bottom: 20px solid #341931;
margin-top: 0px;
margin-left: 5px;
}

/*Postlink*/
.postlink {
   color: #290f14;
   border-bottom-color: #389ca2;
        text-decoration: underline;
    -webkit-transition: all .5s linear;
   }
.postlink:visited {
   color: #290f14;
   border-bottom-color: #389ca2;
   }
.postlink:active {
    color: #290f14;
    }
.postlink:hover {
   background-color: #389ca2;
   color: #290f14;
  padding-left: 5px;
   }

/*Otro efecto para links.*/
.fall {
  height: 15px;
  width: 150px;
  display: block;
  font-family: Arial;
  font-size: 12px;
  color: #026d74;
  background-color: #a1e3df;
  border: 1px solid #026d74;
  border-left: 20px solid #026d74;
  padding-left: 5px;
      -webkit-transition: all .5s linear;
}

.fall:hover {
  color: #a1e3df;
  background-color: #026d74;
  border: 1px solid #a1e3df;
  border-right: 20px solid #a1e3df;
}

/*Cuadro para escribir*/
#textarea_content {
margin-top: 3px; }

.textarea {
background-color:#111625;
color:#d4d4d4;
font-family:Arial;
font-size:10px;
height:50px;
opacity:0.5;
width:170px;
}

.input{
font-size: 10px;
font-family: Arial;
background-color: #341931;
vertical-align: middle;
color: #d4d4d4;
}
/*---*/

#page-header ul.linklist li a {
-moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
background-color:#;
font-family:Loved by the King;
font-size: 25px;
  position:relative;
  top:-20px;
 
}

#page-header ul.linklist li a:hover {
text-decoration:none;
font-style: bold;
}

#search-box {
display: none;
}

/*Otro efecto para links*/
a.anuncio {
font-family:Arial;
font-size: 12px;
color: #602932;
}

a.anuncio:hover {
border-bottom: 1px dotted #c9a176;
}

.postbody .content {
background-color:#341931;
  border-top: 20px solid #7a1e48;
  border-bottom: 20px solid #080c17;
margin-top: 8px;
padding: 5px 5px 15px;
}
/*Efecto para dejar b&n una imagen. agregar \'desaturate\' como class a una imagen*/
img.desaturate { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

/*Fuentes Google agregadas*/
@font-face {
  font-family: \'Loved by the King\';
  font-style: normal;
  font-weight: 400;
  src: local(\'Loved by the King\'), local(\'LovedbytheKing\'), url(http://themes.googleusercontent.com/static/fonts/lovedbytheking/v3/wg03xD4cWigj4YDufLBSrx3iKSa3B8910aX1pHYl49U.woff) format(\'woff\');
}

@font-face {
  font-family: \'Cookie\';
  font-style: normal;
  font-weight: 400;
  src: local(\'Cookie\'), local(\'Cookie\'), url(https://fonts.googleapis.com/css?family=Cookie) format(\'woff\');
}

p {
    font-size: 1.1em;
    line-height: 1.3em;
    margin-bottom: .5em;
    width: 800px;
    text-align: justify;
    padding: 20px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
}
#page-header ul.linklist li a {
    -moz-border-radius: 5px;
    background-color: #;
    border-radius: 5px 5px 5px 5px;
    font-family: 'Cookie', cursive;
    font-size: 25px;
    position: relative;
    top: -20px;
}
#profile-tab-field-profil {
  text-transform: uppercase;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;}
 
#profile-tab-field-profil div.separator {
  border-bottom: 1px dotted #ababab;
}

#main-content > div[style^="padding"] {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}
 
.enlinea, .stats1, .stats2, .stats3, .grupos {
    width: 33%;
    float: left;
    box-sizing: border-box;
    margin-left: 33%;
}
 
.enlinea {
    padding: 20px;
    border: 10px #000 solid;
    border-top-color: #7a1e48;
    border-left-color: #7a1e48;
    font-size: 12px;
}
 
.stats1, .stats2, .stats3 {
    padding: 15px;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    background-color: #7a1e48;
    margin-top: 5px;
    width: 33%;
    float: left;
}
 
#i_whosonline {
    position: absolute;
}
 
.grupos {
    position: absolute;
    right: 0;
}
 
.grupos table {
    table-layout: fixed;
    width: 100%;
}
 
.grup, .censo {
    text-transform: uppercase;
    font-size: 12px;
    padding: 10px;
    text-align: center;
    color: #333;
    font-weight: 700;
}
 
.censo {
    padding: 5px 10px;
    background-color: #000;
    color: #fff;
    margin-bottom: 5px;
}
 
#picture_legend {
    display: none;
}

3) Index_body:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><!-- END switch_user_logged_in -->
 
<br class="clear" />
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
        <div class="inner"><span class="corners-top"><span></span></span>
                <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
                        <div class="user_login_form center">
                                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                                {S_HIDDEN_FIELDS}<input class="mainoption button1" 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'" 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>
        <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
        <div class="panel introduction">
                <div class="inner"><span class="corners-top"><span></span></span>
        <!-- BEGIN message_admin_titre -->
                <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
        <!-- END message_admin_titre -->
 
        <!-- BEGIN message_admin_txt -->
                <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
        <!-- END message_admin_txt -->
                <span class="corners-bottom"><span></span></span></div>
        </div>
<!-- END message_admin_index -->
 
{CHATBOX_TOP}
{BOARD_INDEX}
<div style="padding: 5px; position: relative; margin-top: 40px;">
<!-- BEGIN disable_viewonline -->
 
        <!-- BEGIN switch_viewonline_nolink -->
        <div class="h3">{L_WHO_IS_ONLINE}</div>
        <!-- END switch_viewonline_nolink -->
 
<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<div class="enlinea">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
 
<br />
{LOGGED_IN_USER_LIST}
 
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
 
</div>
        <!-- BEGIN switch_statistics_nolink -->
        <div class="h3">{L_STATISTICS}</div>
        <!-- END switch_statistics_nolink -->
 
<div class="stats1">
{TOTAL_POSTS}
</div>
<div class="stats2">
{TOTAL_USERS}
</div>
<div class="stats3">
{NEWEST_USER}
</div>
  <div class="grupos"><table cellspacing="0"><td><div class="grup" style="background: #ECD078; margin-right: 5px;">Nombre grupo 1</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #D95B43">Nombre grupo 2</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #C02942; margin-right: 5px;">Nombre grupo 3</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #542437">Nombre grupo 4</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #53777A; margin-right: 5px;">Nombre grupo 5</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #CAE186">Nombre grupo 6</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #E5B817; margin-right: 5px;">Nombre grupo 7</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #F35B68">Nombre grupo 8</div><div class="censo">00 Miembros</div></td></table>
  <table cellspacing="0"><td><div class="grup" style="background: #B31837; margin-right: 5px;">Nombre grupo 9</div><div class="censo" style="margin-right: 5px;">00 Miembros</div></td><td><div class="grup" style="background: #6F141D">Nombre grupo 10</div><div class="censo">00 Miembros</div></td></table> 
  </div>
        <!-- BEGIN switch_chatbox_activate -->
        <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
        <div class="page-bottom">
        {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
        {CHATTERS_LIST}<br />
        </div>
                <!-- 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 -->
        <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
</div>
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
        <div class="inner"><span class="corners-top"><span></span></span>
                <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
                        <div class="user_login_form center">
                                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                                <!-- BEGIN switch_fb_connect -->
                                <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" 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>
        <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
 
<br style="clear:both" />
 
 
{AUTO_DST}
 
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });
 
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Para a coisa antiga, adicione ao CSS:

Código:

.grupos ~ * {
    display: none;
}

Eu preciso que a senhora adicione alguém em algum grupo no fórum para verificar como ele fica na lista. o/

Pronto, adicionei e criei 3 grupos =x

Não consegui achar o grupo que a senhora adicionou alguém (se foi o de Administradores, precisa liberar a visualização da lista de membros desse grupo para usuários comuns), mas adicione a um novo Javascript com Investimento em No índice:

Código:

(function($) {
   'use strict';
   
   if (!window.sessionStorage || !/^\/$/.test(location.pathname)) {
      return;
   }
   
   var config = {
      groups: [1, 2, 3, 4, 5],
   };   
   
   var pad = function(n, width, z) {
      z = z || '0';
      n = n + '';
      return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
   }
   
   var render = function(groups) {
      var list = [];
      var html = [];
      
      for (var i = 0; i < groups.length; i += 2) {
         list.push(groups.slice(i, i + 2));
      }
      
      $.each(list, function() {
         html.push('<table cellspacing="0"><tr>');
         
         $.each(this, function() {
            html.push([
               '<td>',
               '  <div class="grup" style="background: ' + this.color + '; margin-right: 5px;">',
               '    ' + this.name,
               '  </div>',
               '  <div class="censo" style="margin-right: 5px;">',
               '    ' + pad(this.members, 2) + ' Membros',
               '  </div>',
               '</td>',
            ].join('\n'));
         });
         
         html.push('</tr></table>');
      });
      
      $('.grupos').html(html.join(''));            
   };
   
   var stored = window.sessionStorage.getItem('fa.group-count');
   
   if (stored) {
      render(JSON.parse(stored));
      return;
   }
   
   var groups = [];
   var promises = [];
   
   $.each(config.groups, function() {
      promises.push($.get('/g' + this + '-', function(context) {
         var group = {};
         var $members = $('.forumbg a[href^="/u"]', context);
         
         group.name = $('.page-title', context).text();
         group.members = $members.length - 1;
         
         if ($members.length > 1) {
            group.color = $members.eq(1).children('span').css('color');
         } else {
            group.color = '#ccc';
         }
         
         groups.push(group);
      }));
   });
   
   $.when.apply(null, promises).then(function() {
      window.sessionStorage.setItem('fa.group-count', JSON.stringify(groups));
      render(groups);
   });
}(jQuery));

Aqui você define os IDs dos grupos que aparecerão no bloco:

Código:

   var config = {
      groups: [1, 2, 3, 4, 5],
   };

Quando adicionar membros a esses grupos, as cores serão aplicadas aos blocos.

Como o tempo para que um tópico seja considerado abandonado em questões que tem como base códigos JS é reduzido à três dias: