Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] IPB Statistics



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Guest

avatar
Guest


Tutorial: IPB Statistics

Create an IPB looking statics for your forums.

Credits: @jScript

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



- Templates
In [ic]index_body[/ic] Find the following code:
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>
Replace with:
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>

Publish template!


- 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('
    <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>
    ');


    });


- 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%;
    }


- Preview





© PunBB Design


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

Powered by PunBB
Currently 0 users have thanked Guest for this post:

2
Offline

  Boyka

avatar
Punbb Rookie
Punbb Rookie
why it shows me 2 time of that http://royal.forumc.net/

Powered by PunBB
Currently 0 users have thanked Boyka for this post:

3
Offline

  Virus

avatar
★Moderator★
★Moderator★
[infos="Questions and Problems"]Hello,

You have to create a new topic to Questions & Problems referring to this post. That way other members with the same question will find the answers easier in the correct category.[/infos]

Powered by PunBB
Currently 0 users have thanked Virus for this post:

4
Offline

  FrOsTyXi

avatar
V.I.P. Member
V.I.P. Member
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



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


- 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

  •     ');


        });


    - 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%;
        }


    - Preview





    © PunBB Design


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

    Not working for PHPBB3 templates are different is it possible to do on phpbb3?

    Powered by PunBB
    Currently 0 users have thanked FrOsTyXi for this post:

    5
    Offline

      Virus

    avatar
    ★Moderator★
    ★Moderator★
    [infos="Questions and Problems"]Hello,

    You have to create a new topic to Questions & Problems referring to this post. That way other members with the same question will find the answers easier in the correct category.[/infos]

    Powered by PunBB
    Currently 0 users have thanked Virus for this post:

    View previous topic View next topic Back to top Message [Page 1 of 1]


    Topic URL's

    URL
    BBcode
    HTML

    Permissions in this forum:
    You cannot reply to topics in this forum