[For 1.8] Smiles on shoutbox
#1
Example
[Image: FMKD3Uj.png]
[Image: 4vCuNv2.png]


ACP >>Templates & Style>>Templates>>Global Templates » Edit Template: dvz_shoutbox_panel
Replace everything with this
<div class="panel">
<form>
<input type="text" id="dvz_input" class="text" placeholder="Remember,be nice" maxlength="{$maxlength}" autocomplete="off" />


<div class="popupsmilesbyanonshare" onclick="myFunction()"><img src="{$mybb->settings['bburl']}/images/smilies/New/cool.png">
  <span class="popuptextbyanon" id="myPopup">

<div id="smilies_box">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sick.png" alt=":)" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/wink.png" alt=":wink:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/cool.png" alt=":B" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/smile.png" alt=":)" 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/New/dodgy.png" alt=":dod:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/cry.png" alt=":cry:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/huh.png" alt=" :huh:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/confused.png" alt=":confused:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/exclamation.png" alt=":haha:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/biggrin.png" alt=":biggrin:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sleepy.png" alt=":zz:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/angel.png" alt=":angel:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/shy.png" alt=":shy:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/at.png" alt=":at:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/tongue.png" alt=":tongue:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/my.png" alt=":my:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/rolleyes.png" alt=":*" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/blush.png" alt=":blush:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sad.png" alt=":(" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/heart.png" alt=":love:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
</div>
<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
    });
</script>

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


</span>
</div>

<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
ACP >>Templates & Style>>Themes>>YOUR THEME>>Global.css
add this
.panel {
position: relative;
}

.popupsmilesbyanonshare {
    width: 20px;
    height: 20px;
    background: url(https://anonshare.eu/images/smilies/New/sick.png) no-repeat;
    content: ' ';
    position: absolute;
    right: 4px;
    top: 9px;
    cursor: pointer;
}

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

/* The actual popup (appears on top) */
.popupsmilesbyanonshare .popuptextbyanon {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popupsmilesbyanonshare .popuptextbyanon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* 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
[b]
Example
[/b]
<img src="{$mybb->settings['bburl']}/images/smilies/New/sick.png" alt=":)" class="smilie_dvz clickable">
Replace this[b] [font=Monaco, Consolas, Courier, monospace][b]/images/smilies/New/sick.png [/font][/b][/b]with your smile location and this alt="Smile" with your smile text
[b]DO THIS TO ALL YOUR SMILES[/b]

TO CHANGE FIRST ICON ( [Image: cool.png])
Global.css
find

    background: url(https://anonshare.eu/images/smilies/New/sick.png) no-repeat;
and replace the link

Thanks you @[b]blongso[/b]
https://community.mybb.com/thread-226653...pid1344214
[Image: banner.gif]
Reply
#2
Perfect, Thanks ~
Want to Support Me? +Rep Me
Reply
#3
Tank you for your contribution.

I love these (facebook?) smiles: [Image: cool.png]
Reply
#4
Smiles on Quick reply

If you have already smiles on shoutbox follow this tutorial to add smiles on quick reply

ACP>>Templates & Style>>Templates>>Show Thread Templates>>showthread_quickreply


add this before </div></form>


<div class="popupsmilesbyanonshare" onclick="myFunction()"><img src="{$mybb->settings['bburl']}/images/smilies/New/cool.png">
  <span class="popuptextbyanon" id="myPopup">

<div id="smilies_box">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sick.png" alt=":)" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/wink.png" alt=":wink:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/cool.png" alt=":B" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/smile.png" alt=":)" 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/New/dodgy.png" alt=":dod:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/cry.png" alt=":cry:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/huh.png" alt="    :huh:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/confused.png" alt=":confused:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/exclamation.png" alt=":haha:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/biggrin.png" alt=":biggrin:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sleepy.png" alt=":zz:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/angel.png" alt=":angel:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/shy.png" alt=":shy:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/at.png" alt=":at:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/tongue.png" alt=":tongue:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/my.png" alt=":my:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/rolleyes.png" alt=":*" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/blush.png" alt=":blush:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/sad.png" alt=":(" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/heart.png" alt=":love:" class="smilie_dvz clickable">
                <img src="{$mybb->settings['bburl']}/images/smilies/New/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
</div>
<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#message').val();
        $('#message').val(inputValue + smilie);
    });
</script>

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


</span>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
[Image: banner.gif]
Reply
#5
Thank you, I like it! Big Grin
Reply
#6
Hello,

Thankyou for this tutorial, i enabled the smilies on shoutbox.

But i have two questions for you:

1) Is it possibile to insert the smilies in to the shoutbox when i click on it or i have to enter the code manually?
2)Can you upload those facebook type smilies?

Thankyou for your time and dedication.
Reply
#7
Quote:1) Is it possibile to insert the smilies in to the shoutbox when i click on it ...
given code should be already inserting smilies code into the shoutbox.
Reply
#8
Somehow not inserting them for me Sad

The smilies are clickable but aren't being inserted on shoutbox when i click on them.
Reply
#9
check on the orange text,Should be all the same
please allow me to see the shoutbox to check your shoutbox input type text

Quote:<input type="text" id="dvz_input" class="text" placeholder="Remember,be nice" maxlength="{$maxlength}" autocomplete="off" />


<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
    });
</script>



You can take facebook smiles from my forum
just add my forum link before smile location
https://anonshare.eu/
and download it

okay i can see now,
replace the orange text with this dvz_shoutbox_input
[Image: banner.gif]
Reply
#10
(2020-03-21, 02:15 PM)Mastersly Wrote: check on the orange text,Should be all the same
please allow me to see the shoutbox to check your shoutbox input type text

Quote:<input type="text" id="dvz_input" class="text" placeholder="Remember,be nice" maxlength="{$maxlength}" autocomplete="off" />


<script>
    $('.smilie_dvz').click(function() {
        var smilie = $(this).attr("alt"),
            inputValue = $('#dvz_input').val();
        $('#dvz_input').val(inputValue + smilie);
    });
</script>



You can take facebook smiles from my forum
just add my forum link before smile location
https://anonshare.eu/
and download it

okay i can see now,
replace the orange text with this dvz_shoutbox_input


The code is the same as of yours, you should be able to see the SB on my forum, aren't you?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)