Smiles on shoutbox

[mastersly]

Preview

[hide=5]
Go


REPLACE EVERYTHING WITH THIS

<div class="panel">
<form>
<input type="text" id="dvz_shoutbox_input" class="text" placeholder="Remember,be nice" maxlength="{$maxlength}" autocomplete="off" />


<div class="popupsmilesbyanonshare" onclick="myFunctionsoutb()">
? <i class="fas fa-smile-wink" aria-hidden="true"></i><span class="popuptextbyanonshoutbox" id="myPopupshoutbox">

<div id="smilies_box">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/angel.png" alt=":angel:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/heart.png" alt=":heart:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/oops.png" alt=":oops:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/wink.png" alt=":wink:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/nice.png" alt=":nice:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/frown.png" alt=":frown:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/crying.png" alt=":crying:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/huh.png" alt=" :huh:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/omg.png" alt=":omg:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/zZzzZ.png" alt=":zZzzZ:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/tounge.png" alt=":tounge:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/blush.png" alt=":blush:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/skeptical.png" alt=":skeptical:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/cool.png" alt=":cool:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/happywide.png" alt=":happywide:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/bigeyes.png" alt=":bigeyes:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/cash.png" alt=":cash:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/sad.png" alt=":sad:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/finna.png" alt=":finna:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/love.png" alt=":love:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/bitcoin_emoji.png" alt=":bitcoin_emoji:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/disappointed.png" alt=":disappointed:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/angry.png" alt=":angry:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/flex.png" alt=":flex:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/peace.png" alt=":peace:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/devil.png" alt=":devil:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/alien.png" alt=":alien:" class="smilie_dvz clickable">
</div>
<script>
? ? $('.smilie_dvz').click(function() {
? ? ? ? var smilie = $(this).attr("alt"),
? ? ? ? ? ? inputValue = $('#dvz_shoutbox_input').val();
? ? ? ? $('#dvz_shoutbox_input').val(inputValue + smilie);
? ? });
</script>

</span>
</div>
<input type="submit" style="display:none"/>
</form>
</div>




<script>
// When the user clicks on <div>, open the poapup
function myFunctionsoutb() {
? var popup = document.getElementById("myPopupshoutbox");
? popup.classList.toggle("show");
}
</script>

ACP >>Templates & Style>>Themes>>YOUR THEME>>Global.css

ADD THIS

.panel {
position: relative;
}

.popupsmilesbyanonshare {
? ? width: 20px;
? ? height: 20px;
? ? content: ' ';
? ? position: absolute;
? ? right: 4px;
? ? top: 10px;
? ? cursor: pointer;
}

/* Popup container */
.popupsmilesbyanonshare {
? display: inline-block;
? cursor: pointer;
}

/* The actual popup (appears on top) */
.popupsmilesbyanonshare .popuptextbyanonshoutbox {
? ? visibility: hidden;
? ? width: 250px;
? ? background-color: #525151;
? ? color: #fff;
? ? text-align: center;
? ? border-radius: 6px;
? ? padding: 8px 0;
? ? position: absolute;
? ? z-index: 1;
? ? bottom: -33px;
? ? left: -257px;
}

/* Popup arrow */
.popupsmilesbyanonshare .popuptextbyanonshoutbox::after {
content: "";
? ? position: absolute;
? ? top: 46%;
? ? left: 100%;
? ? border-width: 5px;
? ? border-style: solid;
? ? border-color: #fff0 #af1f1f00 #03ff3a00 #555555;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popupsmilesbyanonshare .show {
? visibility: visible;
? -webkit-animation: fadeIn 1s;
? animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
? from {opacity: 0;}
? to {opacity: 1;}
}

@keyframes fadeIn {
? from {opacity: 0;}
? to {opacity:1 ;}
}

Notes:Smiles will not appear on popup box because i have different location
EXAMPLE

<img src="{$mybb->settings['bburl']}/images/smilies/New/sick.png" alt="SMILETAGS" class="smilie_dvz clickable">

Replace this /images/smilies/New/sick.png with your smile location and this alt="SMILETAGS" with your smile text

DO THIS TO ALL YOUR SMILES​

[/hide]

 

[BrolySSJ]

Emoticons is a great thing that needs to be added to all forums because i think that it adds a sense of light heartedness to the forum and makes it a bit more free as well.