MyBB Group - Guidebook

Fuzzy Time (with Live Update)

Mon, 15 Apr 2024 22:11:56 +0000

Its been a while I have written a tutorial. Well here is another.

Today we are going to learn a DOM manipulation to display fuzzy time (.... ago) in place of actual date and time in various places in our forums.
Yes, I know, it is in core, somewhat, but not everywhere and not with much flexibility. This tutorial is to target that gap only. We will be playing with the frontend using js only, so no core edit, no plugins, no PHP.

Dependency:
This code is dependent to jQuery library, well its already there with MyBB so don't worry about that.
We will be using the awesome jQuery plugin timeago by Ryan McGeary.

First things first, lets include the plugin in our forums. Open the headerinclude template, find {$stylesheets}, add before that:

You can include it in your site by downloading and linking a local copy, if you are not so comfortable / trusting CDNs. For them I am attaching the compressed version of the plugin (only 3.52KB). Download it, extract and upload in jscripts folder. Then link as below instead of above:

Save the template for now. We are not done here, we will be back to this template for adding some more codes.

Now we have to deal with an issue. The jquery plugin expects the time format to be in ISO 8601 format (something like: 2024-04-15T21:10:01Z). MyBB displays the time in user readable strings which is of no use. Catch is we can always call the corresponding Unix Timestamp in template using different variables (find out, or else ask). Its then easy to convert to an ISO time string. So lets do this. For experiment we are gonna target forumbit_depth2_forum_lastpost template. Open the said template and find the variable {$lastpost_date}. This variable represents the last post time. We will use this too, as it will be transferred as tooltip. But the corresponding Unix timestamp variable for this is {$lastpost_data['lastpost']}. So replace the variable with the following line:

{$lastpost_date}

Save the template. Up to this everything is fine and backward compatible. In a no-js scenario the time will display exactly as it was before. So, don't worry about breaking anything.

We have pulled the Unix timestamp in data attribute. Now we have to use that and make the ISO Time String for every available instance in page. Now time to go back to headerinclude template. Add the following code at the end of the template:

Save the template finally. Its done now.
See the magic, make a new post and watch the fuzzy time change after a minute (default value) automatically, without refreshing page.

Tutorial is not over, there is something more, but for now its all.

Happy coding

jquery.timeago.min.zip (Size: 1.57 KB Downloads: 6)

View Unanswered Threads

Tue, 23 Mar 2021 05:07:26 +0000

This will add a new specialized Search preset link "View Unanswered Threads" to header.

Open template header_welcomeblock_member_search and add at the bottom:

View Unanswered Threads

Now open your search.php file in an editor. Go to line no. around 1252, find this line:
elseif($mybb->input['action'] == "finduserthreads")

and change it to:
elseif($mybb->input['action'] == "finduserthreads" || $mybb->input['action'] == "findunansweredthreads")

Just after that, find this line:
$where_sql = "uid='".$mybb->get_input('uid', MyBB::INPUT_INT)."'";

and change it to:

 
    if($mybb->input['action'] == "finduserthreads")
    {
        $where_sql = "uid='".$mybb->get_input('uid', MyBB::INPUT_INT)."'";
    }
    else
    {
        $where_sql = "replies='0'";
    }

Now save the modified search.php and reupload to your forum root, replacing the existing one.

Result:

Bypass Registration Agreement

Thu, 31 Dec 2020 14:51:12 +0000

Some admins find the Registration Agreement annoying and wants to get rid of it. So here is a little trick. This will place a Register button at header, clicking on which users will get Registration page directly.

Go to template header_welcomeblock_guest and find this line of code:

{$lang->welcome_register}

and replace with:

Save the template, done.

Locate IP On Page

Thu, 26 Nov 2020 05:57:09 +0000

I know many of you like to monitor who is online at your site and the most irritating part is bunch of guests look alike surfing different locations of your site. You are curious who they are, where they are from, and you start hopping between your site and some online IP locator service copy-pasting IP strings. Happened with you? Well then, read ahead.

This is the basic tutorial, so in this we are gonna get Country, City and Region for each IP we encounter in Who’s online page, inline, on page. Yes, with minimal template edits we can do that.

Jump in the modifications:
We are gonna edit 3 templates:online, ‘online_row_ip’ & ‘online_row_ip_lookup’.

1. Open template: ‘online_row_ip’, change this code:

 {$user['ip']}

 {$user['ip']}

2. Open template: ‘online_row_ip_lookup’, keep existing code, add at the beginning:

  [Locate]

3. Open template: ‘online’, locate variable {$footer}, add after that:

Save all templates. Result:

