Detalhes da questão

Endereço do fórum: https://testesf.forumeiros.com/
Versão do fórum: AwesomeBB

Descrição

Suporte. boa tarde!

Gostaria de modificar a parte de usuários online, os grupos do fórum e aniversariantes, eu gostaria que ficasse dessa forma: https://prnt.sc/10mmnvq

Aonde eu vi: https://cmoblet.forumeiros.com/

Olá,  @Ph1liphe !

Altere seu index_body para:

Código:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <!-- 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 -->
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
   <div class="block">
             <div class="stats-tabs">
                 
                  <input id="tab1" type="radio" name="tabs" checked>
                  <label for="tab1">Usuários</label>
               
                  <input id="tab2" type="radio" name="tabs">
                  <label for="tab2">Aniversários</label>
               
                  <input id="tab3" type="radio" name="tabs">
                  <label for="tab3">Grupos</label>
               
                  <section id="content1">
                    <p>
                      {TOTAL_USERS_ONLINE}
                    </p>
                    <p>
                      {RECORD_USERS}
                    </p>
                    <p>
                      {LOGGED_IN_USER_LIST}
                    </p>
                    <p>
                      {L_CONNECTED_MEMBERS}
                    </p>
                  </section>
               
                  <section id="content2">
                    <p>
            {L_WHOSBIRTHDAY_TODAY}
                    </p>
                    <p>
                      {L_WHOSBIRTHDAY_WEEK}
                    </p>
                  </section>
               
                  <section id="content3">
                    <p>
                      <div class="legend">{GROUP_LEGEND}</div>
                    </p>
                  </section> 
             </div>
   </div>

   <!-- BEGIN switch_chatbox_activate -->
      <div class="block">
         <div class="h3">
            <a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
            <!-- 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 -->
         </div>
         {TOTAL_CHATTERS_ONLINE}:&nbsp;{CHATTERS_LIST}
      </div>
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}
                   
<div class="stat-card">
  <title-stat>Militares registrados</title-stat>
  <i class="fas fa-users"></i>
  {TOTAL_USERS}
</div>
<div class="stat-card">
  <title-stat>Máximo de militares online</title-stat>
  <i class="fas fa-user-clock"></i>
  {RECORD_USERS}
</div>
<div class="stat-card">
  <title-stat>Novo Militar</title-stat>
  <i class="fas fa-child"></i>
  {NEWEST_USER}
</div>

E adicione em seu CSS:

Código:

/*** ESTATÍSTICAS
======================================= ***/
 
.block { background-color: #fff; }
 
.block a:link,
.block a:visited {
    color: #444;
}
 
.block .h3 {
    font-size: 20px;
    border: none;
}
 
.block .h3 i {
    height: 28px;
    line-height: 30px;
    margin-right: 10px;
    color: #4F793E;
}
 
.stats-tabs br { display: none; }
 
.stats-tabs section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
 
.stats-tabs input { display: none; }
 
.stats-tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}
 
.stats-tabs label:before {
  font-family: "Font Awesome 5 Free";
  margin-right: 10px;
}
 
.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }
 
.stats-tabs label:hover {
  color: #789;
  cursor: pointer;
}
 
.stats-tabs input:checked + label {
  color: #4F793E;
  border: 1px solid #abc;
  border-top: 2px solid #4F793E;
  border-bottom: 1px solid #fff;
}
 
.stats-tabs #tab1:checked ~ #content1,
.stats-tabs #tab2:checked ~ #content2,
.stats-tabs #tab3:checked ~ #content3 { display: block; }
 
@media screen and (max-width: 800px) {
  .stats-tabs label {
    font-size: 0;
  }
  .stats-tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}
 
@media screen and (max-width: 500px) {
  .stats-tabs label {
    padding: 15px;
  }
}
 
.block .legend { font-size: 0px; }
 
.block .legend b a {
    font-size: 13px;
    font-weight: 600;
}
 
.block .legend b a::after {
    content: ", ";
    font-weight: 400;
    color: #000;
}
 
.block .legend b:last-child a::after { content: ""; }
 
.stat-card {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    color: #444;
    font-size: 0;
    float: left;
    height: 75px;
    padding: 15px;
    width: 23%;
    margin-right: 34px;
    text-align: right;
}
 
.stat-card:last-child { margin-right: 0; }
 
