Styles of YAGA Reacations are not good and the images are large.

bishwasbh

I've installed YAGA reactions in my Forum and my member are complaining that the photo of reacter is too large. And I've seen the actual size of reaction is small and cute. ALso all the color of my reactions are black. ANd we need to hover over that post or comment to see the reaction buttons. Please help us.

K17

Wich version of YAGA are you using ? Lateset is 2.0.2 and can be downloaded here: https://github.com/bleistivt/yaga only.

Reactions showing only while your hover a post is the regular YAGA behaviour, but this is done trhought CSS. To show them at all times you can use this in your CSS (works with CSSEdit plugin aswell):

.Item .Reactions > * {
    visibility: visible;
}

Reacter's avatar size is defined by the .PhotoWrapSmall css, actually depending on your theme, so to change the photo size only in reactions, you may use:

.UserReactionWrap > .PhotoWrapSmall {
    width: 30px;
    height: 30px;
}

Also reactions icons are images in YAGA, not font icons like here (here it is not YAGA), so you will also hace to use your personal sprites images and adjust your CSS according your needs. By default it's black, but two other versions are provided (White and Brodered). For exemple:

/* Bordered blueish ones */
.ReactSprite {
    background-image: url('/plugins/yaga/design/images/action-sprites-bordered.png') !important;   
}
/* or white ones */
.ReactSprite {
    background-image: url('/plugins/yaga/design/images/action-sprites-white.png') !important;   
}

You may want to use the absolute path (like https://yourforum.ext/plugins/yaga/... for image path) if the above do not work.

for exemple.

If you have any questions, don't hesitate :)

If you are using the keystone theme you may want to use this aswell:

.Reactions .Count {
    line-height: inherit;
    padding: 1px 0.8ex;
    color: white;
}
.Reactions .ReactButton:hover .Count {
    background-color: #979797;
}

so now it looks like this:

If you play around with CSS you can make it look like you want.

RayN

Hi. I just upgraded to Vanilla 3.3 and now all my reaction icons are black. I've done just about all I can do to try to change that to no avail. I've edited style.css as well as a number of other .css files to try to get the "bordered" icons to show up. No luck. Any ideas for me?

Thanks

K17

Hi, I did this tutorial using Vanilla 3.3 actually, YAGA 2.0.2 (available on github only) and the CSSEdit addon.

I think if you use a custom.css for your theme, as the reactions css are called after your theme own css it will not show how you want it until you ake some "!imoortant" stuff.

Bleistivt

Just a quick notice: The version of YAGA on github https://github.com/bleistivt/yaga has a new reaction theming system which should alleviate all of these problems. It is currently in beta, so I would appreciate some feedback if you spot any more problems :)