Re: Smilie Sizing & Positioning?

Posted by GregChapman on Jul 03, 2019; 11:50am
URL: https://support.nabble.com/Smilie-Sizing-Positioning-tp7603817p7603834.html

I think I have the solution!

Others coming to this topic later need to know that  you were referencing Hugo's post at:
http://support.nabble.com/How-to-add-edit-emoticons-i-e-smileys-tp7114253p7117514.html
and that there's another segment of CSS code in your forum.

The version in the CSS box in my test forum now reads:

/* Fit Large images to width */
div.root-text img, div.message-text img  {
  display: block;
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}
div.root-text img.smiley, div.message-text img.smiley  {
  display:inline;
}
/* End of Fit Large images to width */

It is that extra "smiley" part that keeps your standard smileys from also being centred!

As I explained earlier, the problem is that when you add your own smiley to the "smiley_table" macro, it has to be sourced from outside Nabble. That's because the standard smiley images are stored centrally on Nabble's servers and are not duplicated for each individual forum. The Macro "smiley" detects the use of the standard smileys and adds the necessary file path to the central image store, while for external files, it retains the supplied absolute address.

There is some JavaScript within another macro, "editor_smiley_button", that creates the HTML that appears on the page when an external smiley is used and generates the special Nabble "smiley image" tag that appears it the edit box when you select a standard smiley. I can find no local macro that converts the "smiley image" tag to standard a standard HTML "img" tag with the "class='smiley'" attribute, so I assume it is done centrally on Nabble's servers, as a forum page is served.

So what we need to do is make sure that the external files referenced in the smiley table are treated as smileys and not as standard images and so not subject to the CSS code that forces all images appear centred on their own line with larger ones shrunk to fit the available width.

To do that you need to edit the "editor_smiley_button" macro. After clicking the "Over-ride the macro" button you should edit line #9 to read:

this.setSelection( textarea, "<img class='smiley' src=\""+image+"\"/>" );