.stat-card title-stat {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.stat-card strong {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #02730A
}
 
.stat-card i {
    float: left;
    font-size: 40px;
    color: #02730A;
    margin-top: -13px;
    margin-bottom: -30px;
}

.gensmall, .input-subtle, .inputbox, select {
    background-color: transparent;
    border-bottom: 0px solid rgba(0,0,0,0.25);
    border-radius: 0!important;
    clear: both;
    display: block;
    font-size: 13px;
    margin-bottom: 11px;
    max-width: 300px;
    width: 100%;
}

Fico feliz que tenha gostado do meu fórum, rsrs.

@-Xerox- Seu fórum tá da hora.

Então cara, coloquei todos os códigos, porém, ficou dessa forma.

http://prnt.sc/10pci17

Não sei se tem a ver com a versão do fórum, sei lá.

Olá @Ph1liphe

Vamos começar assim, apague o CSS que foi enviado pelo meu amigo @-Xerox- e modifique o seguinte códigos:

Modifique seu index_body para o seguinte:

Código:

<main id="index">
    <div class="main-inner">
        <!-- BEGIN message_admin_index -->
        <div class="block introduction">
            <!-- BEGIN message_admin_titre -->
            <div class="block-header">{message_admin_index.message_admin_titre.MES_TITRE}</div>
            <!-- END message_admin_titre -->
 
            <!-- BEGIN message_admin_txt -->
            <div class="block-content">{message_admin_index.message_admin_txt.MES_TXT}</div>
            <!-- END message_admin_txt -->
        </div>
        <!-- END message_admin_index -->
 
        {CHATBOX_TOP}
        {BOARD_INDEX}
        {CHATBOX_BOTTOM}
    </div>
</main>
 
<!-- BEGIN disable_viewonline -->
<aside id="sidebar2" class="sidebar-home" style="margin-top: 0%;">
    <div class="block">
        <div class="stats-tabs">
            <input id="tab1" type="radio" name="tabs" checked />
            <label for="tab1">USUÁRIOS</label>
            <input id="tab2" type="radio" name="tabs" />
            <label for="tab2">ANIVERSÁRIOS</label>
            <input id="tab3" type="radio" name="tabs" />
            <label for="tab3">GRUPOS</label>
            <section id="content1">
                <p>
                    {TOTAL_USERS_ONLINE}
                </p>
                <p>
                    {RECORD_USERS}
                </p>
                <p>
                    {LOGGED_IN_USER_LIST}
                </p>
                <p>
                    {L_CONNECTED_MEMBERS}
                </p>
            </section>
            <section id="content2">
                <p>
                    {L_WHOSBIRTHDAY_TODAY}
                </p>
                <p>
                    {L_WHOSBIRTHDAY_WEEK}
                </p>
            </section>
            <section id="content3">
                <p>
                <div class="legend">{GROUP_LEGEND}</div>
                </p>
            </section>
        </div>
    </div>
</aside>
<!-- END disable_viewonline -->
 
<script type="text/javascript">
    $(document).ready(function() {
        if (!$('#sidebar').length) {
            $('#index').css('margin', 0);
        }
    });
</script>

E modifique o código anterior de folha de estilo CSS, para esse:

Código:

/*** ESTATÍSTICAS
======================================= ***/
a.gensmall {    
    border: none;
}
.block {
width: 100%;
display: block;
float: left;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);
font-size: 13px;
padding: 16px;
}
.block a:link,.block a:visited {
color: #444;
}
.block .h3 {
font-size: 20px;
border: none;
}
.block .h3 i {
height: 28px;
line-height: 30px;
margin-right: 10px;
color: #fff;
}
.stats-tabs br {
display:none;
}
.stats-tabs section {
display: none;
padding: 20px 0 0;
}
.stats-tabs input {
display: none;
 }
.stats-tabs label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #A0B8B5;
}
.stats-tabs label:before {
font-family: "Font Awesome 5 Free";
margin-right: 10px;
}
.stats-tabs label[for*='1']:before { content: '\f0c0'; }
.stats-tabs label[for*='2']:before { content: '\f1fd'; }
.stats-tabs label[for*='3']:before { content: '\f187'; }

.stats-tabs label:hover {
color: darkcyan;
cursor: pointer;
}
.stats-tabs input:checked + label {
color: darkcyan;
border-top: 2px solid darkcyan;
border-left: 1px solid #A0B8B5;
border-right: 1px solid #A0B8B5;
border-bottom: 1px solid #fff;
}
.stats-tabs #tab1:checked ~ #content1,.stats-tabs #tab2:checked ~ #content2,.stats-tabs #tab3:checked ~ #content3 { display: block;}

@media screen and (max-width: 800px) {.stats-tabs label {font-size: 0;}
.stats-tabs label:before {margin: 0;font-size: 18px;}}
@media screen and (max-width: 500px) {.stats-tabs label {padding: 15px;}}
.block .legend {
font-size: 0px;
}
.block .legend b a {
font-size: 13px;
font-weight: 600;
}
.block .legend b a::after {
content: ", ";
font-weight: 400;
color: #fff;
}
.block .legend b:last-child a::after { content: ""; }

.block .legend {
display: inline-flex;
white-space:break-spaces;
}

#content1, #content2 {
line-height: 3;
}
.stats-tabs section {
border-top: 1px solid #A0B8B5
;}


E veja se surtiu efeito.

Aguardando resposta,
Atenciosamente, Wusthy

Pode fechar