Bine a-ti venit pe fraNNNta-Design


Statistici forum fara javascript
mr.franta OnlineOffline
Rank: fondator
mr.franta
Respect : 100%
Mesaje : 4057
Inscris : 18/06/2011
Da a-ti cititi bine se pot face statistici destul de reusite si fara javascript.
Demo:
Statistici forum fara javascript Statis10
Cum reusim?Foarte simplu,urmati-mi instructiunile si explicatiile de mai jos.

In index_body cautati si stergeti acest cod:

Cod:
<!-- 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 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>{TOTAL_USERS_ONLINE}<br />
 {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 -->

Il inlocuiti cu acesta:

Cod:

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">
          <br />
     <center>
          <div class="total_post">{TOTAL_POSTS}<strong class="posts">total posts</strong></div>
          <div class="total_users">{TOTAL_USERS}<strong class="posts">members</strong></div>
          <div class="newest_user">{NEWEST_USER}<strong class="posts">newest user</strong></div>
            <div class="record">{RECORD_USERS}<strong class="posts">total users conected</strong></div>
</center>
        <table class="statistici" width="100%" border="0" cellpading="0" cellspacing="0">
          <tr>
            <td class="who" align="center" valign="center" width="42"><i class="fa fa-paperclip"></i></td>
              <td class="who_is" align="left" valign="center">{TOTAL_USERS_ONLINE}</td>
              </tr>
          <tr>
          <td class="log" align="center" valign="center" width="42"><i class="fa fa-area-chart"></i></td>
 <td class="log_is" align="left" valign="center">{LOGGED_IN_USER_LIST}</td>
          </tr> <tr>
          <td class="legenda" align="center" valign="center" width="42"><i class="fa fa-pie-chart"></i></td>
     <td class="legenda" align="left" valign="center">{LEGEND} : {GROUP_LEGEND}</td>
          </tr>
          </table>

 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} :&nbsp;
 {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 -->


Salvati si publicati template-ul.

Acum el va arata in felul urmator.

Statistici forum fara javascript Stats10

Bun.
Ce facem in continuare?
Dupa cum observati in template sau pe forum exista un scris gros si unul normal.
Ceea ce urmeaza este ca scrisul normal sa dispara si sa ramana doar cel gros (cu bold).
Ce voi scrie mai jos este un exemplu,va voi da mai tarziu codul css,momentan va explic ce am facut.
In template-ul original gasim acest cod {TOTAL_POST} in care el pe forum va scrie asa: Membri nostri au postat un numar de 377 mesaje (dupa cum se vede in poza si text 377 este cu bold.
Ce am facut eu in acest caz?
Am mai adaugat inca un text cu bold in plus pentru a putea ascunde text-ul care mi sa parut prea obisnuit si lung,pe deasupra toti vrem ceva mai deosebit.

Asa ca {TOTAL_POST} i-am adaugat o clasa si un text in plus.

Cod:
 <div class="total_post">{TOTAL_POSTS}<strong class="posts">total posts</strong></div>

 Vedeti in cod text-ul pus in plus de mine cu text



Apoi m-am apucat de treaba.
Am pus in css:


.total_post{
display: inline-block;
text-align: center;
font-size: 0px!important;
}


Dupa care logic ca nu se mai vede niciun text.

Trebuie sa afisam si text-ul gros nu?

.total_post strong{
font-size: 12px!important;
display: block;
}

Restul au fost decat modificari de design


Codul css complet pentru statistici:

Cod:


.total_post, .total_users, .newest_user, .record{
  display: inline-block;
  min-width: 140px;
  margin: 0px 4px;
  padding: 4px 4px;
  font-size: 12px;
  text-align: center;
    background: #fff url(https://i.servimg.com/u/f36/11/96/49/61/backgr10.png) repeat-x!important;
    background-color: #fff!important;
    background-repeat: repeat-x!important;
    border: 1px solid #ddd!important;
  border-radius: 10px;
  font-size: 0px!important;
    font-family: oswald;
}

.record_user{
  display: inline-block;
  min-width: 140px;
  margin: 0px 4px;
  padding: 4px 4px;
  font-size: 12px;
  text-align: center;
    background: #fff url(https://i.servimg.com/u/f36/11/96/49/61/backgr10.png) repeat-x!important;
    background-color: #fff!important;
    background-repeat: repeat-x!important;
    border: 1px solid #ddd!important;
  border-radius: 10px;
    font-family: oswald;
  font-size: 12px!important;
  text-transform: uppercase;
  color: #777!important;
}

.record_user strong{
  display: block;
    text-transform: uppercase;
  font-size: 16px!important;
  color: #069!important;

}
.total_post strong, .total_users strong, .record strong, .newest_user a, .newest_user strong, .newest_user strong a, .newest_user a strong{
  display: block;
    text-transform: uppercase;
  font-size: 16px!important;
  color: #069!important;
  margin-bottom: -4px;
  margin-top: -10px;
}


strong.posts{
  font-size: 12px!important;
  text-transform: uppercase;
  color: #777!important;
  margin-bottom: 4px;
  margin-top: -4px;
}

.newest_user strong a{
  margin-bottom: 10px;
  color: #73C427!important;
}

.newest_user strong a:before{
  content: url(https://illiweb.com/fa/punbb/../Online.png);
  float: left!important;
}




.statistici td{
 
    background: #fff url(https://i.servimg.com/u/f36/11/96/49/61/backgr10.png) repeat-x!important;
    background-color: #fff!important;
    background-repeat: repeat-x!important;
    border-bottom: 1px solid #ddd!important;
    border-top: 1px solid #fff!important;
  padding: 6px;
  font-size: 12px;
  font-family: play;
}


Sper sa va ajute,nu stiu daca am explicat cum trebuie dar cel putin am incercat.
Craciun fericit!



    Design creat si realizat de fraNNNta-Design.com
    Acum este: Dum Dec 15, 2019 8:01 am