Reaction button hidden until hovered over

[aardvarked]

Hello! Not sure if this is the right forum but it seemed like the best fit

I've just changed some of the reactions on my forum, using transparent pngs. For some reason, the reaction icon (the default thumb on this forum) is now hidden until it's hovered (on desktop) or selected (on mobile/tablet).

I've had a look at the HTML and CSS but can't see why this would happen, it looks like it's looking for the correct image, and finding it, but it's just not displaying.

An example here - http://www.talkmanutd.com/topic/3079-player-ratings-man-utd-vs-west-ham/?tab=comments#comment-280151

 

Thanks!

[steve00]

1 hour ago, aardvarked said:

Hello! Not sure if this is the right forum but it seemed like the best fit

I've just changed some of the reactions on my forum, using transparent pngs. For some reason, the reaction icon (the default thumb on this forum) is now hidden until it's hovered (on desktop) or selected (on mobile/tablet).

I've had a look at the HTML and CSS but can't see why this would happen, it looks like it's looking for the correct image, and finding it, but it's just not displaying.

An example here - http://www.talkmanutd.com/topic/3079-player-ratings-man-utd-vs-west-ham/?tab=comments#comment-280151

 

Thanks!

If you mean the yellow hand with thumb up then it is showing for me using both IE11 and FF browsers

[sweethoney]

the report button hovers but i can see the image to

[aardvarked]

Sorry, I forgot you wouldn't be able to see the reaction options unless you were logged in..! Basically where the white heart on the grey background is on these forums (bottom right of the posts), my board is displaying an empty icon that only appears once you hover over it. This must be because I removed the heart icon and replaced it with another one, however the link to the image is present in the html but for some reason it's not showing up

Comparison screenshot between my forums and this one:

 

 

Edited August 16, 2017 by aardvarked

[steve00]

41 minutes ago, aardvarked said:

Sorry, I forgot you wouldn't be able to see the reaction options unless you were logged in..! Basically where the white heart on the grey background is on these forums (bottom right of the posts), my board is displaying an empty icon that only appears once you hover over it. This must be because I removed the heart icon and replaced it with another one, however the link to the image is present in the html but for some reason it's not showing up

Comparison screenshot between my forums and this one:

 

 

Difficult to solve without actually viewing problem.

Did you remove the 'blue background' from around the heart a well as replace heart (if so and your icon is white then not going to see it on a white background)

Other than that cannot help without as mentioned viewing issue

[aardvarked]

21 hours ago, steve00 said:

Difficult to solve without actually viewing problem.

Did you remove the 'blue background' from around the heart a well as replace heart (if so and your icon is white then not going to see it on a white background)

Other than that cannot help without as mentioned viewing issue

Nope, the thumb icon is yellow and visible once you've reacted to a post

I've PMed you with an account, if you're able to take a look that would be massively helpful!

[steve00]

as thought background is transparent and the thumb is white

.ipsReact_button {
    background: transparent

in custom.css add:

.ipsReact_button {
    background: #000;
}

obviously change the 000 to your own requirements

[aardvarked]

2 hours ago, steve00 said:

as thought background is transparent and the thumb is white

.ipsReact_button {
    background: transparent

in custom.css add:

.ipsReact_button {
    background: #000;
}

obviously change the 000 to your own requirements

I'm an idiot, I didn't realise the css would change the yellow icon to be white!

Thanks so much for you help

Edited August 17, 2017 by aardvarked

[steve00]

13 minutes ago, aardvarked said:

I'm an idiot, I didn't realise the css would change the yellow icon to be white!

Thanks so much for you help

I did mention previously

Quote

Did you remove the 'blue background' from around the heart a well as replace heart (if so and your icon is white then not going to see it on a white background)

 

[Angel Costa]

Just to help others. For me what helped was:

.ipsReact_types ul {
    background: #f6f6f6;
}
.ipsReact_button{
  filter: grayscale(0%) brightness(100%);
  opacity: 0.5;
}
.ipsReact_button:hover {
  opacity:1;
}

In the custom.css

[Gabri]

On 11/27/2017 at 3:02 AM, Angel Costa said:

Just to help others. For me what helped was:

.ipsReact_types ul {
    background: #f6f6f6;
}
.ipsReact_button{
  filter: grayscale(0%) brightness(100%);
  opacity: 0.5;
}
.ipsReact_button:hover {
  opacity:1;
}

In the custom.css

 

 

SUPER USEFULL!!!

[Angel Costa]

Just to point that this 3 year old issue is still going on in the last version (4.5).

[Angel Costa]

Four years laters and the dev team has not fixed this.

[SeNioR-]

On 6/14/2021 at 3:46 PM, Angel Costa said:

Four years laters and the dev team has not fixed this.

I think that this is not a bug, icon just blends into the background.

Edited June 15, 2021 by SeNioR-

[Angel Costa]

On 6/15/2021 at 11:09 AM, SeNioR- said:

I think that this is not a bug, icon just blends into the background.

It is a bug. The icon only shows when hovered. Does this not happen with you?