Yaga Reactions Help

testing3

Hello,

I tried to modify the reactions and achieved my desired look, I've also tried to remove the reaction names, and achieved that by a "noob" way, I have just put " ," in the name field in the Yaga settings, the names are replaced by a space, and that's exactly what I wanted to make it, but now the reaction's names are also gone from the profile page where it counts all the received reactions.

So is there someone who could guide me to the right direction to add the reaction names on the profile page? I'm not a developer, I'm a newbie and depend on google all the time, but google couldn't help me in this case 😁

And is there any way to get notifications when someone reacts on a post?

@donshakespeare could you please help here? Or anyone else who is willing to help a newbie 😉

Thank you!

Kind Regards

Profile Page-

phreak

@testing3: Keep the names of the reactions in the YAGA settings. Hiding the reactions names is better be done through CSS.

testing3

@phreak thank you so much for your reply and guidance, I’ll try that 👍

Kind Regards

theportablegeek

Hey @testing3 would you be willing to share your code to get that styling?

phreak

@theportablegeek: Depending on your setup... Try...

.Item.ItemComment .Reactions .ReactLabel {display: none;}

Here a screenshot how we implemented it in a parenting community. Though we created our own SVG assets which are more clean than the one that come with YAGA. In comparison to @testing3's image we put focus on the comment message and lighten up other elements around.

testing3

@theportablegeek here are the css codes I've used for styling-

Please note that I'm not a developer, I've learned these codes online, so please pardon me for any mistake and give suggestions if there is anything which can be improved.

//for border-
.Item .Reactions {
    border-style: solid;
    border-width: 1.5px;
    border-radius: 8px;
    width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;
    padding: 4px;
}

//Added this code to remove border if there is no content, because the "Quote" and the reactions are not avalable for guest users.

.Item .Reactions:empty {
    border: none;
}

//the border was looking wide on mobile devices so I used this code to narrow it down-

@media all and (max-width: 600px) {
.Item .Reactions {
    padding: 0;
}
}

//I used this code to hide the reaction names as suggested by phreak-
.ReactLabel {
    display: none;
}

I've also edited the default SVG file in- applications/yaga/design/images/sprite.svg and added my custom smileys and then called it by editing the css file in- applications/yaga/design/reactions.css, I've edited line no:-

121- background-image: url('images/action-sprites.svg') !important;

Using SVG file instead PNG will greatly improve the icons quality and make them sharp and clear.

Hope it helps 😊

I'm a newbie and don't know if it will hurt performance or anything else, so any feedback from professionals would be GREATLY appreciated 👍️

Kind Regards

theportablegeek

https://open.vanillaforums.com/discussion/comment/259811#Comment_259811

Thank you so much!