The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How can I change the Like/Dislike-image when hovering?

4 posters

Go down

Solved How can I change the Like/Dislike-image when hovering?

Post by Friendly Toucan April 6th 2023, 7:27 pm

Hello,

I am currently using this to change the standard image:

https://help.forumotion.com/t161901-can-i-replace-the-like-dislike-button-with-custom-images

How can I have another custom image appear when hovering?

phpBB3

Thanks.
Friendly Toucan
Friendly Toucan
Forumember

Posts : 243
Reputation : 4
Language : English

https://cerulean-blues.forumotion.com

Back to top Go down

Solved Re: How can I change the Like/Dislike-image when hovering?

Post by Razor12345 April 6th 2023, 8:40 pm

Good evening!

AP - Display - Templates - General - viewtopic_body

Find this code (Code from the topic you indicated):

Code:
<button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
<img src="[Link to image]">
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
<img src="[Link to image]">
            </button>

Replace with:

Code:
<button class="rep-button hover_effect_like {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
<img src="https://i.servimg.com/u/f38/14/73/12/96/gr12.png">
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button hover_effect_dislike {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
<img src="https://i.servimg.com/u/f38/14/73/12/96/gr12.png">
            </button>

Save. Publish.

AP - Display - Colors & CSS - CSS Stylesheet

Code:
.hover_effect_dislike:hover::after {
content: '';
  background-image: url(https://i.servimg.com/u/f38/14/73/12/96/yello10.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 10px;
}

.hover_effect_like:hover::after {
content: '';
  background-image: url(https://i.servimg.com/u/f38/14/73/12/96/gg12.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 10px;
}

Save.

You may need to change this setting depending on your images

Code:
left: 10px;

Result:

How can I change the Like/Dislike-image when hovering? Screen75

How can I change the Like/Dislike-image when hovering? Screen74


How can I change the Like/Dislike-image when hovering? Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1542
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

sivastar and Friendly Toucan like this post

Back to top Go down

Solved Re: How can I change the Like/Dislike-image when hovering?

Post by Friendly Toucan April 6th 2023, 10:06 pm

Cool. Very Happy

Just one slight problem...

I was using...

Code:
.rep-button img {
height: 50px;
width: 50px;
}

... in order to "resize" the 250×250 image I had.

How can I do the same thing for the "hover image"? It's also 250×250, but want to get it to 50×50 through the CSS.

Tried to just edit the height/width in the code provided, but did not work.

Ideas?

Thanks.
Friendly Toucan
Friendly Toucan
Forumember

Posts : 243
Reputation : 4
Language : English

https://cerulean-blues.forumotion.com

Back to top Go down

Solved Re: How can I change the Like/Dislike-image when hovering?

Post by brandon_g April 7th 2023, 3:52 am

Hello,

If you can open up 1 section to guests temporarily of the forum or provide me via pm with a test account and I will take a look at your forum using the browser dev tools and find you a solution.

Otherwise you could try adding !important after 50px on each line and see if it does anything. If there is conflicting css that effect height and width, !important will make that css take precedence.

-Brandon


How can I change the Like/Dislike-image when hovering? Brando10
Remember to mark your topic How can I change the Like/Dislike-image when hovering? Solved15 when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?

How can I change the Like/Dislike-image when hovering? Scre1476
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g
brandon_g
Manager
Manager

Male Posts : 10110
Reputation : 923
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

Solved Re: How can I change the Like/Dislike-image when hovering?

Post by Friendly Toucan April 7th 2023, 6:31 am

brandon_g wrote:Otherwise you could try adding !important after 50px on each line and see if it does anything. If there is conflicting css that effect height and width, !important will make that css take precedence.

Already tried, didn't work.

... But what did work was "background-size: 50px 50px;". thumleft

Thanks for helping, marking this as "solved".
Friendly Toucan
Friendly Toucan
Forumember

Posts : 243
Reputation : 4
Language : English

https://cerulean-blues.forumotion.com

Razor12345 likes this post

Back to top Go down

Solved Re: How can I change the Like/Dislike-image when hovering?

Post by SLGray April 7th 2023, 8:31 am

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


How can I change the Like/Dislike-image when hovering? Slgray10

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

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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