Latest topics
» Widget : Recent Members
by WinaTickets Today at 03:11

» How To Install the Code Snippet Button
by SLGray Yesterday at 20:56

» Select Button
by SLGray Yesterday at 20:25

» FM Themes
by SLGray Yesterday at 16:48

» User - Made Creations
by SLGray Yesterday at 16:48

» The Football Forums
by Mati Yesterday at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Yesterday at 12:33

» Search Bar Options
by Samantha NL Yesterday at 11:38

» Chit Chat Thread
by Jazeon Yesterday at 05:42

» Christmas logo
by Teo! Yesterday at 03:56

» SyncEditor
by keko_ferkeko Yesterday at 00:31

» Private message bg color
by Mr.Alam Thu 08 Dec 2016, 22:54

» Multi-step Login Form
by Samantha NL Thu 08 Dec 2016, 12:54

» Member of the Month
by Samantha NL Thu 08 Dec 2016, 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Thu 08 Dec 2016, 10:49

Recent Tutorials
Who is online?
In total there are 7 users online :: 1 Registered, 0 Hidden and 6 Guests :: 1 Bot

WinaTickets

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Personal Emoticons

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 02 Sep 2016, 13:42

This plugin gives your members the ability to create their own personal list of emoticons which they can use in the editor. It's a great addition if you want to give your members the freedom to use the emoticons that they prefer ! These custom emoticons are unique to each member, and display at the top of the emoticon list by default. Wink


Click to view demo

This plugin is optimized to work on any forum version, if you have any trouble with the installation please leave a reply below.

Feel free to move onto the next step if you're ready to give your members the freedom of creating their own personal emoticon list ! Doff


1. Creating the profile field


Before we install this plugin we first need to create a new profile field for our members. Go to Admin Panel > Users & Groups > Profiles and create a new profile field with the following settings.

Type : Text zone ( DO NOT PICK text field )
Name : Personal Emoticons ( or Custom Emoticons )
Description : Your own personal list of emoticons.
URL icon : None
Necessarily filled ? : You choose
Display : Profile
Display type : Text
Who can modify the profile field value ? : Members, Moderators ( in case of questionable emoticons )
Display this field for users that are at least : You choose
Separator : Back to the line

Down below there should be additional information under text zone.

Default content :
Paste the following content as the default value for this field.
Code:
[table class="fa_personal_emoticons"][tr][td][/td][/tr][/table]

You can set the max length as you like.

When you're finished, your field should look similar to this :


If everything looks okay to you, click the save button ! Then edit the newly created field and click the "Replace the content" button at the very bottom to force the default value. Once you've done this you're ready to move onto the installation of the script. Thumb right



2. Installing the JavaScript


