[Javascript] IPB Statistics

Tutorial: IPB Statistics

Code:

[panda=html]    <div class="main-content">
          <div id="stats">
            <p class="right">{TOTAL_POSTS}</p>
            <p>{TOTAL_USERS}</p>
            <p>{NEWEST_USER}</p>
          </div>

Code:

 <div id="stats">
                      <br />
                      <ul class="statsPers">
                        <li class="statHide rdtOn">Test1: {RECORD_USERS}</li>
                        <li class="statHide lastUser">Test2: {NEWEST_USER}</li>
                        <li class="statHide totalUser">Test3: {TOTAL_USERS}</li>
                        <li class="statHide totalPost">Teste: {TOTAL_POSTS}</li>
                      </ul>
                  <br />
           
              </div>

Code:

[panda=js]$(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 posts</li>
    <li><span>'+totalUser+'</span> Total members</li>
    <li><span>'+lastUser+'</span> Newest member</li>
    <li><span>'+rdtOn+'</span> Most online</li>
    ');


    });

Code:

[panda=css]  #stats {
    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 {
    padding: 5px 8px;
    background: #E1E1E1;
    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;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    -o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    border: 1px solid #E1E1E1;
    margin-bottom: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    text-shadow: 1px 1px 0 white;
    color: #111;
    font-weight: 700;
    }
    .statsPers li {
    float: left;
    color:#666;
    margin: 2px 10px;
    }
    .statsPers {
    list-style: none;
    display: block;
    margin: 0px auto;
    width: 100%;
    }

If you have any questions related to this topic create a topic with the following title: IPB Statistics

Guest wrote:[link="/t675-javascript-ipb-statistics#4164"]

Tutorial: IPB Statistics

Create an IPB looking statics for your forums.

Credits: @jScript

--> Tutorials, tips and tricks <--
IPB Statistics

1º - Templates
In [ic]index_body[/ic] Find the following code:

Code:

[panda=html]   

         

           

{TOTAL_POSTS}

           

{TOTAL_USERS}

           

{NEWEST_USER}

         

Replace with:

Code:

 

                     

                     

                       
• Test1: {RECORD_USERS}

                       
• Test2: {NEWEST_USER}

                       
• Test3: {TOTAL_USERS}

                       
• Teste: {TOTAL_POSTS}

                     

                 

           
             

Publish template!


2º - Javascript
Placement: In homepage

Code:

[panda=js]$(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('
   

'+totalPost+' Total posts

   

'+totalUser+' Total members

   

'+lastUser+' Newest member

   

'+rdtOn+' Most online

    ');


    });

3º - CSS

Code:

[panda=css]  #stats {
    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 {
    padding: 5px 8px;
    background: #E1E1E1;
    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;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    -o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
    border: 1px solid #E1E1E1;
    margin-bottom: 10px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    text-shadow: 1px 1px 0 white;
    color: #111;
    font-weight: 700;
    }
    .statsPers li {
    float: left;
    color:#666;
    margin: 2px 10px;
    }
    .statsPers {
    list-style: none;
    display: block;
    margin: 0px auto;
    width: 100%;
    }

4º - Preview

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: IPB Statistics