MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Smiles on shoutbox
Full Version: Smiles on shoutbox
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3

Mastersly

2020-03-02, 07:38 AM
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] [b]/images/smilies/New/sick.png [/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

sarvin

2020-03-02, 11:43 AM
Perfect, Thanks ~

Omar G.

2020-03-02, 06:33 PM
Tank you for your contribution.

I love these (facebook?) smiles: [Image: cool.png]

Mastersly

2020-03-07, 06:41 PM
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>

blongso

2020-03-08, 05:26 AM
Thank you, I like it! Big Grin

kbilly

2020-03-21, 12:48 PM
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.

.m.

2020-03-21, 01:19 PM
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.

kbilly

2020-03-21, 01:23 PM
Somehow not inserting them for me Sad

The smilies are clickable but aren't being inserted on shoutbox when i click on them.

Mastersly

2020-03-21, 02:15 PM
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

kbilly

2020-03-21, 02:24 PM
(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?
Pages: 1 2 3
MyBB Community Forums > Resources > Tutorials > Smiles on shoutbox