Like / Dislike buttons

I Dislike the default "Like" button ! It is a bit aggressive on the eyes. Most of the other buttons can be customised to suit your forum style, can these be too ? Thanks.

Hello

Note:

The "Like" and "Dislike" labels can be personalized via the templates. Indeed, by default we offer the mention "Like" but nothing prevents having on the forum an "I agree", "Great", ...etc. A tutorial will be offered quickly to explain in more detail how to do this customization.

Hi

There are two variables in viewtopic_body, viewcomment_body and viewtopic_body (mobile) template you can modify to any word you want

Search and replace

Code:

<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

by Vote up, Thumbs up

And

Code:

<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

by Vote down, Thumbs down

Sorry to interrupt I was about to create a new topic to ask the same thing so i thougth it would be okay to add it to this post, while editing the code is it possible for one to change the background color of an activated like button so its easier to see what you already *liked*? im using modernBB, I would like to make it just like it appear by default on the awesomeBB version (both button have blue background but when activated the background turn green under awesomeBB version instead of staying all black when under modernBB if this make sense).

To make it short my question is can I tweak this in the template by adding some CSS while changing the words also?

you can style it by using this code

Code:


.rep-button, .rep-button:active, .rep-button:focus {
    background-color: #yourcolor;
    border: 1px solid #yourcolor;
    border-radius: numberpx;
    color: #yourcolor;
}


I tried it but it didnt quite work like I wanted. It just change the whole thing's color while im more trying to isolate them. Just like this picture of the awesomeBB version :

Spoiler:

But id like to do the same color patern for modernBB. The thumbs up and down on a blue background when innactive, green background for the thumbs up when active and red background for the thumbs down when active.

ok then delete the code and add

Code:


rep-cat {
    background-color: #1E88E5;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: -6px 10px -6px -11px;
    padding: 0 11px;
}
.fa_liked .rep-cat {
    background-color: #4CAF50;
}
.fa_disliked .rep-cat {
    background-color: #F44336;
}
.rep-button, .rep-button:active, .rep-button:focus {
    background-color: #263238;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    margin: 6px 11px 0 0;
    outline: none;
    overflow: hidden;
    padding: 6px 11px;
    position: relative;
}


tell me if you are ok


edit: forumotion is going to send out small fixes for functionality this week so i recommend that you wait for these little fixes to go online to avoid any problems.

skouliki wrote:
edit: forumotion is going to send out small fixes for functionality this week so i recommend that you wait for these little fixes to go online to avoid any problems.

Thank you I will wait thank you for taking time to send the code also I very much appreciate it!

Hello,

Once user feedback is processed, we will attempt to post additional information to customize the Like and Dislike buttons (label, icon or image).

We will send small patches tomorrow normally (pop-up when a visitor clicks on one of the buttons to invite him to connect, visual patches...). I advise you to avoid any modification because in case of modified template, you will have to manually report the latest developments.

Thank you.

SarkZKalie wrote:Hi

There are two variables in viewtopic_body, viewcomment_body and viewtopic_body (mobile) template you can modify to any word you want

Search and replace

Code:

<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

by Vote up, Thumbs up

And

Code:

<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

by Vote down, Thumbs down

hello, could you please explain a bit more in detail, because I would only like to change the words..

from: Like to Bravo

for example, what should I change in the code exactly? thank you in advance!

Hello kic


You need to be the founder to edit the templates

Admin Panel  Display  Templates - General - viewtopic_body

Replace :

Code:

<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

with :

Code:

<span>Bravo</span>

Then replace :

Code:

<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

with :

Code:

<span>Beurk</span>

Save, publish, enjoy !
If you can see the viewcomments_body template, you'll need more explanations. Else it's finished.

---

Oh, i forgot !

You need to do exactly the same thing for the mobile version but the template is there

Admin Panel  Display  Templates - Mobile version - viewtopic_body

Neptune- wrote:Hello kic


You need to be the founder to edit the templates

Admin Panel  Display  Templates - General - viewtopic_body

Replace :

Code:

<span>{postrow.displayed.switch_likes_active.L_LIKE}</span>

with :

Code:

<span>Bravo</span>

Then replace :

Code:

<span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>

with :

Code:

<span>Beurk</span>

Save, publish, enjoy !
If you can see the viewcomments_body template, you'll need more explanations. Else it's finished.

---

Oh, i forgot !

You need to do exactly the same thing for the mobile version but the template is there

Admin Panel  Display  Templates - Mobile version - viewtopic_body

thank you @Neptune-

another thing is, when I for example press: Like, and it pops up the message in small font: kic likes this post

can that be modified too? for example when I press Like, that it pops up: kic loves this post!

