Toolbar: Modificare lo stile e aggiungere bottoni

Promemoria primo messaggio :

ciao raga, come posso modificare la parte alta del forum? ok, lo so che non avete capito cosa, ma non sapevo spiegare quindi vi do uno screen

capito ora? non mi va che sia così, pure perchè molti utenti purtroppo se sanno che il forum non ha il proprio domino o almeno se c'è qualcosa che lo fa vedere in grande, si disinteressano subito, quindi ecco un esempio di come lo vorrei fare:

ecco lo vorrei tipo così, lasciate perdere quella cosa verde che sta al centro, è solo il simbolo di quando carica in un altro forum, fate come se non ci fosse, quindi, torniamo a noi, intanto vorrei che non ci fossero quei tastini a fianco a "Cerca" dove c'è il simbolo di impostazioni e dove c'è scritto "forum", non mi interessano, vorrei solo la grafica così, cioè come sta gia, se premi il mio nome, ti fa vedere le varie ccose, poi di diverso c'è, che se premi il tasto della posta, ti va nei MP, e poi c'è il pulsante "Esci" che ti fa uscire dal forum, cioè dal proprio profilo. si può fare? pure dove 'è cerca la vorrei  tipo così, poi naturalmente la grafica non deve essere a quadratini come la, ma tipo un immagine che scielgo io. per favore aiutatemi

tutorial? dove me l'hai fornito? 
EDIT: scusa, scusa, me ne ero dimenticato e non l'avevo visto:oops:
RIEDIT: nel tutorial non ho trovato come mettere l'immagine

Nel paragrafo 1 Aggiungere i tuoi link e le tue immagini trovi questo codice per inserire un link:

Codice:

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

basta modificarlo per inserire un'immagine

Codice:

$(window).load(function() {
    fmtabs.add('<img src="link immagine">');
});

e se io vorrei mettere sia il testo e sia l'immagine?

Basta ripeterlo, ovvero inserirlo due volte

una volta per l'immagine, una volta per il link

ok grazie:D
ecco come esce:

come aggiusto?

Il link inseriscilo in questo modo (sempre nel codice javascript)

Codice:

<a href="LINK" style="position: relative; top: -8px;">NOME</a>

ok, ora non mi compare neanche l'icona dell'avatar, ecco il codice javascript:

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

<a href="http://i.imgur.com/ZOHS2VW.png" style="position: relative; top: -8px;">MP</a>

ma non in questo codice javascript

al posto di questo

Codice:

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

quindi:

Codice:

$(window).load(function() {
    fmtabs.add('<a href="LINK" style="position: relative; top: -8px;">NOME</a>');
});

non sto capendo  ho inserito questo in un nuovo javascript

Codice:

$(window).load(function() {
    fmtabs.add('<a href="http://i.imgur.com/ZOHS2VW.png" style="position: relative; top: -8px;">MP</a>');
});

e non va

quindi questo non va

Codice:

$(window).load(function() {
    fmtabs.add('<a href="http://i.imgur.com/ZOHS2VW.png" style="position: relative; top: -8px;">MP</a>');
});

ma questo si?

Codice:

$(window).load(function() {
    fmtabs.add('<a href="http://i.imgur.com/ZOHS2VW.png"
>MP</a>');
});

no, niente

no niente cosa?
scusa prima ti funzionava anche con il secondo codice..

non c'è, quando mi hai detto di non mettere quel codice dentro quell'altro, ho cancellato la parte che non si doveva mettere, e si è tolto l'avatar dalla toolbar, è ricomparsa la scritta benvenuto, è sparito MP, e l'icona che stava un po giu e su ( cioè non stava dritta. e mo non so come far ritornare alla normalità. ho rifatto tutti i tutorial da capo, ma niente, non so che è successo

@Alex2000 rimuovi tutto e ritenta allora: è l'unica soluzione visto che prima funzionava e ora no

ok, senti ho fatto la cosa di togliere benvenuto e non  funziona più

Ripeto: togli tutte le modifiche per la personalizzazione della toolbar e rieseguile da capo: è l'unica soluzione

infatti l'ho fatto anche dal css

Prova a riaggiungere il css

ho tolto quella che non serviva, e ora avevo messo quello che serviva ma niente:D sono un ignorante puro per modificare il forum:cryy:

il css del tutorial lo hai aggiunto o no?

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;
}

in seguito: rimuovi questo javascript:

Codice:

$(function(){
$('#fa_welcome').html(_userdata["username"]);
});

e modifica questo:

Codice:

$(window).load(function() {
    fmtabs.add('<a href="/privmsg">MP</a>');
});

in questo:

Codice:

$(window).load(function() {
    fmtabs.add('<a href="/privmsg">MP</a>');
$('#fa_welcome').html(_userdata["username"]);
});

l'ho appena messo. è successa una cosa strana. ho aperto il forum dopo aver inserito quel codice e mi fa vedere "MP" raddrizzato che stava tutto scomposto prima. adesso riapro ed "MP" è sparito:(

@Alex2000 ho cambiato il mio ultimo messaggio, dai un'occhiata

GARZIE 1000000!!!!!!!!!!!!!!! CHE FELICITà! ora funziona alla perfezione, bisogna solo mettere l'icona a MP e a NOTIFICHE. mo come faccio?

invece di

Codice:

$(window).load(function() {
    fmtabs.add('<a href="/privmsg">MP</a>');
$('#fa_welcome').html(_userdata["username"]);
});

inserisci

Codice:

$(window).load(function() {
    fmtabs.add('<a href="/privmsg"><img src="LINK IMMAGINE"> MP</a>');
$('#fa_welcome').html(_userdata["username"]);
});