Forum - Das neue Template Xobor (v6) » Iconliste in der Shoutbox erweitern

<script>
window.addEventListener('load', function ( ) {
$('#activity_feed').before(`<div class="card order-0 mb-3 fadeIn"> // oder after 
<div class="card-header  clearfix">
<h5 class="card-title">Zusätzliche Emojis &#128270;</h5>
</div> 
<div class="card-body "> 
 
Windows-Emojis mit "<i>Windows-Taste & Punkt-Taste</i>" aufrufen - Eingabefeld aktivieren nicht vergessen!"
 
</div>`);
});
</script>
 

<style>
/** Tooltips **/
.input-group-text:after{
 content: "Einem Klick öffnet und schließt die Liste!";
 padding: 2px 10px;
 display:none;
 position: relative;
 top: -40px;
 right: -30px;
 width: auto;
 text-align: center;
 background-color: #fef4c5;
 border: 1px solid #d4b943;
 border-radius: 5px;
}
.input-group-text:hover:after{
display: block;position:absolute;
}
 
/** Allgemein **/
.emoji-picker {margin:50px 0 50px 0 !important; width:440px;}  
.emoji-picker__container {max-width:200px;}
.emoji-picker__content {margin:8px;}
.emoji-picker__preview {margin:20px;}
.emoji-picker__preview-emoji,.emoji-picker__preview-name {margin-top:18px;}
.emoji-picker__search, .emoji-picker__search-icon {margin:0 10px;}
 
/** Mobil **/
@media all and (max-device-width: 767px) {
.emoji-picker {margin:50px 0 50px 0; width:230px;} 
.emoji-picker__category-buttons {overflow-x:auto !important;overflow-y:hidden;width:auto;height:auto;}
.emoji-picker__emoji {font-size:16px;} 
.emoji-picker__category-buttons {padding-left:40px;}
.emoji-picker__emojis {height:170px;}
.emoji-picker__content {height:210px;}
/* Tooltipp mobil ausblenden */
.input-group-text:after {content:"";content:none;}
}
</style>
 
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.js"></script>
<script>
 
function addEmojiPicker() {
    const picker = new EmojiButton();
    const trigger = document.querySelector('#xShoutbox .input-group-text');
 
    picker.on('emoji', selection => {
 
     $('.xSbNewMessage').val($('.xSbNewMessage').val() + " " + selection);
    picker.stopPropagation(); /* Menü bleibt geöffnet */
    });
 
    trigger.removeAttribute('onclick');
    trigger.addEventListener('click', () => picker.togglePicker(trigger));
}
setTimeout('addEmojiPicker()',600);
 
</script>