So that the new profile field functions correctly, we need to install a script. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Custom Emoticons
Placement : In all the pages
Paste the following script and click submit.
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t1012-user-generated-emoticons#21094';

  if (!window.localStorage) return;

  window.fa_pemoticons_config = {
    hide_field : false, // hide/show field on profile
    position : 'top', // position of personal emoticons ; top or bottom

    // language settings
    lang : {
      title : 'Personal Emoticons',
      desc : 'You can manage your personal emoticons below. These emoticons will display in the editor once you update your profile.',
      update : 'Update',
      upload : 'Upload',
      cancel : 'Cancel',
      add : 'Add more',
      delete : 'Delete',
      up : 'Move up',
      down : 'Move down'
    }
  };


  // load handler for iframes
  // adds custom emoticons once the frame is loaded
  window.fa_pemoticons_load = function() {
    var insertEmoticon = function () {
      $('#text_editor_textarea').sceditor('instance').insert('[img]' + this.src + '[/img] ');
    },

    injectEmoticons = function (emotes, body) {
      if (fa_pemoticons_config.position.toLowerCase() == 'top') {
        body.insertBefore(emotes, body.firstChild.nextSibling);
      } else {
        body.appendChild(emotes);
      }
    },

    body = $(this).contents().find('body')[0],
    div = $('<div id="fa_personal_emoticon_list" />')[0];

    if (body) {

      if (localStorage['fa_pemoticons_u' + _userdata.user_id]) {
        div.innerHTML = localStorage['fa_pemoticons_u' + _userdata.user_id];

        for (var a = div.getElementsByTagName('IMG'), i = 0, j = a.length; i < j; i++) {
          a[i].onclick = insertEmoticon;
        }

        injectEmoticons(div, body);

      } else {
        $.get('/u' + _userdata.user_id, function(d) {
          var emoticons = $('.fa_personal_emoticons img', d),
              i = 0,
              j = emoticons.length;

          if (j) {
            for (; i < j; i++) {
              emoticons[i].onclick = insertEmoticon;

              div.appendChild(emoticons[i]);
              div.appendChild(document.createTextNode('\u00A0'));
            }
          }

          localStorage['fa_pemoticons_u' + _userdata.user_id] = div.innerHTML;
          injectEmoticons(div, body);
        });
      }

    }
  };


  // add load handlers for each iframe
  $(function() {
    var button = $('.sceditor-button-emoticon')[0];

    if (button) {
      button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_pemoticons_load;
        this.onclick = null;
      };
    }

    $('iframe[src^="/smilies"]').load(fa_pemoticons_load);
  });


  // hide field in profile
  if (fa_pemoticons_config.hide_field) {
    $('.fa_personal_emoticons').closest('[id^="field_id"]').hide();
  }


  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_emoticons"/.test(a[i].value) && /profile_field/.test(a[i].id)) {

        // define global object
        window.fa_pemoticons = {

          // add new input to pemoticons_box
          add : function (value) {
            $('#pemoticons_box', fa_pemoticons.popup).append(
              '<div class="pemoticon_row">'+
                '<img class="pemoticon_preview" src="' + ( value ? value : 'http://illiweb.com/fa/empty.gif' ) + '" />'+
                '<input class="pemoticon_value inputbox" type="text" value="' + ( value ? value : '' ) + '" oninput="fa_pemoticons.preview(this)" />'+
                '<a class="pemoticons_action pemoticons_plus" href="#" onclick="fa_pemoticons.add(); return false;" title="' + fa_pemoticons_config.lang.add + '">+</a>'+
                '<a class="pemoticons_action pemoticons_minus" href="#" onclick="fa_pemoticons.remove(this); return false;" title="' + fa_pemoticons_config.lang.delete + '">-</a>'+
                '<a class="pemoticons_action pemoticons_up" href="#" onclick="fa_pemoticons.moveUp(this); return false;" title="' + fa_pemoticons_config.lang.up + '">▲</a>'+
                '<a class="pemoticons_action pemoticons_down" href="#" onclick="fa_pemoticons.moveDown(this); return false;" title="' + fa_pemoticons_config.lang.down + '">▼</a>'+
              '</div>'
            ).scrollTop(9999);
          },


          // remove input from pemoticons_box
          remove : function (that) {
            that.parentNode.parentNode.removeChild(that.parentNode);
          },


          // move the emoticon up in the list
          moveUp : function (that) {
            var prev = that.parentNode.previousSibling;

            if (prev) {
              prev.parentNode.insertBefore(that.parentNode, prev);
            }
          },


          // move the emoticon down in the list
          moveDown : function (that) {
            var next = that.parentNode.nextSibling,
                nextNext;

            if (next) {
              nextNext = next.nextSibling;

              if (nextNext) {
                next.parentNode.insertBefore(that.parentNode, nextNext);
              } else {
                next.parentNode.appendChild(that.parentNode);
              }
            }
          },


          // update the emoticon preview
          preview : function (that) {
            that.previousSibling.src = that.value ? that.value : 'http://illiweb.com/fa/empty.gif';
          },


          // update textarea with new value
          update : function () {
            var emoticons = $('.pemoticon_value', fa_pemoticons.popup),
                newVal = '[table class="fa_personal_emoticons"][tr][td]',
                i = 0,
                j = emoticons.length;

            for (; i < j; i++) {
              if (emoticons[i].value) {
                newVal += '[img]' + emoticons[i].value + '[/img]';
              }
            }

            fa_pemoticons.textarea.value = newVal + '[/td][/tr][/table]';
            fa_pemoticons.cancel();

            localStorage.removeItem('fa_pemoticons_u' + _userdata.user_id); // clear emoticon cache
          },


          // remove popup
          cancel : function () {
            document.body.style.overflow = '';
            document.body.removeChild(fa_pemoticons.popup);
            fa_pemoticons.popup = null;
          },


          // open servimg upload
          upload : function () {
            var win = window.open('http://www.servimg.com/',  '_blank', 'width=620,height=300');

            $.get('/privmsg?mode=post', function(d) {
              var email = d.match(/var servImgAccount = '(.*?)';/i),
                  id = d.match(/var servImgId = '(.*?)';/i),
                  f = d.match(/var servImgF = '(.*?)';/i);

              if (email && id && f && email[1] && id[1] && f[1]) {
                win.location.href = 'http://www.servimg.com/multiupload.php?&mode=fae&account=' + email[1] + '&id=' + id[1] + '&f=' + f[1];
              }
            });
          },

          popup : null,
          textarea : null
        };


        // assign handler to textarea to show popup
        a[i].onfocus = function() {
          this.blur();

          if (fa_pemoticons.popup) {
            fa_pemoticons.cancel();
          }

          var popup = $(
            '<div id="pemoticons_overlay">'+
              '<div id="pemoticons_modal">'+
                '<h1>' + fa_pemoticons_config.lang.title + '</h1>'+
                '<p>' + fa_pemoticons_config.lang.desc + '</p>'+
                '<div id="pemoticons_box"></div>'+
                '<div style="text-align:center;">'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.update + '" onclick="fa_pemoticons.update();" />'+
                  '&nbsp;'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.upload + '" onclick="fa_pemoticons.upload();" />'+
                  '&nbsp;'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.cancel + '" onclick="fa_pemoticons.cancel();" />'+
                '</div>'+
              '</div>'+
            '</div>'
          )[0],

          emoticons = this.value.match(/\[img\].*?\[\/img\]/gmi),
          i = 0,
          j = emoticons ? emoticons.length : 0;

          fa_pemoticons.popup = popup;
          fa_pemoticons.textarea = this;

          if (j) {
            for (; i < j; i++) {
              fa_pemoticons.add(emoticons[i].replace(/^\[img\]|\[\/img\]$/ig, ''));
            }
          } else {
            fa_pemoticons.add();
          }

          document.body.style.overflow = 'hidden';
          document.body.appendChild(popup);
        };


        // add modal styles to the document
        $('head').append(
          '<style type="text/css">'+
          '#pemoticons_overlay { font-family:arial; background:rgba(0, 0, 0, 0.5); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999; }'+
          '#pemoticons_modal { background:#EEE; width:290px; height:300px; border:1px solid #CCC; position:absolute; top:50%; margin-top:-150px; left:50%; margin-left:-145px; overflow:auto; }'+
          '#pemoticons_box { height:150px; text-align:center; margin:3px; overflow:auto; }'+
          '#pemoticons_modal p { font-size:12px; margin:0; }'+
          '#pemoticons_modal h1 { font-size:24px; margin:0; }'+
          '#pemoticons_modal h1, #pemoticons_modal p, #pemoticons_modal div { padding:3px; }'+
          'a.pemoticons_action { background:#69C; font-size:20px; color:#FFF; text-align:center; text-decoration:none; display:inline-block; height:16px; width:16px; line-height:16px; vertical-align:middle; margin:1px; border-radius:100%; }'+
          'a.pemoticons_up, a.pemoticons_down { font-size:10px; }'+
          'a.pemoticons_down { line-height:18px; }'+
          'a.pemoticons_minus { line-height:13px; }'+
          'a.pemoticons_action:hover { opacity:0.7 }'+
          'img.pemoticon_preview { width:20px; max-height:30px; vertical-align:middle; }'+
          'input.pemoticon_value { margin:0 3px; width:130px; }'+
          '</style>'
        );

        break;
      }
    }
  }
});

