Cinque modi per personalizzare la toolbar


Tutorial Cinque modi per personalizzare la toolbar

Messaggio Da Niko il Sab 9 Mar 2013 - 15:13

Cinque modi per personalizzare la toolbar

Ciao a tutti :good:


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 Di festa
Si pu˛! E se sei interessato questo Ŕ il post giusto per questo scopo!

1. Aggiungere i tuoi link e le tue immagini


Andare in PDA > 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 PDA > Moduli > Gestione dei codici Javascript > :new: > 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:

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

2. 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!!

3. 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!

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


4. 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!

5. 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()
    }))
});

Sempre disponibile per problemi e/o segnalazioni :zen:


Tutorial creato da: Rideem3 (Forum di supporto Inglese) e tradotto per i membri di Forumattivo da Niko
Tutti i diritti riservati a Rideem3.


avatar
Niko
Veterano dello staff


Sesso : Maschile
EtÓ : 20
Messaggi : 7758
LocalitÓ : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko Ŕ stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum