Grupos do Fórum

[Jhool]

Detalhes da questão

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

Descrição

Eu estava olhando alguns fóruns e acabei encontrando este com está separação bem legal, tentei procurar em diversos tutoriais e não consegui encontrar.

No meu fórum está assim:
http://prntscr.com/ejmznv

No outro fórum está assim:
http://prntscr.com/ejmzpx

O que eu estou procurando não é alterar toda as Estatísticas, apenas aquela barra que da uma atenção mais aos grupos
http://prntscr.com/ejmzy2

Fórum em que vi:
http://brasilplayultimate.forumeiros.com/forum

[Harleen]

Olá, me envie o Index_Body que está usando.

Até mais

[Jhool]

Código:

 {JAVASCRIPT}
    <!-- BEGIN switch_user_logged_in -->
    <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>
            <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>
      <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 -->
    <script>
      $(document).ready(function(){
    var rdtOn = $('.rdtOn strong').html();
    var lastUser = $('.lastUser strong').html();
    var totalUser = $('.totalUser strong').html();
    var totalPost = $('.totalPost strong').html();
   
   
    $('ul.statsPers').prepend('
    <li><span>'+totalPost+'</span> Total de posts</li>
    <li><span>'+totalUser+'</span> Total de membros</li>
    <li><span>'+lastUser+'</span> Membro mais novo</li>
    <li><span>'+rdtOn+'</span> Recorde de usuários online</li>
    ');
   
   
    });
    </script>
    <div id="statistics">
                      <br />
                      <ul class="statsPers">
                        <li class="statHide rdtOn">Recorde de Usuários Online: {RECORD_USERS}</li>
                        <li class="statHide lastUser">Membro Mais Novo: {NEWEST_USER}</li>
                        <li class="statHide totalUser">Membros: {TOTAL_USERS}</li>
                        <li class="statHide totalPost">Posts: {TOTAL_POSTS}</li>
                      </ul>
                  <br />
           
              </div>
    <div id="pun-info" class="main">
      <div class="statistics_head">
      <h1>{TOTAL_USERS_ONLINE}</h1>
    </div>
      <div class="main-statistics">
          <div id="onlinelist">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
            <p class="right">
                <!-- BEGIN switch_viewonline_link -->
                <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
                <!-- END switch_viewonline_link -->
                <!-- BEGIN switch_viewonline_nolink -->
                {L_WHO_IS_ONLINE}
                <!-- END switch_viewonline_nolink -->
            </p>
            <p>
            {RECORD_USERS}

            <br />
                            {LOGGED_IN_USER_LIST}
                             
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
                     
            <p>{LEGEND} : {GROUP_LEGEND}</p>
                     
          </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 -->

    {CHATBOX_BOTTOM}

    <!-- 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 -->

    <!-- 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}" />&nbsp;{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 -->
<style> /*stats*/
    #statistics {
    margin: 0 auto !important;
    text-align: center !important;
    display: table;
    background: none;
    }
    .statHide{display:none !important;}
    .statsPers li span a {
    text-decoration: none !important;
    }
    .statsPers li > span {
    display: inline-block;
    background: url('http://i71.servimg.com/u/f71/18/12/14/12/trans110.png') repeat;
    background: #262525;
    color: #fff;
    padding: 3px 7px;
    font-weight: bold;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right: 3px;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    -moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
    box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    }
    .statsPers li {
    float: left;
    color:#fff;
    margin: 2px 10px;}
.statistics_head h1 {font-size: 14px;}</style>

[Harleen]

Troque o template por esse

