How to add/edit emoticons, i.e. smileys

[cinemapersians]

Hugo,

I'm trying to access the area on Nabble where I can add/edit the emoticons, i.e. smileys for our Forum, but I'm having trouble with that.  I can see the source code, but I can't find the location to edit it.  I've read previous support posts on how to do it, but nothing listed was usable.  You posted instructions, but the web site you listed (from 2009) is no longer found, and issues an error 500.

http://n2.nabble.com/How-to-substitute-the-smileys-tp1299049p2785579.html

I figure I'm receiving this error because the procedure has changed so the page was removed, but I'm not completely sure.

Also, in another post from you on the free support site listed this helpful tip:

html>body img[src='/images/icon_post_message.png'] {
  width: 0; height: 0; padding-top: 16px; padding-left: 16px;
  background: url('...your-image-url-goes-here...') no-repeat -112px 0;
}

However, the source code for the emoticons is in javascript, not html and looks like this:

href\x3D\"javascript:Nabble.smiley(\'anim_confused.gif\')\"\x3E \x3Cimg src\x3D\"/images/smiley/anim_confused.gif\" alt\x3D\"Confused\" border\x3D\"0\" /\x3E \x3C/a\x3E\x3C/td\x3E \x3Ctd\x3E\x3Ca

I have the URLs for the emoticons I want to add.  I just need a way to edit the source code and a quick/simple way to do this.  Please help me, and I'm sure others with this issue.  I'm doing support for this site as a favor to a friend, but this is becoming much more time intensive than I really have for a simple favor.  Thanks!

[GregChapman]

cinemapersians wrote

You posted instructions, but the web site you listed (from 2009) is no longer found, and issues an error 500.

http://n2.nabble.com/How-to-substitute-the-smileys-tp1299049p2785579.html

I figure I'm receiving this error because the procedure has changed so the page was removed, but I'm not completely sure.

It may have changed location from the link you found as there appears to be part of that URL missing. Try:

http://nabble-support.1.n2.nabble.com/How-to-substitute-the-smileys-td1299049.html#a2785579

but, as you say, that refers to old code.

However, the source code for the emoticons is in javascript, not html and looks like this:

href\x3D\"javascript:Nabble.smiley(\'anim_confused.gif\')\"\x3E \x3Cimg src\x3D\"/images/smiley/anim_confused.gif\" alt\x3D\"Confused\" border\x3D\"0\" /\x3E \x3C/a\x3E\x3C/td\x3E \x3Ctd\x3E\x3Ca

I'm not yet an expert on NAML, but I think you're looking in the wrong place. I did a search, while writing this message, and came up with this path to the macro you need (I think!):

reply › new_post › new_post › reply_form › message_control › editor_toolbar › editor_smiley_button › smiley_table

[DavidJCobb]

GregChapman wrote

I'm not yet an expert on NAML, but I think you're looking in the wrong place. I did a search, while writing this message, and came up with this path to the macro you need (I think!):

reply › new_post › new_post › reply_form › message_control › editor_toolbar › editor_smiley_button › smiley_table

That looks like the right macro, but it looks like everything takes filenames. If the OP wants to specify whole URLs (i.e. to images hosted on an external service), I think they'd have to modify the "smiley" macro and the "Nabble.smiley" JavaScript function (to allow them to specify whole paths). They would then need to edit the "smiley_table" macro, to actually add the new smileys.

[cinemapersians]

Greg,

I appreciate your attempt to assist me.  However, I posted in the NAML Free Support area because Hugo requested I do so.

The link you provided was to an old post that I found and quoted in my original post, but is not helpful to me.  I believe Hugo is going to assist me with this, but I really do appreciate the attempt!

[Hugo <Nabble>]

The link that Greg posted is correct and should replace that old broken link. That CSS solution still works, but it is not ideal. There is a much better solution that I want to explain now.

Customizing the list of smileys

You should change the smiley_table macro. Here is the current path:

reply › new_post › new_post › reply_form › message_control › editor_toolbar › editor_smiley_button › smiley_table

You can use the macro search to go directly to that macro. At the beginning of that code you will see a comment that says:

        You can edit the table below if you want to customize the list of smileys.
        Use the 'smiley' command just like in the default cases, but you can print the
        full URL of your smileys in the 'src' attribute. Example:
        <n.smiley name="My Smiley" src="http://domain.com/image.gif"/>

So basically you can edit that table and provide full URLs in the src attribute. The javascript around this feature is prepared for that change, so it should just work. You can try that solution and let us know if you still have issues.

[cinemapersians]

Hugo,

I'm afraid I'm going to need a little more help than that.

Here are the steps I know so far:

1.  I go to our Nabble Forum through Weebly.

2.  I click the See how NAML generates this page link at the bottom right of the Forum so I can access the NAML code.

And then what?  Exactly WHERE do I run this macro?

How do I access the area where the current emoticons are?  Help!

[GregChapman]

cinemapersians wrote

1.  I go to our Nabble Forum through Weebly.

2.  I click the See how NAML generates this page link at the bottom right of the Forum so I can access the NAML code.

3. On the initial NAML screen, click on the TOOLS (cog wheel) link and select SEARCH MACROS from the menu that appears.

4. Select the "Macro source contains" option and enter "smiley" in the search field, then click the SEARCH button.

5. On the list of macros found, select the "smiley_table" link.

You are then at the macro that generates the default set of emoticons that Hugo refers to and should be able to edit the table that defines the emoticons. (You don't actually "run" it. The other macros do that for you when using the forum.)

Do you need further help in editing the HTML you find there?

[cinemapersians]

Hugo, Greg, and David:

Thank you for your kind assistance in locating the smiley table.

I decided to just add one and test it.  I know the URL to the smiley I added is correct, as is my code.  I am completely comfortable writing and editing HTML code, by the way, and do it often for my work and for web sites I am webmaster of, just to be clear.

Anyway, I added the URL for the one smiley, saved my changes and was able to use it successfully.  In other words, providing a full URL path to an external source appears to be working correctly.

If I need any more assistance, I'll give a shout in this thread.

Thanks again!

[cinemapersians]

CONTENTS DELETED

The author has deleted this message.

[admin eden]

I have got as far as the 'smiley table' but am unsure of how to add new 'smiley' or 'emoticons'... can you talk me through it please... thanks

[GregChapman]

Hi,

When you reach the smiley table you'll see large button at the top of the screen "Override this macro". Click that! That will produce a second editable version of the macro above the existing version. Once your edit is complete click the "Save changes" button.

A comment in the code towards the top explains what it needed:

You can edit the table below if you want to customize the list of smileys.
Use the 'smiley' command just like in the default cases, but you can print the
full URL of your smileys in the 'src' attribute. Example:
< n.smiley name="My Smiley" src="http://domain.com/image.gif"/>

You'll see that the table that contains the table contains a number of table rows (< tr>...< /tr>) and that each row contains a number of table data cells (< td>...< /td>) Just substitute the data for your preferred smiley in any of the lines:
< td>< n.smiley name="My Smiley" src="http://domain.com/image.gif"/>< /td>

If you want to keep all the existing smileys then you can either make each row longer or add an extra row by adding the necessary < tr>...< /tr> tags.

Just have a play. If it all goes horribly wrong all you need to do is click the button "Remove this override" and you'll be back where you started.

[admin eden]

Thanks! That is awesome Greg

Will give it a go....

[admin eden]

Ahhhhhhhh HELP.... I was doing really really and then I got this....

  Error Found
An error was found in the NAML code of this application – Hide Details | Go to NAML Editor
parse exception in custom_tweak:smiley_table - invalid quoted char '<' at line 84
  in custom_tweak:smiley_table:84

It has changed the colours of my whole site and I can't get back in to edit the error.... what can I do? Or can you help?

thanks

[admin eden]

Phew! Have sorted it...