XF 2.1 Reactions Size

[Davyc]

I'm wondering if there is a way to make the reactions image bigger in reaction tray/frame that lies at the bottom of each post. At present they are 16 x 16px in size and are so small they just look like dots. The images in the selection tray are the size (or perhaps slightly smaller) I would like to see them at (screenshots below):

Selection Tray:



The same in the reactions tray:



How I would prefer it to look:



Is this doable and feasible?

With thanks

 

[Davyc]

Solved using CSS and some adjustments to the image sizes.



Not as big as I'd have liked, but bigger caused issues elsewhere - so I've settled for a halfway house lol.

 

[HuskerGarrett]

How did you figure out how to increase the size?

 

[Davyc]

How did you figure out how to increase the size?

To be honest I can't remember and I don't have an active site to go back and see what I did lol. It's all just CSS changes, if you are familiar with CSS use the browser console to make the changes you want and then copy the CSS to your extra.less file

 

[HuskerGarrett]

To be honest I can't remember and I don't have an active site to go back and see what I did lol. It's all just CSS changes, if you are familiar with CSS use the browser console to make the changes you want and then copy the CSS to your extra.less file

Haha no worries, I know it has been awhile. The extent of my CSS experience is copying code and pasting it into extra.less, so not a lot. I'll see what I can do. Thank you!

 

[lucien_lies]

In the case that someone needs it

.reaction-image {
    height: 32px;
    width: 32px;
}

 

[Davyc]

Now that I am becoming conversant with Xenforo once more I retraced my steps to get the reaction images bigger, but it involves more than just making the images bigger, so I found. The reactions are a little more complicated than they first appear to be and some additional out-of-the-box thinking is required to get the perfect (or as near to perfect) result. This is what I added to my extra.less template and it returned the exact results I was aiming for. You may need to do some detective work to ascertain your sprite numbers, but it's worth it.

/* Change size of reactions and various other changes for reactions */
.actionBar-set.actionBar-set--external .actionBar-action {
    padding: 8px;
    vertical-align: middle;
    padding-bottom: 5px;
}
.message .reactionsBar
{
    height: 40px;
}
.reaction--small.reaction--1 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
   }
.reaction--small.reaction--2 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--3 .reaction-sprite {
     width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--4 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--5 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--6 .reaction-sprite {
     width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reactionsBar a {
    color: inherit;
    margin-left: 14px;
    vertical-align: middle;
}
.reaction-image {
    vertical-align: text-bottom;
    max-width: 32px;
}
.reactionSummary>li {
    display: inline-block;
    height: 28px;
    width: 28px;
    padding: none;
    margin: -2px 0;
    border-radius: 50%;
    position: relative;
    margin-left: -6px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--1 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--2 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--3 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--4 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--5 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--6 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.reactionSummary>li:nth-child(1) {
    z-index: 3;
    margin-left: 0;
    margin-right: 10px;
}

I found that whilst increasing the general size will work, it can throw up anomalies that are undesirable, which is why I went to such lengths to get it 'just right'. Have a play with the code and see what you make of it and if you can do it with less code, great, I'd love to see it

 

[Cindy]

Now that I am becoming conversant with Xenforo once more I retraced my steps to get the reaction images bigger, but it involves more than just making the images bigger, so I found. The reactions are a little more complicated than they first appear to be and some additional out-of-the-box thinking is required to get the perfect (or as near to perfect) result. This is what I added to my extra.less template and it returned the exact results I was aiming for. You may need to do some detective work to ascertain your sprite numbers, but it's worth it.

/* Change size of reactions and various other changes for reactions */
.actionBar-set.actionBar-set--external .actionBar-action {
    padding: 8px;
    vertical-align: middle;
    padding-bottom: 5px;
}
.message .reactionsBar
{
    height: 40px;
}
.reaction--small.reaction--1 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
   }
.reaction--small.reaction--2 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--3 .reaction-sprite {
     width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--4 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--5 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reaction--small.reaction--6 .reaction-sprite {
     width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
}
.reactionsBar a {
    color: inherit;
    margin-left: 14px;
    vertical-align: middle;
}
.reaction-image {
    vertical-align: text-bottom;
    max-width: 32px;
}
.reactionSummary>li {
    display: inline-block;
    height: 28px;
    width: 28px;
    padding: none;
    margin: -2px 0;
    border-radius: 50%;
    position: relative;
    margin-left: -6px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--1 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--2 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--3 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--4 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--5 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.actionBar-set.actionBar-set--external .reaction--small.reaction--6 .reaction-sprite {
    width: 20px;
    height: 20px;
    margin-top: -3px;
    padding: 2px;
    border-radius: 3px;
}
.reactionSummary>li:nth-child(1) {
    z-index: 3;
    margin-left: 0;
    margin-right: 10px;
}

I found that whilst increasing the general size will work, it can throw up anomalies that are undesirable, which is why I went to such lengths to get it 'just right'. Have a play with the code and see what you make of it and if you can do it with less code, great, I'd love to see it

Been doing my best to fiddle with the settings but I'm admittedly very new to all this. Would you happen to know what settings in particular I'd need to fiddle with?

As you can see, the reactions are real small and tucked away in the corner.

 

[Davyc]

With this bit of code, you must determine what your reaction numbers are - these will differ for everyone depending on what images you're using. Use the browser console (F12) to see what they are.

.reaction--small.reaction--1 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
   }

 

[Cindy]

With this bit of code, you must determine what your reaction numbers are - these will differ for everyone depending on what images you're using. Use the browser console (F12) to see what they are.

.reaction--small.reaction--1 .reaction-sprite {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    padding: 2px;
    vertical-align: middle;
   }

OHHHH okay I get it now. Thank you!