Cinque modi per personalizzare la toolbar

Da **Niko** Sab 9 Mar 2013 - 15:13

Cinque modi per personalizzare la toolbar

Tutti quanti siete a conoscenza della nuova funzione di Forumattivo riguardante la toolbar (La barra degli strumenti: In cima al forum) che ha in seguito subito un nuovo aggiornamento (Aggiornamento della toolbar).

Ma se vi dicessi che potete fare della aggiunte e migliorarla nuovamente solo per i vostri forum?? Di festa

Si può! E se sei interessato questo è il post giusto per questo scopo!

Aggiungere i tuoi link e le tue immagini

Andare in Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Foglio di stile (CSS) e incollare questa stringa di codice:

Codice:: #fa_right .toolbar_list_name, #fa_right .toolbar_name { display: inline-block; line-height: 30px; padding: 0px 5px; color: #fff; } #fa_right .toolbar_list_name.active { background-color: #FFF; color: #000; border-left: 1px solid #000; border-right: 1px soli #000; } #fa_right .toolbar_list { display: none; position: absolute; list-style-type: none; margin: 0px; padding: 0px 10px; background-color: #FFFFFF; min-width: 200px; width: auto; border: 1px solid #333333; line-height: 30px; border-top: 0px solid #FFFFFF; z-index: 999; color: #000000 !important; } #fa_right .toolbar_list :link, #fa_right .toolbar_list :visited { color: #00569C !important; }

Successivamente andate in Pannello di amministrazione ► Moduli ► Gestione dei codici Javascript ► > In tutte le pagine ed aggiungete questo codice:

Codice:: (function() { window.fmtabs = { add: function (name) { $('#fa_right').prepend('<div class="toolbar_name">' + name + '</div>'); }, list: function (name, html) { $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name">' + name + '</div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>'); $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() { if (this.className == "toolbar_list_name") this.className += " active"; else this.className = "toolbar_list_name"; this.nextSibling.style.left = this.offsetLeft + 'px'; this.nextSibling.style.top = this.offsetHeight + 'px'; $(this.nextSibling).slideToggle(); }); } }; })();

Per poter aggiungere un link dovete solamente aggiugnere questo pezzo (opportunamente modificato) alla fine del precedente codice e nello stesso foglio :bene:

Codice:: $(window).load(function() { fmtabs.add('<a href="/forum">Forum</a>'); });

 NB: Questa è la parte che dovete modificare: < a href = " / forum " >Forum< / a >

Se invece volete inserire un menù 'drop-list' ovvero qualcosa di questo tipo:

Cinque modi per personalizzare la toolbar Images?q=tbn:ANd9GcTtvhdB6I50wTbqcgMr0KcXCHnV-4W5QcgMQluFumnqWkZ5TCIC

dovete aggiungere questa stringa invece della precedente :good:

Codice:: $(window).load(function() { fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>'); });

Dove Forums sta a indicare il titolo che comparirà sulla toolbar e i link successivi saranno quelli nascosti che si apriranno al passaggio del mouse Vagabondo

Modifica del testo dei link presenti

Nel caso che voi voleste modificare i testi quali 'I miei Argomenti' e così via potete procedere in questo modo;
Facendo un procedimento analogo a quello precedente, reate un nuovo codice javascript, inserendo questo codice javascript:

Codice:: function changeToolbar(word, replacement) { for (var name in word) { document.getElementById('fa_menulist').innerHTML = document.getElementById('fa_menulist').innerHTML.replace(RegExp(name, 'g'), word[name]); } } $(window).load(function () { changeToolbar({ 'I miei messaggi': 'I miei commenti', 'I miei argomenti': 'Quello che ho scritto' }); });

 Nota bene: è importante ricopiare il testo ESATTO presente nella toolbar che volete modificare!!

Aggiungere effetti di transizione sui menù Benvenuto e Notifiche

Se siete annoiati del solito apri-chiudi in modo diretto dei menù della toolbar con questi procedimenti potete modificarlo e renderlo più carino :bene:

Inserite questa stringa nel foglio di stile:

Codice:: #fa_right.welcome #fa_menu ul { display: none; }

A questo punto create un nuovo foglio di gestione dei codici javascript :new:

e scegliete quello più indicato alle vostre esigenze e alle vostre preferenze!

Animazione slide
Codice:
$(window).load(function () { $('#fa_welcome').click(function () { $('#fa_menulist').slideToggle(); }); });
Animazione Fade
Codice:
$(window).load(function () { $('#fa_welcome').click(function () { $('#fa_menulist').fadeToggle(); }); });

Nascondere elementi

Per fare questo dovete semplicemente inserire questi codici nel foglio di stile:

Rimuovere barra di ricerca:

Codice:: #fa_search{ display: none !important; }

Rimuovere icone social:

Codice:: #fa_share { display: none !important; }

ATTENZIONE: Si ricorda che è severamente vietato rimuovere il link diretto a Forumattivo.com se non attraverso la gestione dei crediti!

Creare un menu di log in a discesa

Se quando non siete connessi volete accedere direttamente dalla toolbar senza dover aprire la pagina di connessione, create un nuovo codice javascript :new:

ed aggiungete la seguente stringa:

Codice:: $(window).load(function () { document.getElementById("logout") || ($("#fa_toolbar").after('<div id="fa_menulist" style="display: none;"><form action="/login" method="post"><table style="width: 100%; text-align: center;"><tr><td style="width: 50%;">Username:</td><td style="width: 50%;"><input name="username" type="text" /></td></tr><tr><td style="width: 50%;">Password:</td><td style="width: 50%;"><input name="password" type="password" /></td></tr></table><div style="text-align: center; padding: 5px;"><input type="submit" name="login" value="Log In" class="button2" /></div></form>'), $('#fa_right .rightHeaderLink:first').click(function (a) { a.preventDefault(); document.getElementById("fa_menulist").style.left = $(this).offset().left - 200 + "px"; document.getElementById("fa_menulist").style.top = $("#fa_toolbar").offset().top + 30 + "px"; "rightHeaderLink" == this.className ? (this.className += " active", $(this).css({ color: "#333", "background-color": "#FFF" })) : (this.className = "rightHeaderLink", $(this).css({ color: "", "background-color": "" })); $("#fa_menulist").fadeToggle() })) });