[attachment=41349]

Note:

If your server restricting CROB, you can get Cross-Origin Read Blocking warning in console, you can ignore the warning and the code will still work.
If you are using SSL (https://) this code will not work because in this tutorial we are using FREE ‘ip-api’ and secured XMLHttpRequest is a PAID service. You can purchase pro to make SSL access to API or ………… or there are few workarounds, but that’s another tutorial

So, that’s all for now. Happy coding …

Part 2: For those who uses SSL (https://).

Clearly you can't request to that API using SSL, so you need a proxy.
And the proxy is ...... our own xmlhttp.php

Yes, we are gonna core edit (don't be sad, read on...)

First, replace the above code in template with:

 [Locate]

Now, you need to use this js code in place of previous:

/**
 * IP Locator for MyBB 1.8
 * @author effone 
 * @group MyBB Group (Unofficial)
 * @version 1.0.0
 * @copyright 2018 MyBB Group / Demonate
 *
 * Website: https://github.com/mybbgroup / https://demonate.club
 * 
 */

$(function () {
    var data = {
        "error": "Unable to locate.",
        "ajax": parseInt(use_xmlhttprequest),
        "secure": location.protocol == "https:" ? true : false,
        "fields": "country,regionName,city"
    };

    if (!data.secure || (data.secure && data.ajax)) {
        $('.iplocate').show();

        $('.iplocate').on('click', function (e) {
            e.preventDefault();
            var target = $(this);
            var ip = $.trim(target.prev('.ip').text());
            var bank = data.secure ? rootpath + "/xmlhttp.php?action=get_iplocation&ip=" + ip + "&my_post_key=" + my_post_key + "&fields=" + data.fields : "http://ip-api.com/json/" + ip + "?fields=" + data.fields;

            ajaxCall(bank, function (result) {
                if (typeof result.errors === 'undefined') {
                    var message = (typeof result == 'object') ? (result.country + ', ' + result.regionName + ', ' + result.city) : data.error;
                    target.before('[' + message + ']').remove();
                } else {
                    $.each(result.errors, function (i, message) {
                        $.jGrowl("Error" + ' ' + message, {
                            theme: 'jgrowl_error'
                        });
                    });
                    //console.log(JSON.stringify(result));
                }
            });
        });

        function ajaxCall(bank, callback) {
            $.ajax({
                url: bank,
                dataType: "json",
                cache: true,
                success: function (result) {
                    callback(result);
                }
            });
        }
    }
});

Next, open xmlhttp.php, go to about line number 1110 (where the action blocks end, before xmlhttp_error() function) and add the following:

else if($mybb->input['action'] == 'get_iplocation')
{
        if (!verify_post_check($mybb->get_input('my_post_key'), true)) {
            xmlhttp_error($lang->invalid_post_code);
        }
        
        if(!$mybb->usergroup['canuseipsearch'])
        {
            xmlhttp_error($lang->permission_error);
        }

        $response = file_get_contents("http://ip-api.com/json/" . $mybb->get_input('ip') . "?fields=" . $mybb->get_input('fields'));

        json_decode($response);
        if(!json_last_error()  == 0)
        {
            xmlhttp_error($lang->ipapi_invalid_response);
        }

        header("Content-type: application/json; charset={$charset}");
        die($response);
}

and finally, open global.lang.php and add these two at the very end:

$l['ipapi_invalid_response'] = 'Invalid response received from IP-API.';
$l['permission_error'] = 'You are not allowed to perform this action.';

Save all. Done.

Note:
- For those who don't wanna core edit, Part 3 is coming up.
- A plugin with advanced features (like map, custom cache, advanced validations etc) is also under development. Keep an eye on Demonate & repo list of MyBB Group (unofficial):
https://github.com/mybbgroup

More advanced & detailed tutorials @ Demonate.

Generate Syndication URL on the fly

Sat, 13 Jun 2020 01:36:26 +0000

For those lazy heads: let's save a click!

To generate a new syndication URL you need to click on the "Generate Syndication URL" button after choosing your desired forums, syndication version and limit. This will generate the URL on the fly in front of your eyes as you change your preference. Lets do it.

Open the template misc_syndication and find the variable {$feedurl}. Add the following script before that:
Note: You need to add the script before the var, not after, else jQuery will be confused to identify the element holding URL.

Thats all.

This will hide the "Generate Syndication URL" button, but don't worry, wee don't need that anymore.

Now save the template. Done.

Result:

tl;dr:
For the readability of the curious minds, this is the expanded version of the script (which you can also use in place of the above):

Add Approve / Unapprove button to each post

Thu, 07 May 2020 21:54:54 +0000

This will add Approve / Unapprove button to each post.
This is a very basic and nominal mod for those new friends exploring MyBB. This can be further extended and enhanced as per your need.

Open template showthread_inlinemoderation, find the first line:

ADD the following piece of script just after that:

Change the strings in first three lines, if you are using different language.

Note:

There are several ways to do this but this script uses MyBB's inbuilt tools only.
This mod is just for fun and with js only. js disabled sites will not work.
To obtain a proper full functionality you need to have a plugin.

Result:

Hide reCAPTCHAInvisible badge

Tue, 14 May 2019 04:47:47 +0000

Have ever reCAPTCHA Invisible badge annoyed you? Specially when you are using a mobile device with a responsive theme and the badge slides out from the right hiding some of your important form control? Say, the form Submit button? - disgusting situation.

Well, let's hide it.

Wait! OMG! effone gone mad! Thats a straight breach of Google's TOS.

Google reCAPTCHA v3 TOS Wrote:You agree to explicitly inform visitors to your site that you have implemented the Invisible reCAPTCHA on your site.

Well, well. Hang on. You can still hide it. Google now allows it under certain conditions (As per latest reCAPTCHA FAQ, 11 Dec, 2018 update).
https://developers.google.com/recaptcha/docs/faq

So, let's hide it. Super easy. Add this CSS at the end of your global.css:

.grecaptcha-badge {
    display: none;
}

Save stylesheet. Refresh!
Eh, the badge is still there sliding out. Because the container is not inline. You have to declare your badge to be inline in order to hide it.

Open template member_register_regimage_recaptcha_invisible and find this chunk:

grecaptcha.render(target.get(0), {
    'sitekey': '{$public_key}',
    'callback': captchaOnSubmit
}, true);

Change it to:

grecaptcha.render(target.get(0), {
    'sitekey': '{$public_key}',
    'callback': captchaOnSubmit,
    'badge' :'inline'
}, true);

Yes, the badge is gone!

Now, the most important part to remain legal:
You have to add this line to every page you are using reCAPTCHA in, if you are not sure - add it to footer template:

This site is protected by reCAPTCHA and the Google
    Privacy Policy and
    Terms of Service apply.

Note:

This is demonstrated for registration page but is applicable to anywhere you are using reCAPTCHA.
Some additional requirement/s of Google Brand guidelines: "Don't mimic Google's typographic style. The writeup should blend your site's typography.

Done. Happy coding ...

FontAwesome (v5) - usergroup stars

Fri, 19 Apr 2019 09:33:59 +0000

To replace default MyBB userstars by a modern good looking FontAwesome icons.

- FontAwesome v5.x library is required, please load it on your website

1) Open "postbit_classic" and "postbit" template and find this this line of code:

{$post['userstars']}

and replace it with this code:

2) Open "memberlist_user" template and find this line of code:

{$user['userstars']}

and replace it with this code:

3) Open "member_profile" template and find this line of code:

