Latest topics
» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

Recent Tutorials
Who is online?
In total there are 6 users online :: 1 Registered, 0 Hidden and 5 Guests :: 1 Bot

SLGray

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

LIKE system for the new mobile version

View previous topic View next topic Go down

TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Sat 20 Aug 2016, 01:47

Hi again.

phpBB3
www.bellsareringing.forumotion.com

I have a LIKE/REPUTATION system for my forum that I love.
Is there a way to implement it into the new mobile version like the one in this forum below...

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 20 Aug 2016, 05:45

Hi @TroyEccles,

It depends, what script are you using for the like system. Could you post it here for me to look over ?
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Sat 20 Aug 2016, 06:01

Like Function:

Code:
$(function() {
    var voteImage = 'http://i39.servimg.com/u/f39/18/78/19/68/tbar_v10.png';
 
    $('.vote').each(function() {
      if ($(this).find('.vote-bar').length) { var VCount = $(this).find('.vote-bar').attr('title').replace(/.*\((\d+).*\)/,'$1') }
      if (VCount == '1') { var vote = ' vote' }
      else { var vote = ' votes' }
      var VPlus = $(this).find('.vote-button:first a').addClass('VPlus').attr('title', 'Vote up').html('<img src="'+voteImage+'" alt="+"/>');
     
      $(this).closest('.postbody').find('.profile-icons').append(VPlus);
      $(this).closest('.postbody:has(.vote-bar)').find('.profile-icons').append('<span class="VCount" title="'+VCount+vote+'">'+VCount+'</span>');
      $(this).remove();
    });
   
    $('.VPlus').click(function(){
      var t = this, n = this.nextSibling;
      $.get($(this).attr('href'), function() {
          t.style.opacity = '0.3';
          if (n) {
            n.innerHTML = +n.innerHTML + 1;
            n.title = n.innerHTML + ' votes';
          } else {
            $(t.parentNode).append('<span class="VCount" title="1 vote">1</span>');
          }
      });
      return false
    });
});



Like Count:

Code:
$(function() {
    var voteImage = 'http://i39.servimg.com/u/f39/18/78/19/68/tbar_v10.png';
 
    $('.vote').each(function() {
      if ($(this).find('.vote-bar').length) { var VCount = $(this).find('.vote-bar').attr('title').replace(/.*\((\d+).*\)/,'$1') }
      if (VCount == '1') { var vote = ' vote' }
      else { var vote = ' votes' }
      var VPlus = $(this).find('.vote-button:first a').addClass('VPlus').attr('title', 'Vote up').html('<img src="'+voteImage+'" alt="+"/>');
     
      $(this).closest('.postbody').find('.profile-icons').append(VPlus);
      $(this).closest('.postbody:has(.vote-bar)').find('.profile-icons').append('<span class="VCount" title="'+VCount+vote+'">'+VCount+'</span>');
      $(this).remove();
    });
   
    $('.VPlus').click(function(){
      $.get($(this).attr('href'), function() {
          location.reload();
      });
      return false
    });
});
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 20 Aug 2016, 06:33

Thanks, I'll take a look over this Monday if that's alright. Salute
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Sat 20 Aug 2016, 07:10

Absolutely! !!!!
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Sun 21 Aug 2016, 08:28

Before you spend too much time on this, the forum that I posted a screenshot of has a footer that says "invision powerboard". I've noticed that I can switch between bb2, bb3 and invision on the ACP. Is this the same invision template? If so, it's absolutely perfect!

I just don't want to switch to that, find out it's not the same thing and wreck my forum for nothing.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 22 Aug 2016, 15:55

No switching themes will not switch the mobile version design. Do you have a link to the forum you "want to look like" perchance ?
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Mon 22 Aug 2016, 22:11

Hi Ange.

It's an Invision site. Link is here. Colours aside it's absolutely perfect for me I every way I can imagine. If I could do this I'd be a very happy camper indeed!

http://dcfcfans.uk/forum/4-rams-talk/

TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Mon 22 Aug 2016, 22:14

Have sent you a PM with my login for that site too.
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Mon 29 Aug 2016, 08:18

Have you had a chance to look at this, @Ange Tuteur ?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 29 Aug 2016, 16:32

Hi @TroyEccles,

I apologize, I've been busy working on other projects. Anyway, the problem would be that the mobile version does not have any reputation buttons to begin with.. Think

Go to Admin Panel > Display > Templates > Mobile > viewtopic_body

Find :
Code:
</div>
         {postrow.displayed.EDITED_MESSAGE}

Replace by :
Code:
            <!-- BEGIN switch_vote_active -->
            <div class="vote gensmall">
               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">Like</a></div>
               <!-- END switch_vote -->

               <!-- BEGIN switch_bar -->
               <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                  <!-- BEGIN switch_vote_plus -->
                  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                  <!-- END switch_vote_plus -->

                  <!-- BEGIN switch_vote_minus -->
                  <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                  <!-- END switch_vote_minus -->
               </div>
               <!-- END switch_bar -->
            </div>
            <!-- END switch_vote_active -->
         </div>
         {postrow.displayed.EDITED_MESSAGE}
Save and publish.

Then add the following CSS to your stylesheet :
Code:
main .vote { margin-top:10px; }

main .vote-button a {
  color:#FFF;
  background:#0598E4;
  padding:0 6px;
  height:24px;
  line-height:24px;
  display:inline-block;
  border-radius:3px;
}

Which will give you this :



P.S.
If you're looking for something mobile friendly and full-featured, I recommend checking out Forumactif Edge. Wink
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Mon 29 Aug 2016, 19:40

That's wicked work, Ange! I'll give it a try after work tonight.
Can the button be changed to a blue thumbs up image like what I currently have on my full site?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 29 Aug 2016, 19:50

@TroyEccles thanks ! Rose

Yes, the button can be changed to whatever you like. Just find this part in the replacement code :
Code:
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">Like</a>

Replace "Like" with whatever you like, such as an image. Wink
Code:
<img src="IMAGE_URL" />
TroyEccles

Title :
Gender : Unspecified
Posts : 25
Points : 164
Reputation : 1
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostTroyEccles on Tue 30 Aug 2016, 21:30

Didn't work, Ange. Nothing appearing in the mobile version at all.

I'm using the modern version though. Is that the issue maybe?
Everything was updated as you said and published/saved.

No effect at all.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 31 Aug 2016, 10:38

@TroyEccles hmm.. could you paste the viewtopic_body for your mobile version here ?

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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