for example only^^

It should be possible with a search and replace javascript, but i haven't written this part yet. And haven't tested yet.

Just a few days to wait ...

Hey @Kic,

You can create a new JavaScript page with placement in the topics and use this code:

Code:

(function($) {
    'use strict';

    $(function() {

        $('.post').each(function() {
            var $this = $(this);

            if (!$this.find('.fa_like_list').length) return;

            $this.find('.fa_like_list').html($this.find('.fa_like_list').html().replace(/likes/g, 'loves'));

        });

    });
})(jQuery);

however it can be improved, it’s just a base

Well @pedxz it's more difficult than we expected

Your code works if we reload the page or if there is already one like (just managing the singular)
But if there is no vote, and you like, script does not work

I tried something similar inside template

Code:


               <div class="fa_like_div">
                  <!-- BEGIN switch_like_list -->
                  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                  <!-- END switch_like_list -->
                  <!-- BEGIN switch_dislike_list -->
                  {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                  <!-- END switch_dislike_list -->
               </div>
                                     <script type="text/javascript">$('.fa_like_div').each(function(){$(this).html($(this).html().replace(/dislikes this/g,"hates this"));});</script>
                                     <script type="text/javascript">$('.fa_like_div').each(function(){$(this).html($(this).html().replace(/dislike this/g,"hate this"));});</script>
                                     <script type="text/javascript">$('.fa_like_div').each(function(){$(this).html($(this).html().replace(/ likes this/g," loves this"));});</script>
                                     <script type="text/javascript">$('.fa_like_div').each(function(){$(this).html($(this).html().replace(/ like this/g," love this"));});</script>

and unfortunately, i got the same issue

But if there is no vote, and you like, script does not work

Indeed. This because the button has a event and is impossible (i believe) to add more than one. Summary or FM adds a field to customize the word "like" or "dislike" or we need to do with another way (i will do a probability to see if works)

---

My trick:
1. Go to the overall_header (template) find

Code: <body

and replace to

Code:

<body <!-- BEGIN switch_user_logged_in --> data-user="is"<!-- END switch_user_logged_in -->

2. Add in the stylesheet (CSS) this code:

Code:

body[data-user="is"] p[class$="like_list"] {
  font-size: 0!important;
}
 
body[data-user="is"] p[class$="like_list"]:after {
  padding-left: 0.25rem;
}
 
body[data-user="is"] .fa_like_list:after {
  content: 'think this post is so cute!';
 }
 
body[data-user="is"] .fa_dislike_list:after {
  content: 'think this post is so spectacular!';
}
 
body[data-user="is"] p[class$="like_list"]:after,
body[data-user="is"] p[class$="like_list"] a[href^="/u"] {
  font-size: 12px;
  display: inline-block;
}
 
body[data-user="is"] p[class$="like_list"] a[href^="/u"]:not(:last-child)::after {
  content: ', ';
  cursor: default;
  user-select: none;
  color: black!important;
  display: inline-block; 
  pointer-events: none;
  text-decoration: none;
  margin-right: 0.25rem;
}

Like will change to: "think this post is so cute!"
Dislike to: "think this post is so spectacular!"
but you can change just find this phase in the CSS code.

the code will change completely the phase for the members of the forum. For guests just use a JS code

Code:

(function($) {
    'use strict';
 
    $(function() {

        if (_userdata.session_logged_in) return;
 
        $('.post').each(function() {
            var $this = $(this);
 
            if (!$this.find('.fa_like_list').length) return;
 
            $this.find('.fa_like_list').html($this.find('.fa_like_list').html().replace(/likes/g, 'loves'));
 
        });
 
    });
})(jQuery);

(the code is now limited to disconnected members only)

Great job @pedxz !!

Trych wrote:I tried it but it didnt quite work like I wanted. It just change the whole thing's color while im more trying to isolate them. Just like this picture of the awesomeBB version :

Spoiler:

But id like to do the same color patern for modernBB. The thumbs up and down on a blue background when innactive, green background for the thumbs up when active and red background for the thumbs down when active.

So even with the recent update I cant find a way to do the same look as the awesomeBB version on my modernBB version forum no matter what I try. anybody else having a hard time changing the colors of the active and inactive like/dislike button under modernBB ?

@Trych

i think it is better to open your own thread about this

Is there a way to stop the 'Like/Dislike' icons from showing up in member's own posts?

It seems a bit odd for people to be able to 'like' their own posts.

jkh wrote:Is there a way to stop the 'Like/Dislike' icons from showing up in member's own posts?

It seems a bit odd for people to be able to 'like' their own posts.

Start your own topic please.