CreateMyBB Support Forums
My Reactions seems harccoded at large size - Printable Version

+- CreateMyBB Support Forums (https://support.createmybb.com)
+-- Forum: CreateMyBB Support (https://support.createmybb.com/forumdisplay.php?fid=5)
+--- Forum: Plugins & Coding Support (https://support.createmybb.com/forumdisplay.php?fid=15)
+--- Thread: My Reactions seems harccoded at large size (/showthread.php?tid=2759)



My Reactions seems harccoded at large size - Alan sh - 07-14-2018

I don't seem to be able to change the size of the emojis that appear. I have tried setting the sizes differently in control panel, but it makes no difference.

Is anyone else seeing this?

Forum is cb1300.createmybb4.com

thanks

Alan


RE: My Reactions seems harccoded at large size - liondog72 - 07-14-2018

Just quickly tested this on my test forum with the same results.


RE: My Reactions seems harccoded at large size - Jon - 07-14-2018

If you are using the emoji's yes it it is set to one size since they are image based.


RE: My Reactions seems harccoded at large size - Alan sh - 07-14-2018

I asked over on Gitbub and was told

You don't seem to have the CSS file installed, there's steps in the readme to add it as it's not done automatically when installing the plugin.

Jon, can you add this please? 

Alan


RE: My Reactions seems harccoded at large size - Jon - 07-15-2018

Can you send me the link on github


RE: My Reactions seems harccoded at large size - liondog72 - 07-15-2018

To fix this do the following:

Go to ACP > Templates & Style > **choose theme** > Add Stylesheet > enter 'myreactions.css' (without quotes) into 'File Name', select 'Write my own content',

Paste in the following:


Code:
.myreactions-container {
 padding: 10px;
 border-top: 1px solid #ccc;
}
.myreactions-container.myreactions-profile-container {
    padding: 0;
    border: 0;
}
.myreactions-reactions, .myreactions-reaction {
 background: #f5f5f5;
 border: 1px solid #ccc;
 display: inline-block;
 border-radius: 6px;
}

.myreactions-reaction {
 display: inline-block;
 margin: 2px;
 padding: 5px;
 float: left;
}
.myreactions-reactions {
    float: left;
    margin-right: 5px;
}
.myreactions-reaction span {
 float: right;
 margin-left: 5px;
}
.myreactions-reactions img {
 margin: 5px;
 float: left;
 display: inline-block;
}

/* Add Reaction */
.reaction-add {
 display: none;
 margin: 0;
 float: left;
 cursor: pointer;
}
.reaction-add span {
 display: none;    
}
.myreactions-reaction + .reaction-add {
 margin: 2px;    
}
.myreactions-container:hover .reaction-add, .reaction-add.reaction-add-force, .reaction-add.reaction-add-force span {
 display: inline-block;
}

/* Reacted */
.myreactions-container .myreactions-reacted img {
 position: relative;
}
.myreactions-container .myreactions-reacted img + span {
    cursor: pointer;
    display: inline-block;
   margin-right: 5px;
}

/* Reaction Modal */
.myreactions-react img {
    width: 24px;
    height: 24px;
    padding: 5px;
}
.reaction-add, .myreactions-react img {
    cursor: pointer;
}
.myreactions-react img.disabled {
    cursor: not-allowed;
    opacity: 0.25;
    -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

/* Reaction image sizes */
.myreactions-container.reactions-16 img {
 width: 16px;
 height: 16px;
}
.myreactions-container.reactions-16 .myreactions-reaction span, .myreactions-container.reactions-16 .myreactions-reacted {
 font-size: 12px;
 line-height: 16px;
}
.myreactions-container.reactions-16 .myreactions-reactions .reaction-add + span {
 font-size: 12px;
 line-height: 26px;
}
.myreactions-container.reactions-16 .myreactions-reacted img {
 top: 4px;
}
.myreactions-container.reactions-20 img {
 width: 20px;
 height: 20px;
}
.myreactions-container.reactions-20 .myreactions-reaction span, .myreactions-container.reactions-20 .myreactions-reacted {
 font-size: 13px;
 line-height: 20px;
}
.myreactions-container.reactions-20 .myreactions-reactions .reaction-add + span {
 font-size: 13px;
 line-height: 30px;
}
.myreactions-container.reactions-20 .myreactions-reacted img {
 top: 6px;
}
.myreactions-container.reactions-24 img {
 width: 24px;
 height: 24px;
}
.myreactions-container.reactions-24 .myreactions-reaction span, .myreactions-container.reactions-24 .myreactions-reacted {
 font-size: 14px;
 line-height: 24px;
}
.myreactions-container.reactions-24 .myreactions-reactions .reaction-add + span {
 font-size: 14px;
 line-height: 34px;
}
.myreactions-container.reactions-24 .myreactions-reacted img {
 top: 7px;
}
.myreactions-container.reactions-28 img {
 width: 28px;
 height: 28px;
}
.myreactions-container.reactions-28 .myreactions-reaction span, .myreactions-container.reactions-28 .myreactions-reacted {
 font-size: 15px;
 line-height: 28px;
}
.myreactions-container.reactions-28 .myreactions-reactions .reaction-add + span {
 font-size: 15px;
 line-height: 38px;
}
.myreactions-container.reactions-28 .myreactions-reacted img {
 top: 7px;
}
.myreactions-container.reactions-32 img {
 width: 32px;
 height: 32px;
}
.myreactions-container.reactions-32 .myreactions-reaction span, .myreactions-container.reactions-32 .myreactions-reacted {
 font-size: 16px;
 line-height: 32px;
}
.myreactions-container.reactions-32 .myreactions-reactions .reaction-add + span {
 font-size: 16px;
 line-height: 42px;
}
.myreactions-container.reactions-32 .myreactions-reacted img {
 top: 8px;
}


Click save and now all should work correctly.

Go to ACP > Forums & Posts > MyReactions to manage


RE: My Reactions seems harccoded at large size - Alan sh - 07-15-2018

Jon,

Git link is https://github.com/MattRogowski/MyReactions/issues/56

I'll see if I can do the fix above.

Alan


RE: My Reactions seems harccoded at large size - Alan sh - 07-15-2018

I've applied the fix above and it works.

Alan


RE: My Reactions seems harccoded at large size - liondog72 - 07-15-2018

Jon, can you add the fix to the documentation section? I was going to add it myself, but I'm unable to add new threads in that section.