Like mentioned here: https://vbmods.rocks/forum/questions...=5624#post5624
I have created a button for the db shoutbox to easily use smileys (and basic bbcodes)...
Its not build inside the shoutbox, because I was afraid to break it. And I am sure that it could be improved by a good developer (I am not really into php)...
But for me/us its the best solution right now and it works... and our members are happy with it
So here we go:
First create a new template in admincp in your style theme and insert following js script:
Please make sure that the textarea of your shoutbox is also called "dbtech_vbshout_editor1". You can look this up in your source code. I guess it should be. Otherwise you have to change the pink phrase below into whatever you need.
Then create a template hook with this located at footer_before_body_end
After that you need to add the following CSS to the css_additional template.
In order to show the button only to users that have viewing rights for the db shoutbox, just put the following html code into an "ad module" and place it to the section right BELOW the shoutbox.
And of course you have to change "example.com" to the correct link to your domain
The easiest way to get your smilie list is to copy it from source code when you have all smilies opened in text editor 
BUT you need to do some changes to ALL the alt-tags (marked red in the code above) so that only the short code is left.
The first link in the code above is an example of how to add the img-bbcode ... you can add also other like video or so.
Oh.. and last but not least:
If you want to show the smiley symbol on your button and you don't use fontawesome yet on your forum, then you also need to add this.
Just place
right on top of your additional CSS Style
or if this does not work you need to place
right on top of your head_include template in admincp
This is what it should look like:
The button should appear on the right below the shoutbox.
After clicking on it, a pupup with the smilies in it opens.
PS: I still hope that someone creates a better working shoutbox than DB so I don´t need this
Or maybe someone has a better idea for how to add such a button right into it...
I have created a button for the db shoutbox to easily use smileys (and basic bbcodes)...
Its not build inside the shoutbox, because I was afraid to break it. And I am sure that it could be improved by a good developer (I am not really into php)...
But for me/us its the best solution right now and it works... and our members are happy with it
So here we go:
First create a new template in admincp in your style theme and insert following js script:
Please make sure that the textarea of your shoutbox is also called "dbtech_vbshout_editor1". You can look this up in your source code. I guess it should be. Otherwise you have to change the pink phrase below into whatever you need.
Code:
<script>
// SMILIES click
$('#emoticons a img').click(function () {
var smiley = $(this).attr('alt');
ins2pos(smiley, '[COLOR=#EE82EE]dbtech_vbshout_editor1[/COLOR]');
});
function ins2pos(str, id) {
var TextArea = document.getElementById(id);
var val = TextArea.value;
var before = val.substring(0, TextArea.selectionStart);
var after = val.substring(TextArea.selectionEnd, val.length);
TextArea.value = before + str + after;
setCursor(TextArea, before.length + str.length);
}
function setCursor(elem, pos) {
if (elem.setSelectionRange) {
elem.focus();
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
<script>
// SMILIES Button
$(function() {
$(".btn-smilies").click(
function() {
$(".smilies_popup").fadeIn(), "easeOutExpo";
$(".overlay").fadeIn(), "easeOutExpo";
return false;
}
)
$(".overlay").click(
function() {
$(".smilies_popup").fadeOut(), "easeOutExpo";
$(".smilies_table").delay(400).animate({
left: 0
}, 600, "easeOutExpo");
$(".forget_table").delay(400).animate({
left: 400
}, 600, "easeOutExpo");
return false;
}
)
$(".fa-times-remove").click(
function() {
$(".smilies_popup").fadeOut(), "easeOutExpo";
$(".smilies_table").delay(400).animate({
left: 0
}, 600, "easeOutExpo");
$(".forget_table").delay(400).animate({
left: 400
}, 600, "easeOutExpo");
return false;
}
)
})
</script>
After that you need to add the following CSS to the css_additional template.
Code:
/* START SMILIE BUTTON */
/*----------- Display only for certain user groups (delete or edit this so that the button shows up like your shoutbox does -------------*/
body:not([data-usergroupid='6']):not([data-usergroupid='14']):not([data-usergroupid='15']):not([data-usergroupid='16']) #widget_317 {
display: none;
}
/*-----------popup background overlay*/
.scontainer {
position: absolute;
z-index: 20;
right: 0;
top: -100px;
}
.smilies_popup .overlay {
background-color: rgba(0,0,0,0.44);
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
z-index: -1;
display: none;
overflow: hidden;
}
/*-----------FIXED and these dimensions only if you put the button right below the shoutbox!!! */
.smilies_popup {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
z-index: 9999999;
display: none;
}
/*-----------btn*/
.btn-smilies {
color: #FFF;
margin: 20px auto 0px !important;
float: none;
border-radius: 3px;
display: block;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
text-align: center;
background: rgb(47,68,86);
border: 1px solid #FFF;
transition: .3s ease-out;
}
.btn-smilies:hover {
color: #FFF;
background: rgb(158, 140, 84);
}
.btn-smilies i {
font-style: normal;
}
/*-----------omask*/
.smilies_popup .mask {
position: absolute;
top: 50%;
left: 40%;
margin-left: 0px;
margin-top: -200px;
width: 350px;
height: 258px;
background-color: rgba(255,255,255,1.00);
overflow: hidden;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow-y: visible;
}
/*-----------close*/
.smilies_popup .mask i {
position: absolute;
width: 20px;
height: 20px;
font-size: 20px;
top: 12px;
right: 11px;
z-index: 999;
color: #2F4456;
}
.smilies_popup .mask i:hover {
color: #0E1A23;
}
.smilies_popup .mask i a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.smilies_popup h3 {
color: #FFF;
font-size: 2em;
margin-top: 0px;
margin-bottom: 15px;
}
/*-----------smilies_table*/
.smilies_popup .mask .smilies_table {
position: absolute;
top: 0px;
padding-top: 32px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.smilies_popup .mask .smilies_table a {
color: #ccc;
transition: .3s ease-out;
padding-right: 4px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 4px;
margin-bottom: -10px;
display: inline-block;
}
.smilies_popup .mask .smilies_table a:hover {
color: #FFF;
}
.mask .smilies_table #emoticons {
width: 90%;
}
/* END SMILIE BUTTON */
And of course you have to change "example.com" to the correct link to your domain
Code:
<!-- Smilie button Start -->
<div class="smilies_popup">
<div class="overlay"></div>
<div class="mask">
<i class="fa fa-times fa-times-remove" aria-hidden="true"><a href=""></a></i>
<div class="smilies_table">
<div id="emoticons">
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="Insert Image-URL" style="height: 47px;"><img src="https://www.example.com/core/images/editor/insertimage.png" [COLOR=#FF0000]alt="[img] [/img]"[/COLOR] title="Bild-URL einfügen"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="Smile :)" style="height: 47px;"><img src="https://www.example.com/core/images/smilies/smile.gif" [COLOR=#FF0000]alt=":)"[/COLOR] title="Smile :)" data-smilieid="40"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="lol :D" style="height: 47px;"><img src="https://www.example.com/core/images/smilies/grins.gif" [COLOR=#FF0000]alt=":D"[/COLOR] title="lol :D" data-smilieid="29"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="wink ;)" style="height: 47px;"><img src="https://www.example.com/core/images/smilies/wink.gif" [COLOR=#FF0000]alt=";)"[/COLOR] title="wink ;)" data-smilieid="30"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="kiss :*" style="height: 47px;"><img src="https://www.example.com/core/images/smilies/kiss_20.png" [COLOR=#FF0000]alt=":*"[/COLOR] title="kiss :*" data-smilieid="41"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="No :no:" style="height: 47px;"><img src="https://www.example.com/core/images/smilies/nein.gif" [COLOR=#FF0000]alt=":no:"[/COLOR] title="no :no:" data-smilieid="82"></a>
<a href="javascript:void(0)" class="b-smilie__button h-left js-smilie-button" title="Tired :tired:" style="height: 47px;"><img src="https://www.example.com/core/images/smilies//muede.gif" [COLOR=#FF0000]alt=":tired:"[/COLOR] title="tired :tired:" data-smilieid="62"></a>
</div>
</div>
</div>
</div>
<!-- login SMILIES End -->
<div class="scontainer">
<div class="row">
<a href="javascript:;" class="btn-smilies"><i class="fa fa-smile-o" aria-hidden="true"></i></a>
</div>
</div>
BUT you need to do some changes to ALL the alt-tags (marked red in the code above) so that only the short code is left.The first link in the code above is an example of how to add the img-bbcode ... you can add also other like video or so.
Oh.. and last but not least:
If you want to show the smiley symbol on your button and you don't use fontawesome yet on your forum, then you also need to add this.
Just place
Code:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
or if this does not work you need to place
Code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
This is what it should look like:
The button should appear on the right below the shoutbox.
After clicking on it, a pupup with the smilies in it opens.
PS: I still hope that someone creates a better working shoutbox than DB so I don´t need this
Or maybe someone has a better idea for how to add such a button right into it...