If you'd like to make any modifications to this plugin, please click the spoiler below to reveal the instructions.
Click to view modifications:
Below is a list of modifications that can be made to this plugin.

1. hide_field
The hide_field variable allows you to show / hide the field on the user profile page. If you don't want the emoticons of members visible to everyone, simply set this variable to true.
Code:
hide_field : true, // hide/show field on profile


2. position
The position variable allows you to change the position of personal emoticons in the emoticon list. By default the personal emoticons display at the top of the list, if you want them to display at the bottom of the list, change the value of this variable to bottom.
Code:
position : 'bottom', // position of personal emoticons ; top or bottom


3. lang
If you want to change or translate the texts in this plugin, find and edit the lang object and change the texts to whatever you like. Wink
Code:
    // language settings
    lang : {
      title : 'Personal Emoticons',
      desc : 'You can manage your personal emoticons below. These emoticons will display in the editor once you update your profile.',
      update : 'Update',
      upload : 'Upload',
      cancel : 'Cancel',
      add : 'Add more',
      delete : 'Delete',
      up : 'Move up',
      down : 'Move down'
    }

Once you've saved the script, the plugin will be installed and ready to use ! Please see the next section for instructions on how this plugin works. study


3. Usage Instructions


Below is a list of instructions for using this plugin.

1. Adding New Custom Emoticons
To add new emoticons, go to your edit profile page, click the textarea for the "Personal Emoticons" field, and follow the steps below !

  1. Paste an image URL into the input field. ( a preview of your emoticon will display on the left )
  2. Click the "+" button to add more emoticons. ( optional )
  3. Click the "Update" button to update the textarea.
  4. Save your profile changes.
  5. Your new emoticons should now be available !



