Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei giÓ un nostro utente oppure registrati per far parte della nostra grande comunitÓ. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Cinque modi per personalizzare la toolbar


Tutorial Cinque modi per personalizzare la toolbar

Messaggio Da Niko il Sab 09 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.



Niko
Amminattivo
Amminattivo


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


Vedere 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

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum