Personalizar as aparências do fórum

[Taxy_InSaniTy]

Detalhes da questão

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

Descrição

Olá FDF. Então eu queria saber como eu troco minha Estatisticas do meu Fórum que é essa daqui > https://prnt.sc/gp7css. e botar uma Estilo essa > https://prnt.sc/gp7d92 ou deixar minha estatistica organizada

[Luiz]

Precisaremos do seu template index_body. o/

[Taxy_InSaniTy]

Aqui estar

Código:

<!-- BEGIN switch_user_logged_in -->
<link href="http://asusgames.esy.es/fonts/FontAwesome.css" rel="stylesheet">
<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">
 <div id="stats">
 <p class="right">{TOTAL_POSTS}</p>
 <p>{TOTAL_USERS}</p>
 <p>{NEWEST_USER}</p>
 </div>

      </div>
      <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"></a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
        </p>
        <p>{TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}

        <br />
        {LOGGED_IN_USER_LIST}

        {L_ONLINE_USERS}
        {L_CONNECTED_MEMBERS}<br /></p>
        <div class="clear"></div>
                      </div>
       
          <div class="legendaa"><p>{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 -->

<!-- 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}" />&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 -->

[Luiz]

Troque por esse para que possamos prosseguir:

Código:

<!-- BEGIN switch_user_logged_in -->
<link href="http://asusgames.esy.es/fonts/FontAwesome.css" rel="stylesheet">
<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}

<div class="fa-forum-stats-wrapper">
  <div class="fa-forum-stats-bar">
    <span class="total-posts"><span>{TOTAL_POSTS}</span></span>
    <span class="total-users"><span>{TOTAL_USERS}</span></span>
    <span class="newest-user"><span>{NEWEST_USER}</span></span>
  </div>
  <div class="fa-status-content">
    <header>{TOTAL_USERS_ONLINE}</header>
    <main>
      <div class="userlist">{LOGGED_IN_USER_LIST}</div>
      <div class="record">{RECORD_USERS}</div>
      <div class="logged-list">{LOGGED_IN_USER_LIST}</div>
    </main>
  </div>
  <div class="fa-status-legend">
    <header>Grupos:</header>
    <main>{GROUP_LEGEND}</main>
  </div>
</div>


{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}" />&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 -->

o/

[Taxy_InSaniTy]

Ta assim luiz > https://prnt.sc/gp8bsq

[Luiz]

Troque por este:

Código:

<!-- BEGIN switch_user_logged_in -->
<link href="http://asusgames.esy.es/fonts/FontAwesome.css" rel="stylesheet">
<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}

<div class="fa-forum-stats-wrapper">
  <div class="fa-forum-stats-bar">
    <span class="total-posts"><span>{TOTAL_POSTS}</span></span>
    <span class="total-users"><span>{TOTAL_USERS}</span></span>
    <span class="newest-user"><span>{NEWEST_USER}</span></span>
  </div>
  <div class="fa-status-content">
    <header>{TOTAL_USERS_ONLINE}</header>
    <main>
      <div class="userlist">{LOGGED_IN_USER_LIST}</div>
      <div class="record">{RECORD_USERS}</div>
    </main>
  </div>
  <div class="fa-status-legend">
    <header>Grupos:</header>
    <main>{GROUP_LEGEND}</main>
  </div>
</div>


{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}" />&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 -->

[Taxy_InSaniTy]

ta assim agora > https://prnt.sc/gp8f47 se Botar mais um pouco separado acho que da pra manter no fórum

[Luiz]

Adicione ao final de seu CSS:

Código:

.fa-forum-stats-wrapper,
.fa-forum-stats-wrapper * {
  box-sizing: border-box;
}

.fa-forum-stats-bar {
  background-color: #00c7e3;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px;
}

.fa-forum-stats-bar > span::after {
  text-transform: uppercase;
  color: #fff;
  font-size: 15px;
  margin-left: 6px;
  font-family: "Trebuchet MS", "Arial", "Helvetica", "Segoe UI", sans-serif;
}

.fa-forum-stats-bar > .total-posts::after {
  content: "Mensagens Postadas";
}

.fa-forum-stats-bar > .total-users::after {
  content: "Usuários Registrados";
}

.fa-forum-stats-bar > .newest-user::after {
  content: "Membro mais novo";
}

.fa-forum-stats-bar > span > span {
  font-size: 0;
}

.fa-forum-stats-bar > span > span > strong,
.fa-forum-stats-bar > span > span > a {
  font-size: 13px;
  background-color: #fff;
  padding: 7px 16px;
  display: inline-block;
  border-radius: 3px;
}

.fa-status-content {
  padding: 15px;
  border: solid 1px #ddd;
  border-left: solid 3px #00c7e3;
  border-radius: 3px;
  margin-top: 10px;
  line-height: 25px;
  box-shadow: inset 0 0 1px rgba(0, 199, 227, 0.53);
}

.fa-status-legend {
  border: solid 1px #ddd;
  margin-top: 10px;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
}

.fa-status-legend > header {
  background-color: #00c7e3;
  padding: 10px;
  font-size: 14px;
  color: #fff;
}

.fa-status-legend > main {
  padding: 15px 10px;
}

O resultado será:
-> http://prntscr.com/gp8j1t

Fiz com base na paleta de cores do seu fórum, espero que goste.

[Taxy_InSaniTy]

Pohha te pika msm, Obg luiz nmrl msm ajudou bastante..


Outra coisa poderia me ajudar no codigo aki.

Seguinte.

1- Botei CSS+JV = Membro do MÊS IPB E Ficou assim > https://prnt.sc/gp8kzq mas era pra estar assim > https://i.imgur.com/eoWEqrs.png poderia me ajudar?

Outro que é no "Ultimos Assuntos"

Seguinte.

1- Botei o code de "Ultimos Assuntos" e deu esse resultado > https://prnt.sc/gp8lwy na parte onde estar marcado de vermelho era pra tar a Imagem do Membro, mas infelizmente não estar, como faço pra botar? ou seila poderia me ajuda..

é coisa rapida, neste topico msm

[Luiz]

Nesse caso, você deve abrir outro tópico, dado que só é permitida uma questão por tópico.
Posso considerar este como resolvido? o/

[Taxy_InSaniTy]

Pode sim Luiz, obg, vou abrir outro topico, espero que me ajude

[Luiz]

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