Código:

 {JAVASCRIPT}
    <!-- BEGIN switch_user_logged_in -->
    <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>
            <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>
      <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 -->
    <script>
      $(document).ready(function(){
    var rdtOn = $('.rdtOn strong').html();
    var lastUser = $('.lastUser strong').html();
    var totalUser = $('.totalUser strong').html();
    var totalPost = $('.totalPost strong').html();
 
 
    $('ul.statsPers').prepend('
    <li><span>'+totalPost+'</span> Total de posts</li>
    <li><span>'+totalUser+'</span> Total de membros</li>
    <li><span>'+lastUser+'</span> Membro mais novo</li>
    <li><span>'+rdtOn+'</span> Recorde de usuários online</li>
    ');
 
 
    });
    </script>
    <div id="statistics">
                      <br />
                      <ul class="statsPers">
                        <li class="statHide rdtOn">Recorde de Usuários Online: {RECORD_USERS}</li>
                        <li class="statHide lastUser">Membro Mais Novo: {NEWEST_USER}</li>
                        <li class="statHide totalUser">Membros: {TOTAL_USERS}</li>
                        <li class="statHide totalPost">Posts: {TOTAL_POSTS}</li>
                      </ul>
                  <br />
         
              </div>
    <div id="pun-info" class="main">
      <div class="statistics_head">
      <h1>{TOTAL_USERS_ONLINE}</h1>
    </div>
      <div class="main-statistics">
          <div id="onlinelist">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
            <p class="right">
                <!-- BEGIN switch_viewonline_link -->
                <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
                <!-- END switch_viewonline_link -->
                <!-- BEGIN switch_viewonline_nolink -->
                {L_WHO_IS_ONLINE}
                <!-- END switch_viewonline_nolink -->
            </p>
            <p>
            {RECORD_USERS}

            <br />
                            {LOGGED_IN_USER_LIST}
                           
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
                   
          <div id="static_group"><i class="fa fa-users" aria-hidden="true"></i> Grupos do Fórum</div>
            <p>{LEGEND} : {GROUP_LEGEND}</p>     
          </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 -->

    {CHATBOX_BOTTOM}

    <!-- 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 -->

    <!-- 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}" />&nbsp;{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 -->
<style> /*stats*/
    #statistics {
    margin: 0 auto !important;
    text-align: center !important;
    display: table;
    background: none;
    }
    .statHide{display:none !important;}
    .statsPers li span a {
    text-decoration: none !important;
    }
    .statsPers li > span {
    display: inline-block;
    background: url('http://i71.servimg.com/u/f71/18/12/14/12/trans110.png') repeat;
    background: #262525;
    color: #fff;
    padding: 3px 7px;
    font-weight: bold;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right: 3px;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    -moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
    box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    }
    .statsPers li {
    float: left;
    color:#fff;
    margin: 2px 10px;}
.statistics_head h1 {font-size: 14px;}
  #static_group {
    color: white !important;
    background-color: #3091c1;
    border-radius: 3px;
    list-style-type: none;
    width: 100%;
    border-bottom: 1px solid #3091c1;
    border-top: 1px solid #3091c1;
    font-size: 12px;
    font-weight: bold;
    margin: -8px -8px 8px;
    padding: 8px;
}
</style>

Alguma alteração?

Até mais

[Jhool]

A barra ficou encima das informações, pode puxar mais para baixo e colocar da cor #1c1f26
http://prntscr.com/ejx907

[Harleen]

É que eu fiz sem os aniversariantes...
Dentro do template procure esse CSS

Código:

#static_group {
    color: white !important;
    background-color: #3091c1;
    border-radius: 3px;
    list-style-type: none;
    width: 100%;
    border-bottom: 1px solid #3091c1;
    border-top: 1px solid #3091c1;
    font-size: 12px;
    font-weight: bold;
    margin: -8px -8px 8px;
    padding: 8px;
}

E altere por esse

Código:

#static_group {
    color: white !important;
    background-color: #1c1f26;
    border-radius: 3px;
    list-style-type: none;
    width: 100%;
    border-bottom: 1px solid #1c1f26;
    border-top: 1px solid #1c1f26;
    font-size: 12px;
    font-weight: bold;
    margin: 4px -8px 8px;
    padding: 8px;
}

Caso não queira bordas remova esses códigos

border-bottom: 1px solid #1c1f26;
border-radius: 3px;
border-top: 1px solid #1c1f26;

Resultado http://prntscr.com/ejxuoq

Até mais

[Jhool]

Resultou, obrigado !

[Kyo Panda]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".