Widgets are currently available on the modern mobile version of the forums

Go down

Tutorial Widgets are currently available on the modern mobile version of the forums

Post by The Godfather on December 13th 2019, 5:31 pm

Dear users,

We are pleased to announce that Forumotion forums now have dedicated mobile widgets for their modern mobile version Very Happy

Which widgets are concerned ?


This update only concerns the modern mobile version of Forumotion forums. This version is now equipped with the possibility to add up to 4 widgets at the bottom of the home page. The concerned widgets are :


  1. The most popular topics of the forum.
  2. The most active topics of the forum.
  3. The forum's classifieds.
  4. The chatbox.


How do I activate the mobile widgets in my forum?


The activation of the modern mobile version widgets of your forum is done by the founder from his administration panel >> Display >> Templates >> Mobile version >>  Mobile version configuration >> Mobile version widgets.

Widgets are currently available on the modern mobile version of the forums 13-12-10

Simply select the widgets you want to activate on your modern mobile version in the "Available widgets" column and then move them to the "Active widgets" column using the dedicated button and save. (the removal of an active mobile widget is done in the same way but in the opposite direction).

Note that with this update a "Chatbox" menu has been added to the navigation bar and TapBar of the modern mobile version of the forum. It allows a direct and fast access to the mobile chatbox of the forum.

See example:
Widgets are currently available on the modern mobile version of the forums En10

Without telling you too much, I let you discover by yourself the new mobile widgets of your forum Wink

We hope that this new feature will bring you full satisfaction

See you soon on Forumotion for other new features,

The Forumotion team king

Good to know:



  • The mobile Chatbox widget is dependent on the activation of the forum chatbox. It only appears and can be activated if the forum chatbox has been activated.
  • Founders who have customized the message_body, overall_footer and overall_header mobile templates must do the changes below to ensure to have our optimizations to the mobile version of their forum and that the new mobile widgets work properly.


Last edited by The Godfather on January 6th 2020, 3:44 pm; edited 1 time in total
The Godfather
The Godfather
Administrator
Administrator

Posts : 3423
Reputation : 603

Back to top Go down

Tutorial Re: Widgets are currently available on the modern mobile version of the forums

Post by The Godfather on December 13th 2019, 5:43 pm

NOTE : In order for mobile widgets to work optimally on the forum, founders who customized one of the mobile templates message_body, overall_footer and overall_header before December 13, 2019 must take into consideration the following changes.

We remind you that the basic mobile templates of the forum natively embed all these optimizations. From then on, you can delete your custom template in order to generate the updated basic template and then integrate your customizations again.

message_body


Replace the following code :

Code:
<div class="box">
<div class="box-header">{MESSAGE_TITLE}</div> {MESSAGE_TEXT}
</div>

By the following new code :

Code:
<div class="box box-information">
<div class="box-header">{MESSAGE_TITLE}</div> {MESSAGE_TEXT}
</div>

overall_footer


Delete the following code :

Code:
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

Then also:

Replace the following code :

Code:
$(window).load(function(){
        var avatar_style;

        $('.forum-avatar img').each(function(){
            avatar_style = (this.width/this.height > 1) ? 'height: 100%; width: auto;' : 'height: auto; width:100%;';
            $(this).attr('style', avatar_style);
        })
    })

By this new code:

Code:
  $(window).load(function(){
        var avatar_style;

        $('.forum-avatar img').each(function(){
            avatar_style = (this.width/this.height > 1) ? 'height: 100%; width: auto;' : 'height: auto; width:100%;';
            $(this).attr('style', avatar_style);
        })
    });

    function hideFixedToggleable(focusin) {
        var toggleable = [
            $('#to-top'),
            $('.btn-floating'),
            $('#tab-bar')
        ];

        if (focusin) {
            $(toggleable).each(function() {
                $(this).css('display', 'none');
            });
        } else {
            $(toggleable).each(function() {
                $(this).removeAttr('style');
            });
        }
    }

    $(document).on('focus blur', 'select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=search]', function(e) {
        hideFixedToggleable(e.type == 'focusin');
    });

overall_header


Just after the following code :

Code:
<script src="//code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>

Add the following code :

Code:
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
The Godfather
The Godfather
Administrator
Administrator

Posts : 3423
Reputation : 603

Back to top Go down

Back to top


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