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

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.

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:

Cool.

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.

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

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;".

Thanks for helping, marking this as "solved".