Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
My Reactions seems harccoded at large size
#1
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
Reply
#2
Just quickly tested this on my test forum with the same results.
Reply
#3
If you are using the emoji's yes it it is set to one size since they are image based.
Please don't PM me for support. Try to post a topic allows other people to learn.
[Image: sig-jon.png]
Like CreateMyBB? Support me at https://www.patreon.com/vbgamer45/
Reply
#4
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
Reply
#5
Can you send me the link on github
Please don't PM me for support. Try to post a topic allows other people to learn.
[Image: sig-jon.png]
Like CreateMyBB? Support me at https://www.patreon.com/vbgamer45/
Reply
#6
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
Reply
#7
Jon,

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

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

Alan
Reply
#8
I've applied the fix above and it works.

Alan
Reply
#9
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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)