Chatbox nel menu

Salve, ho visto dei tutorial su avere la chatbox nella toolbar... Ho cercato di metterla nel menu arancione, ma non riesco. Potevate aiutarmi a mettere il bottone dopo i Messaggi privati? Grazie
Link del forum: https://demigods.forumattivo.com/
Forum: ModernBB
Link del modello che voglio mettere nel menu: https://i.servimg.com/u/f21/18/21/41/30/chat10.gif

Ciao @Demigods RPG,

Codice CSS

Inserisci questo codice CSS nel tuo foglio di stile CSS:

Codice:

/*Chatbox*/
span#chatButton {
    border-radius: 3px;
    color: #FFF;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1.3846;
    padding: 6px;
}

#chatBox iframe{
z-index:999;
border:none;
height:500px;
width:700px;
}

div#chatBox {
    position: fixed;
    top: 100px;
    right: auto;
}

Menu navigazione

Vai verso Pannello di amministrazione ► Visualizzazione ► Instestazioni e navigazione e clicca su Aggiungere un menu personalizzato, usando queste impostazioni:

• Menu A tua scelta
  
• Immagine Lascia vuoto
  
• Testo a scelta
  
• URL inserisci: #chatboxMenu
  
• Permessi togli la spunta a ospiti

Quindi salva

Javacript

Aggiungi questo codice Javascript:

• Titolo: a tua scelta
  
• Dove: in tutte le pagine
  
• Codice:
  

  Codice:

  $(function() {
  $('.navbar.navlinks li a.mainmenu[href="#chatboxMenu"]').parent().html('<span id="chatButton" title="Apri/Chiudi Chatbox">Chatbox</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
$('#chatBox').hide();
$('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');

if(!document.getElementById('logout')){
    $('#chatButton').hide();
    $('#chatBox').hide();}
    $('#chatButton').click(function(){
        $('#chatBox').fadeToggle();
    });
});

Fammi sapere

Ha funzionato, ma è rimasto un pò strano. Dove posso impostare, invece di quella borda sopra bianca, un box-shadow ed aumentare il width?
Print: https://imgur.com/eDMOuwR

Per togliere il bordo bianco aggiungi questo CSS:

Codice:

body.chatbox {
    margin-top: -10px!important;
}

Per "aumentare il width" e aggiungere il "box-shadow" non ho capito di preciso a quale parte ti riferisci

Ehila, il bordo è tolto, grazie. E per width e box-shadow, intendevo questo:

Codice:

#chatBox iframe{
z-index:999;
border:none;
height:350px;
width:800px;
box-shadow: 1px 1px 1px black;
}

Però che non modificasse la chat della home page del forum, soltanto quella del menu...

Ecco a te

Codice:

.navbar.navlinks #chatBox iframe{
z-index:999;
border:none;
height:350px;
width:800px;
box-shadow: 1px 1px 1px black;
}

Grazie mille e mi hanno segnato soltanto un'altro problema: quando si clicca sul menu su "chatbox", la chat si apre. Ma, quando si clica sul menu di nuovo per chiuderla, lei si chiude e si riapre di seguito...

Nel codice Javascript sostituisci:

Codice:

$('#chatButton').click(function(){
        $('#chatBox').fadeToggle();
    });

con:

Codice:

$("#chatButton").on('click',function() {
    $('#chatBox').toggle();
});

Ancora non si chiude quando si clica di nuovo nel menu... ><

@Demigods RPG Puoi ridarmi il codice completo che hai inserito? Perchè sul mio forum di prova funziona
Devo capire cosa c'è di diverso

Dovrebbe essere così in teoria:

Codice:

$(function () {
    $('.navbar.navlinks li a.mainmenu[href="#chatBox"]').parent().html('<span id="chatButton" title="Apri/Chiudi Chatbox">Chatbox</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
    $("#chatBox").hide();
    $("#chatBox iframe").css("position", "fixed").css("right", "10px").css("bottom", "45px");
    if (!document.getElementById("logout")) {
        $("#chatButton").hide();
        $("#chatBox").hide();
    }
    $("#chatButton").on("click", function () {
        $("#chatBox").toggle();
    });
});


Assicurati di non averlo inserito più volte, perchè il metodo .toggle da problemi se inserito più volte sullo stesso elemento

Ecco il mio... Non mi ricordo se ti ho passato l'account teste se vuoi vedere che succede...

Codice:

$(function() {
  $('.navbar.navlinks li a.mainmenu[href="#chatboxMenu"]').parent().html('<span id="chatButton" title="Apri/Chiudi Chatbox">Chatbox</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
$('#chatBox').hide();
$('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');

if(!document.getElementById('logout')){
    $('#chatButton').hide();
    $('#chatBox').hide();}
    $("#chatButton").on('click',function() {
       $('#chatBox').toggle();
   });
});

Buongiorno,se riesco a mettere il bottone delle notifiche nella navbar .poi la toolbar viene nascosta e di conseguenza anche il bottone della chat.A resto punto ti conviene mettere anche la chat nella navbar.Pensaci un attimo a presto

Prova a sostituirlo con questo:

Codice:

$(function () {
    $('.navbar.navlinks li a.mainmenu[href="#chatboxMenu"]').parent().html('<span id="chatButton" title="Apri/Chiudi Chatbox">Chatbox</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
    $("#chatBox").hide();
    $("#chatBox iframe").css("position", "fixed").css("right", "10px").css("bottom", "45px");
    if (!document.getElementById("logout")) {
        $("#chatButton").hide();
        $("#chatBox").hide();
    }
    $("#chatButton").on("click", function () {
        $("#chatBox").toggle();
    });
});

A me non funziona niente ,comunque tu prova a creare due script e inserirlo nel template overall_header. Ciao

@Niko ancora no... >< L'ho messo se vuoi vedere te stesso...

Ciao @Demigods RPG

puoi provare su un altro forum? o eventualmente a disattivare templates e javascript per cercare di identificare la fonte del problema?

Purtroppo sul mio forum di prova funziona benissimo - non vorrei che tu abbia qualche codice che interferisce

Codice funzionante per Niko: