Grupos com design diferente

Detalhes da questão

Endereço do fórum: http://cjrpg.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Ola!!! Alguém saberia como deixar os grupos do fórum parecidos com a imagem?



Grato!!!

Olá como vai?

Adicione os seguintes códigos
Painel de Controle Visualização Imagens e Cores Cores, na aba Folha de estilo CSS

Código:

@font-face {
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: local('Unica One'), local('UnicaOne-Regular'), url(http://fonts.gstatic.com/s/unicaone/v4/z3VYemEbD7zsQFQLG6g3Sj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Estadisticas del Foro*/
#es-cuerpo {
  background: #fafafa;
  border: 3px double #65737A;
  padding: 10px;
}
 
#es-rec, #es-leye {
  background: #fff;
  width: 415px;
  height: 150px;
  overflow: auto;
  display: inline-block;
  padding: 10px;
}
 
#es-tit, #leye-tit {
  width: 425px;
  padding: 5px;
  background: #65737A;
  margin-top: -10px;
  margin-left: -10px;
  line-height: 20px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #F3F2ED;
  font-family: 'Unica One';
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-weight: lighter;
}
 
#es-leye {
  width: 852px;
  height: auto;
  margin-left: 2px;
  margin-top: 3px;
}
 
#leye-tit {
  width: 862px;
  margin-bottom: 10px;
}
 
#es-recp {
  width: 429px;
  padding: 3px;
  background: #BDB78C;
  margin-left: -10px;
  line-height: 15px;
  font-size: 7px;
  font-family: 'verdana';
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-weight: lighter;
}
 
#page-body p.page-bottom {
  width: 285px;
  padding: 5px 2px;
  background: #fff;
  margin-left: 2px;
  line-height: 15px;
  font-size: 8px;
  font-family: 'verdana';
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-weight: lighter;
  display: inline-block;
}
#ley1, #ley2, #ley3, #ley4, #ley5, #ley6, #ley7, #ley8, #ley9, #ley10, #ley11, #ley12, #ley13, #ley14, #ley15, #ley16, #ley17, #ley18 {
  width: 142px;
  margin: 1px;
  padding: 8px;
  line-height: 10px;
  font-size: 8px;
  font-family: 'Verdana';
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
}
 
#ley1 { border: 3px double #A38034; }
#ley2 {border: 3px double #51AC74; }
#ley3 {border: 3px double #4E7A9F; }
#ley4 {border: 3px double #DCB34E; }
#ley5 {border: 3px double #AF6C77; }
#ley6 {border: 3px double #333333; }
#ley7 {border: 3px double #333333; }
#ley8 {border: 3px double #333333; }
#ley9 {border: 3px double #333333; }
#ley10 {border: 3px double #333333; }
#ley11 {border: 3px double #333333; }
#ley12 {border: 3px double #333333; }
#ley13 {border: 3px double #333333; }
#ley14 {border: 3px double #333333; }
#ley15 {border: 3px double #333333; }
#ley16 {border: 3px double #333333; }
#ley17 {border: 3px double #333333; }
#ley18 {border: 3px double #333333; }
 
#ley1 a {color: #A63C40; }
#ley2 a {color: #8F8C66; }
#ley3 a {color: #BDB86B; }
#ley4 a {color: #DCB34E; }
#ley5 a {color: #AF6C77; }
#ley6 a {color: #333333; }
#ley7 a {color: #333333; }
#ley8 a {color: #A63C40; }
#ley9 a {color: #A63C40; }
#ley10 a {color: #A63C40; }
#ley11 a {color: #A63C40; }
#ley12 a {color: #A63C40; }
#ley13 a {color: #A63C40; }
#ley14 a {color: #A63C40; }
#ley15 a {color: #A63C40; }
#ley16 a {color: #A63C40; }
#ley17 a {color: #A63C40; }
#ley18 a {color: #A63C40; }

Depois painel de Controle Visualização Templates index_body

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<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}
 
<!-- BEGIN disable_viewonline -->
<div id="es-cuerpo">
  <table><tr>
    <td><div id="es-rec"><div id="es-tit">Conectados</div>
      <div id="es-recp">{TOTAL_USERS_ONLINE}</div>
      {LOGGED_IN_USER_LIST}
      </div></td>
 
    <td><div id="es-rec"><div id="es-tit">Últimos Conectados</div>
      <div id="es-recp">{RECORD_USERS}</div><br />
      {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}<br />
      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
      </div></td></tr></table>
  <div id="es-esta">
        <p class="page-bottom">{TOTAL_POSTS}</p>
        <p class="page-bottom">{TOTAL_USERS}</p>
        <p class="page-bottom">{NEWEST_USER}</p>
  </div>
 
  <div id="es-leye"><div id="leye-tit">Grupos</div>
    <div id="ley1"><a href="link">Administradores</a></div>
    <div id="ley2"><a href="link">Ex-Staff</a></div>
    <div id="ley3"><a href="link">Deuses</a></div>
    <div id="ley4"><a href="link">Campistas com Restrição</a></div>
    <div id="ley5"><a href="link">Exército Titânico</a></div>
    <div id="ley6"><a href="link">Espíritos da Natureza</a></div>
    <div id="ley7"><a href="link">Aprendizes de Circe</a></div>
    <div id="ley8"><a href="link">Pretores</a></div>
    <div id="ley9"><a href="link">Áugure</a></div>
    <div id="ley10"><a href="link">Centuriões</a></div>
    <div id="ley11"><a href="link">I Coorte</a></div>
    <div id="ley12"><a href="link">II Coorte</a></div>
    <div id="ley13"><a href="link">III Coorte</a></div>
    <div id="ley14"><a href="link">IV Coorte</a></div>
    <div id="ley15"><a href="link">V Coorte</a></div>
    <div id="ley16"><a href="link">Legados</a></div>
    <div id="ley17"><a href="link">Amazonas</a></div>
    <div id="ley18"><a herf="link">Probatio</a></div>
  </div>
</div>
 
 
 
<div class="clear"></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 -->
 
{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" />
 
<!-- 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 -->
 
{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 -->

Salve e publique.

Painel de Controle Módulos Html & JavaScript Gestão dos códigos JavaScript, crie um novo JavaScript com investimento no índice

Código:

$(function(){
      $("div.h3 a[href='/statistics']").text("Estatísticas");
      $("div#main-content p.page-bottom").each(function(){
          $(this).html($(this).html()
            .replace("Os nossos membros postaram um total de", "Contamos")
            .replace("mensagens", "Mensagens.")
            .replace("Temos", "Somos")
            .replace("usuários registrados", "membros")
            .replace("O último usuário registrado atende pelo nome de", "Boas-vindas: "));
      }); 
  });

Ficará assim http://prntscr.com/ee6ock

Está com o fundo branco... me informe as cores que deseja (dos grupos, do fundo dos grupos e do fundo da estatísticas) para que eu possa fazer a personalização.

Até mais