Smiles on shoutbox

[Mastersly]

Hello again,
I was looking around to add a smile button on shoutbox  and i found only this
https://community.mybb.com/thread-61339....s+shoutbox
I didnt try it because it was posted in 2009.
Is there a way to add it on DVZ Shoutbox (2.3.3)?

[blongso]

Hello!
I join this thread ... this is really an option that is missed by many users and forum board admins, moderators etc ... .... It would be nice to have a new shoutbox with clickable smilies ?!
Greets,
blongso

---

Hello,
Now we have a DVZ Shoutbox with clickable smilies in our forum.
The decisive factor was a tutorial on the German MYBB website. Many thanks to the one who posted the tutorial!

So here is the tutorial:

In Home » Template-Sets » Globale Templates » Template edit: dvz_shoutbox

<div id="smilies_box">
                <img src="{$mybb->settings['bburl']}/images/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/angry.png" alt=":angry:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
        <a href="javascript:MyBB.popupWindow('/misc.php?action=smilies&amp;popup=true&amp;editor=dvz_shoutbox&amp;modal=1')">...mehr Smilies</a>
</div>
<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
    });
</script> 

copie and paste


Than, under Home » Template-Sets » Globale Templates » edit Template: dvz_shoutbox_panel

<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" /> 

copie and paste

If you have already installed the DVZ-Soutbox, the entry is already there!

Than, under Home » Themes » your Style » edit global.css

/* DVZ Shoutbox-Smilies - START */
#smilies_box .clickable { cursor: pointer }
#smilies_box { text-align: center; }
/* DVZ Shoutbox-Smilies - END */ 

copie and paste

That' s all!


Of course you have to adapt your smilies from our forum with codes!!

sources:
German Forum
Polish Site

Have fun,
blongso

[Mastersly]

thank you for sharing, i changed the code
and my smiles now look like this

I will make a tutorial for that on my forum soon

[anonmap]

Hello friend, you know why when I add more smile lines the heads of the smiles are cut off, the picture does not come out complete



Edit: Omar replied here => Link