{$userstars}

and replace it with this code:

4) Open "global.css" stylesheet and add at the end this block of code:

/** Usergroup star rating - FontAwesome v5 - MyBB.Group **/

.userstar {
	font-family: Font Awesome\ 5 Free;
	font-size: 13px;
	color: #969696;
	line-height: 13px;
	display: inline-block;
	letter-spacing: 2px;
	font-weight: 900;
}
.star_0 :before {
	content: "\f005\f005\f005\f005\f005\f005\f005";
	font-weight: 400;
}
.star_1 :before {
	content: "\f005";
}
.star_1 :after {
	content: "\f005\f005\f005\f005\f005\f005";
	font-weight: 400;
}
.star_2 :before {
	content: "\f005\f005";
}
.star_2 :after {
	content: "\f005\f005\f005\f005\f005";
	font-weight: 400;
}
.star_3 :before {
	content: "\f005\f005\f005";
}
.star_3 :after {
	content: "\f005\f005\f005\f005";
	font-weight: 400;
}
.star_4 :before {
	content: "\f005\f005\f005\f005";
}
.star_4 :after {
	content: "\f005\f005\f005";
	font-weight: 400;
}
.star_5 :before {
	content: "\f005\f005\f005\f005\f005";
}
.star_5 :after {
	content: "\f005\f005";
	font-weight: 400;
}
.star_6 :before {
	content: "\f005\f005\f005\f005\f005\f005";
}
.star_6 :after {
	content: "\f005";
	font-weight: 400;
.star_7 :before {
	content: "\f005\f005\f005\f005\f005\f005\f005";
}

5) You are done, check the result!

FontAwesome (v5) - loading spinner

