Simple footer statistic [AwesomeBB]

[Guest]

Hello people. If you want to make a simple footer to show only total amount of users, posts and who is newest member, let me show you how to do so.

1. Go to CP - Display - General --> overall_footer_begin

Find:

Code:

<footer>
    <div class="wrap">
        <div id="forum-statistics">
            <div>
                <div>{TOTAL_POSTS}</div>
            </div>
            <div>
                <div>{TOTAL_USERS}</div>
            </div>
            <div>
                <div>{NEWEST_USER}</div>
            </div>
        </div>
    </div>
</footer>

Replace with:

Code:

<div id="footer__data">
  <div><p>TOTAL POSTS</p><span class="total__posts">{TOTAL_POSTS}</span></div>
  <div><p>TOTAL USERS</p><span class = "total__users">{TOTAL_USERS}</span></div>
  <div><p>NEWEST MEMBER</p><span class = "newest__user">{NEWEST_USER}</span></div>
</div>

Save and Publish.

2. Go to CP - Display - Pictures and Colors - Colors & CSS - CSS Stylesheet and add this code there:

Code:

#footer__data {
  display: flex;               
  flex-direction: row;         
  flex-wrap: nowrap;           
  justify-content: center;
  background-color: transparent;
}
#footer__data > div {
  background-color:#5b66ff;
  color:#fff;
  width: 300px;
  height: 100px;
  border: 2px solid #4d57d9;
  margin:5px;
  font-size:20px;
  text-align:center;
  vertical-align:center;
}
#footer__data > div p {
  background-color:#fff;
  color:#000!important;
  font-size:18px!important;
}
.total__posts , .total__users, .newest__user {
  line-height:75px;
}

Save.

3. Go to CP - Modules - HTML & JAVASCRIPT - Javascript Codes management.
Create New Javascript. Name it: "Footer statistic replacements" and place it "In the home page".
Paste this code there:

Code:

/*
   Author: The Raven
   Date of creation: 01.09.2023
   Script version: 1.1
   Contact forum: https://gothicpub.forumotion.com/   
*/
$(document).ready(function() {

    // Replace data for amount of total registered users
    var total_users = $(".total__users").text();
    var replacement = total_users.match(/\d/g).join("");
    $(".total__users").text(replacement);

    // Replace data for amount of total posts

    var total_posts = $(".total__posts").text();
    var replacement2 = total_posts.match(/\d/g).join("");
    $(".total__posts").text(replacement2);

    // Replace data to represent only newest member
 
  var newest_user = $(".newest__user").html();
  var array = newest_user.split("is"); 
  var result = array.pop();
  $(".newest__user").html(result);
 
});

P.S. Make sure your javascript is enabled!
Live result at the bottom of this test forum: https://cozylife.forumotion.com/

You can edit CSS as you wish, this is just a basic example.

[SLGray]

You need to state for which forum version your tutorials are for.

[Guest]

It's in the title of topic..

[SLGray]

Sorry, I did not see that.

[TheCrow]

If I was to add my 2 cents here, it would be that this is most likely to work on other versions too. My thought is with the newest member. This makes the username as a text and it's not actually clickable. I believe it would be best to get the

Code: html

part of the newest member and insert it there so it is clickable!

Good tutorial though.

[Guest]

Script updated to show link towards new user, and not only text. Thanks for idea @TheCrow .