Like / Dislike buttons

Go down

In progress Like / Dislike buttons

Post by Chilli-head on June 22nd 2020, 2:46 pm

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.
Chilli-head
Chilli-head
New Member

Posts : 4
Reputation : 2
Language : English

View user profile http://handmadelife.forumotion.net

Back to top Go down

In progress Re: Like / Dislike buttons

Post by skouliki on June 22nd 2020, 2:50 pm

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.
skouliki
skouliki
Manager
Manager

Female Posts : 9102
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Like / Dislike buttons

Post by SarkZKalie on June 22nd 2020, 5:10 pm

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
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1174
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

TonnyKamper likes this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Trych on June 24th 2020, 8:30 am

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?
Trych
Trych
New Member

Posts : 22
Reputation : 1
Language : French/english

View user profile https://www.facebook.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by skouliki on June 24th 2020, 8:36 am

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;
}
skouliki
skouliki
Manager
Manager

Female Posts : 9102
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Trych on June 24th 2020, 9:32 am

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:
Like / Dislike buttons Image010
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. Smile
Trych
Trych
New Member

Posts : 22
Reputation : 1
Language : French/english

View user profile https://www.facebook.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by skouliki on June 24th 2020, 10:16 am

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
skouliki
Manager
Manager

Female Posts : 9102
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper, mSyx and Trych like this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Trych on June 24th 2020, 11:56 am

@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 Smile thank you for taking time to send the code also I very much appreciate it!
Trych
Trych
New Member

Posts : 22
Reputation : 1
Language : French/english

View user profile https://www.facebook.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by The Godfather on June 24th 2020, 5:31 pm

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.
The Godfather
The Godfather
Administrator
Administrator

Posts : 3542
Reputation : 652

View user profile

Back to top Go down

In progress Re: Like / Dislike buttons

Post by kic on June 26th 2020, 1:55 pm

@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!
avatar
kic
Forumember

Posts : 80
Reputation : 1

View user profile http://ex-iskon.forumcroatian.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Neptune- on June 26th 2020, 4:29 pm

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-
Neptune-
Forumember

Male Posts : 397
Reputation : 83
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

kic likes this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by kic on June 26th 2020, 4:45 pm

@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^^
avatar
kic
Forumember

Posts : 80
Reputation : 1

View user profile http://ex-iskon.forumcroatian.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Neptune- on June 26th 2020, 4:56 pm

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 ...
Neptune-
Neptune-
Forumember

Male Posts : 397
Reputation : 83
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

pedxz likes this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by pedxz on June 26th 2020, 5:19 pm

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
pedxz
pedxz
Forumember

Male Posts : 314
Reputation : 85
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Neptune- on June 26th 2020, 5:54 pm

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 Sad
Neptune-
Neptune-
Forumember

Male Posts : 397
Reputation : 83
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by pedxz on June 27th 2020, 2:01 am

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 Victory
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)
pedxz
pedxz
Forumember

Male Posts : 314
Reputation : 85
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

skouliki, sivastar, Bipo, Neptune- and JaneDoe like this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Neptune- on June 27th 2020, 3:06 am

Great job @pedxz !!
Neptune-
Neptune-
Forumember

Male Posts : 397
Reputation : 83
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

Bipo likes this post

Back to top Go down

In progress Re: Like / Dislike buttons

Post by Trych on June 27th 2020, 4:25 am

@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:
Like / Dislike buttons Image010
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. Smile

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 ? Razz
Trych
Trych
New Member

Posts : 22
Reputation : 1
Language : French/english

View user profile https://www.facebook.com/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by skouliki on June 27th 2020, 8:53 am

@Trych

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

Female Posts : 9102
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

In progress Re: Like / Dislike buttons

Post by jkh on June 27th 2020, 9:25 pm

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
jkh
Forumember

Posts : 472
Reputation : 15
Language : english

View user profile http://jillhavern.forumotion.net/

Back to top Go down

In progress Re: Like / Dislike buttons

Post by SLGray on June 27th 2020, 9:41 pm

@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.


Like / Dislike buttons Slgray10
Like / Dislike buttons Ssshfm13

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 47971
Reputation : 3373
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Back to top


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