Fri, 19 Apr 2019 08:55:17 +0000

To replace default MyBB spinner by a modern good looking FontAwesome spinner you will need to apply these changes:

- FontAwesome v5.x library is required, please load it on your website

1) Open "headerinclude" template and find this block of code:

var spinner = "";

and replace it with this one:

var spinner = "";

2) Open "showthread_quickreply" template and find this block of code:

and replace it with this one:

*note: do not forget to apply the code above to all places where you might have the spinner

3) Open your "global.css" in your theme and add these few line of code below at the end of file:

#quickreply_spinner .fas {
font-size: 36px;
}

4) You are done, refresh your page (Ctrl+F5) and check the result!

Add filtering by thread prefix in forumdisplay_thread page

Fri, 19 Apr 2019 08:37:28 +0000

This is a simple tutorial how to add a support for easier filtering of threads by their thread prefix. After this change prefixes will be changed to URL links. When you click to them, threads with the selected prefix will be displayed.

1) In ACP open and edit "forumdisplay_thread" template and find this line of code:

{$thread['threadprefix']}

replace it by this line of code:

{$thread['threadprefix']}

2) Save and reload (Ctrl+F5) your page to see the result!

3) Click on any thread prefix and check the output

Adding Collapse Buttons to Any Table

Thu, 18 Apr 2019 06:13:05 +0000

Today we will learn how to add MyBB's collapse buttons to any table. Interesting? Well, its easy too.
Lets see how it can be done.

The default table code structure of MyBB is something like this:

Title of the Table

The first content row.

The second content row.

Now we will insert the collapse button code to show in title bar (.thead). Code for this is:

unique_id']}.gif" id="[color=#ff0000]unique_id_img" class="expander" alt="[-]" title="[-]" />

[/font]

Note that:
1. The red text part ID of the collapse button must be unique and not be repeated.
2. The ID must have the word "_img" at the end of it.

As we want to show the collapse button in out title bar, we will place the code Just after the title, within the thead class.

Title of the Table

Now we will bind the area with tbody reffering the same red unique text and instead of '_img' we have to place '_e' now.


Content to collapse ...

So, we will combine the code this way, its colored, explanatory:

unique_id_e']}" id="unique_id_e">

Title of the Table

']}.gif" id="unique_id_img" class="expander" alt="[-]" title="[-]" />

The first content row.

The second content row.

[/font]

>> Blue text is newly added code.
>> Red is the unique ID, don't repeat the ID if you are applying it in multiple tables, else : you will click to collapse in earth and the content will collapse in Jupiter

Thats it. Happy coding.

Make the Tracking PM Titles Clickable

Thu, 18 Apr 2019 06:13:01 +0000

PM subjects in PM Tracking page is not hyperlinked and its a problem if you forget the content and want to check back.
So, here is a little jQuery magic to make all the PM titles clickable which will take you to the original PM in Sent Items folder.

Open template private_tracking and find the variable {$footer}. Add the following script just before that:

Save the template, BAM!

All of the PM subjects in tracking page is now clickable.

Color All Post Backgrounds of a Usergroup

Sun, 14 Apr 2019 11:23:06 +0000

This tutorial is for those who want some specific usergroup's posts be different from the others. Like say all moderators' post background to be some different color. We can do it without using any plugin. Let's discuss about that trick today.

First we have to add a special class to our postbit templates to override the default post colors. For that open the template:

ACP > Templates & Styles > Templates > [Theme Name] Templates > Postbit Templates > postbit

and find:

Now we have to add our special class post{$usergroup['gid']} to it. So, change the code to:

Note that: You have to place the class
a) after class 'trow2' else the 'trow2' background color will govern.
b) before class'{$unapproved_shade}' so that Unapproved post's color can lead over any user's post.

Do the same thing with postbit_classic template. Open:

ACP > Templates & Styles > Templates > [Theme Name] Templates > Postbit Templates > postbit_classic

and find:

Change the code to:

Now the CSS, main trick part. Our dynamic class 'post{$usergroup['gid']}' will change at runtime based on group ID. ie. for all the posts of admins (default group ID is 4) it will be post4, for all the posts of members (default group ID is 2) it will be post2

So, as we said, if we want to target the specific group, for our example, say Moderators (default group ID is 6) we will declare our CSS class as .post6

Now, open your global.css and add at the end (or any suitable location):

.post6 { background: #FDB5FF; }

and save global.css.

Now the background of all posts made by any Moderator is a decent light pink.
We can change post backgrounds for as many usergroups as we wish using this trick, only we need to know the target group ID and change the number at the end of the class in css as per that group ID.