To make finding emoticons easier, I along with a few members selected some websites which you can pass along to your members if you like.
- DeviantArt
- Chinese Font Design
- Your Smileys
- Engram Pixel
- Find Icons
- Icon Archive
- Icon Finder

Since the field is limited to 15,000 characters, you can use TinyURL to shorten image URLs if necessary.


2. Uploading Custom Emoticons
If you don't have a direct link to an image, but a file on your computer, you can use the upload button. Clicking this button will open servimg so that you can upload your emoticons.



3. Deleting Custom Emoticons
Tired of the emoticons you've added and want to remove them ? Go to your edit profile page, click the textarea for the "Personal Emoticons" field, and follow the steps below !

  1. Click the "-" button to remove a custom emoticon.
  2. Click the "Update" button to update the textarea.
  3. Save your profile changes.
  4. The emoticon is now obliterated !




4. Sorting Custom Emoticons
Are your emoticons not in the right order ? Don't worry, you can sort them ! To sort emoticons, go to your edit profile page, click the textarea for the "Personal Emoticons" field, and follow the steps below !

  1. Click the up or down buttons to change the position of your emoticons.
  2. Click the "Update" button to update the textarea when you're done sorting.
  3. Save your profile changes.
  4. Everything is in order now !




5. Using Custom Emoticons
Custom Emoticons are just like any other emoticon, except they're defined by you, the user ! To use custom emoticons, simply proceed to a topic, open the emoticon drop down ( or choose them from the side ), and scroll to the bottom of the emoticon list if necessary. Your custom emoticons will always be at the top of the emoticon list by default, unless the admin chooses to display them at the bottom. Simply click the emoticon to add it to your post !

Note : It'll be added as an image, because the emoticon doesn't have a usage code on the forum. ( e.g. :emote: )


6. Why wont my emoticons update ?
If you updated your emoticons on another computer or device and they didn't update on the other, go to Edit Profile, click the textarea for your personal emoticons, and click the update button -- no need to save. Clicking the update button, clears the cache for your personal emoticons, so the next time you use the emoticons you'll see the new ones ! Your personal emoticons are cached in browser storage, allowing them to load quickly without sending any additional requests to the server. So you can also clear your browser cache to update the emoticon list. Wink


Questions and Comments


That's all there is you need to know ! Wink

If you have any questions, comments, or have a problem with this plugin, feel free to leave a reply below. Have fun with your new emoticon lists ! Victory


Notice
Tutorial written by @Ange Tuteur.
Special thanks to @Valoish for the idea and to the Beta Testers for testing this plugin.
Additional thanks to @Luffy and @Valoish for suggesting websites where you can find emoticons.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Sat 03 Sep 2016, 08:01; edited 2 times in total
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 02 Sep 2016, 13:43

/Happy Dance
IT'S OUTTTT~ WOO!
If I wasn't at work I'd be installing it right nowww
Thanks for the tag, Ange c; Was watching the forum like a hawk while waiting for this to go up LOL.

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Bigtuber

Title :
Gender : Male
Posts : 93
Points : 432
Reputation : 40
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostBigtuber on Fri 02 Sep 2016, 14:06

Great plugin! They will like it.  Smile

--------

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 02 Sep 2016, 14:25

@Valoish no problem ! I hope you have fun with it ! tongue

@Bigtuber thanks, I'm sure ! ^^
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 02 Sep 2016, 14:25

@Ange Tuteur Oh you know I will >u>

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1373
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 03 Sep 2016, 14:12

oh wow lol
its great to see a new work is ready
all i need to do is translate and post the translation Smile
thanks a lot
my older brother was in surgery operation last night and he did not tell me i found out by a friend :X
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 05 Sep 2016, 14:10

@Valoish wrote:@Ange Tuteur Oh you know I will >u>
I'm sure you have a mountain of emoticons by now. Hide

@Michael_vx wrote:oh wow lol
its great to see a new work is ready
all i need to do is translate and post the translation Smile
thanks a lot
my older brother was in surgery operation last night and he did not tell me i found out by a friend :X
Yep, no problem ! Wink

sorry to hear about that, hope he's doing better.
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Mon 05 Sep 2016, 14:16

@Ange Tuteur wrote:
@Valoish wrote:@Ange Tuteur Oh you know I will >u>
I'm sure you have a mountain of emoticons by now.  Hide
Nottt yettt. I haven't had much free time to hunt for cute/fun emoticons ; A; IBlameSchool
But as soon as my first Marketing exam is over with in 2 weeks.. EMOTICONSSSSS @_@

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 05 Sep 2016, 14:30

Ahhhh so it isn't emoticon hunting season yet. Razz lol good luck on the exam. Wink
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Mon 05 Sep 2016, 22:10

Not just yet but soon.. Very soon  Twisted Evil
Thaaank you~ ^^

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Sat 17 Sep 2016, 15:50

Found a lil bug o; 
The personal emoticons show if you have the profile pop up installed 


Edit: Marketing exam is over and done with FINALLY.. TIME TO HUNT FOR EMOTICONSSSS


Last edited by Valoish on Tue 20 Sep 2016, 14:24; edited 1 time in total

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 20 Sep 2016, 11:17

@Valoish If I remember correctly, the popup gets the profile page via AJAX and adds the advanced profile part to the popup. The thing about getting pages via AJAX is that JavaScript on those pages will not be executed -- basically it's like viewing a page with JS disabled ; noscript. The two solutions for this would be :

1. Edit the profile popup script to hide the emoticons field when the profile data is retrieved.
2. Hide the profile field with CSS, which should work globally without any issues.

Let me know which method you want to use and if you need any help with them. ^^


P.S.
HAPPY HUNTING ! Razz
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Tue 20 Sep 2016, 14:27

I'll give the CSS one a go later~ Now if only I could find that CSS code I sent you for this forum and edit it.. 
Time to dig through 5487934 messages LOL. 

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 21 Sep 2016, 12:17

You can find the id again by opening the developer tools ( F12 or CTRL+SHIFT+I OR right click > inspect Razz ). After that just click the select element button and click the field that you want the id from. The id for the field should look something like : "field_idXX"


Then you can use that id to hide the field with css.
Code:
#field_id6 {
  display:none;
}
Each field has a unique id, so you can hide or style them individually on your profile. Wink
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Wed 21 Sep 2016, 12:39

Getting dev tools to open on Chrome on a Mac was.. Mission impossible.
All the keyboard shortcuts didn't work and there's no right-click LOOOL. Rip Apple.

Anyway, it worked but the little divider is still visible in both the pop-up profile and the regular profile page:

Any way to hide one of those dividers so it isn't a double divider? xD

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 21 Sep 2016, 12:46

Use the id of your field, but add this to it :
Code:
+ .separator
so you get something like this :
Code:
#field_id6 + .separator {
  display:none;
}

You can combine the two together to save space btw. Wink
Code:
#field_id6, #field_id6 + .separator {
  display:none;
}

BUT ANYWAYS "+ .separator" means the .separator directly after your field. The "+" is a useful selector in this case. Cool
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Wed 21 Sep 2016, 12:49

Thaaank youuu~ Perfect, as always ^^
RipIWasUsing~InsteadOf+.. INeedSleep x_x

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 21 Sep 2016, 13:46

No problem ! ^^

The tilde would work too, buuuut it affects all elements after which have the specified selector. Works in some instances, but definitely not this one. x.x
DDril
Member
Title :
Gender : Unspecified
Posts : 15
Points : 980
Reputation : 9
Language : French & English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostDDril on Thu 06 Oct 2016, 17:00

Good evening,

The custom emoticons does not work on the chatbox is normal?





Cordially

EDIT : Oh I see, it's only for le editor.
But is it possible to make it compatible with the CB?

Thanks in advance.
DDril
Member
Title :
Gender : Unspecified
Posts : 15
Points : 980
Reputation : 9
Language : French & English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostDDril on Mon 10 Oct 2016, 13:04

Any news from @Ange Tuteur ?
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Mon 10 Oct 2016, 13:28

@DDril Unfortunately no :c No one has heard from Ange in about 2 weeks and we have no idea when he will be back..

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
DDril
Member
Title :
Gender : Unspecified
Posts : 15
Points : 980
Reputation : 9
Language : French & English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostDDril on Tue 11 Oct 2016, 16:18

I see, thanks for your answer. Wink

I wait...
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8397
Reputation : 2011
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 12 Oct 2016, 13:39

@DDril yes, that's normal since the plugin was mainly designed for the editor. It's possible to get working in the chatbox, but it'd be a hassle and it would only work on the index chatbox.. Think
DDril
Member
Title :
Gender : Unspecified
Posts : 15
Points : 980
Reputation : 9
Language : French & English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostDDril on Wed 12 Oct 2016, 13:43

Oh I see, too bad !
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3202
Points : 3830
Reputation : 259
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on Fri 25 Nov 2016, 11:57

I changed the padding for the dropdown menus on Canvas and this happened:


I tried shifting the div box that contains the emoticons (#fa_personal_emoticons_list) using CSS but that didn't work.

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum