Dopo il più che soddisfacente successo di Messenger SkinBuilder (un leggero e semplice tool per creare temi per WL Messenger) ho capito che la personalizzazione non è un concetto importante solo per me. Nella vita reale siamo noi a decidere cosa indossare nei vari luoghi che frequentiamo, per esprimere il nostro tocco personale, e sul Web il concetto è lo stesso: per la maggior parte delle persone i siti più frequentati sono i Social Network (in vetta Facebook, Youtube e Twitter) ma essi non ci concedono di indossare i vestiti che preferiamo. Per dirlo senza l’uso della retorica…i nostri social network non ci consentono di personalizzare l’aspetto esteriore, al contrario ci impongono monotone barre blu ed asettici sfondi bianchi. Perciò? Semplice. Cerchiamo di personalizzare nel modo più semplice possibile le pagine dei nostri social network poco alla volta, passo per passo.
“I preliminari”
Per prima cosa devo informarti che il seguente metodo è valido (e con questo intendo che è stato testato personalmente) su Google Chrome (10+) e Mozilla Firefox (3,5+) in quanto abbiamo bisogno di un Componente Aggiuntivo chiamato Stylish che è appunto disponibile solo per questi 2 browser*.
- Su Firefox puoi installare Stylish cliccando sul tasto verde “+ Aggiungi a Firefox” nella pagina dei componenti aggiuntivi Mozilla raggiungibile cliccando Qui
- Su Chrome puoi installare Stylish cliccando sul tasto “+ Aggiungi” nella pagina del Chrome Web Store raggiungibile cliccando Qui
Una volta installato probabilmente dovrai riavviare il browser; riavvialo perchè siamo pronti a cominciare sul serio.
*Esistono ovviamente Componenti Aggiuntivi simili anche su altri browser come Apple Safari e Opera perciò non escludo che il seguente codice possa funzionare anche su di essi.
Rockeggiamo!
Su Firefox:
- Sulla barra dei menu in alto nel browser clicca “Strumenti” e subito dopo “Componenti Aggiuntivi”
- Nella barra a sinistra clicca “Stili Utenti”
- Crea un nuovo stile cliccando “Nuovo Stile”
- Inserisci un nome a piacere (ad esempio: Barra Blu – Facebook) e delle etichette (puoi anche lasciare questo box vuoto)
- Inserisci il codice che trovi nel paragrafo successivo (per Firefox)
Su Chrome:
- Clicca sulla chiave inglese in alto a destra, poi su “Strumenti” ed in infine su “Estensioni”
- Trova Stylish nella lista delle estensioni e clicca sulle sue “Opzioni”
- Crea un nuovo stile cliccando su “Write new style” nella barra sinistra
- Inserisci un nome nel box “Name” e metti la spunta su “Enabled”
- All’opzione “Applies” clicca su “Specify” e scegli dal menù a tendina “URLs on the domain” e nel box a fianco scrivi “facebook.com” e clicca “Add”
- Inserisci nel box “Code” il codice che trovi nel paragrafo successivo (per Chrome)
Il codice
Per Firefox:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {
/* BlueBar Background & Logo */
#blueBar {background: -moz-linear-gradient(top, #BC8FF7 0%, #9B79C7 100%) !important; /* Firefox 3,5+ */
border-bottom: 1px solid #000000 !important}
#pageLogo a {background:url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 5px -48px !important; }
#headNavOut {background:#f6b1c3 !important; border-color:#de264c !important; }
/* Navigation Tabs */
.slimHeader #pageNav a {color: rgba(0, 0, 0, 0.5) !important}
.slimHeader #pageNav #navAccount.openToggler, .slimHeader .no_js #navAccount:hover, .slimHeader #pageNav .openToggler #navAccountLink {background-color: #ffffff !important}
.slimHeader #pageNav a:hover {background-color: rgba(255, 255, 255, 0.5) !important; color:#ffffff !important; }
.slimHeader #pageNav .topNavLink {background-color: transparent !important}
.slimHeader #pageNav li.tinyman:after, .slimHeader #pageNav li.middleLink:after {background-color:rgba(0, 0, 0, 0.5) !important}
.slimHeader #navAccount .navigation a {color: #000000 !important;}
.slimHeader #navAccount .navigation a:hover {background-color: #6d84b4 !important; color: #ffffff !important;}
/* Navigation Icons (Jewel) */
#jewelContainer a:hover.jewelButton {background-color: rgba(255, 255, 255, 0.5) !important;}
#fbRequestsJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 2px -19px !important; }
#fbMessagesJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -20px -19px !important; }
#fbNotificationsJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -42px -19px !important; }
#jewelContainer .openToggler a:hover.jewelButton, #jewelContainer .openToggler .jewelButton {background-color: #ffffff !important}
.slimHeader #fbNotificationsJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -42px 6px !important; }
.slimHeader #fbMessagesJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -20px 6px !important; }
.slimHeader #fbRequestsJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 2px 6px !important; }
Per Chrome:
/* BlueBar Background & Logo */
#blueBar {background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%); /* Chrome 10+ */
border-bottom: 1px solid #000000 !important}
#pageLogo a {background:url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 5px -48px !important; }
#headNavOut {background:#f6b1c3 !important; border-color:#de264c !important; }
/* Navigation Tabs */
.slimHeader #pageNav a {color: rgba(0, 0, 0, 0.5) !important}
.slimHeader #pageNav #navAccount.openToggler, .slimHeader .no_js #navAccount:hover, .slimHeader #pageNav .openToggler #navAccountLink {background-color: #ffffff !important}
.slimHeader #pageNav a:hover {background-color: rgba(255, 255, 255, 0.5) !important; color:#ffffff !important; }
.slimHeader #pageNav .topNavLink {background-color: transparent !important}
.slimHeader #pageNav li.tinyman:after, .slimHeader #pageNav li.middleLink:after {background-color:rgba(0, 0, 0, 0.5) !important}
.slimHeader #navAccount .navigation a {color: #000000 !important;}
.slimHeader #navAccount .navigation a:hover {background-color: #6d84b4 !important; color: #ffffff !important;}
/* Navigation Icons (Jewel) */
#jewelContainer a:hover.jewelButton {background-color: rgba(255, 255, 255, 0.5) !important;}
#fbRequestsJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 2px -19px !important; }
#fbMessagesJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -20px -19px !important; }
#fbNotificationsJewel a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -42px -19px !important; }
#jewelContainer .openToggler a:hover.jewelButton, #jewelContainer .openToggler .jewelButton {background-color: #ffffff !important}
.slimHeader #fbNotificationsJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -42px 6px !important; }
.slimHeader #fbMessagesJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll -20px 6px !important; }
.slimHeader #fbRequestsJewel.hasNew a.jewelButton {background: url(http://digilander.libero.it/Danielei95/FB/icons.png) no-repeat scroll 2px 6px !important; }
/* Search Bar */
#navSearch .uiTypeahead, #navSearch .uiTypeahead .wrap {border-color: #000000 !important}
Finalmente personalizziamo
Puoi scegliere 2 colori come sfondo che andranno a creare un’effetto “sfumato” tra i due colori stessi. Per impostare i 2 colori che preferisci basterà modificare il codice composto da 6 cifre (detto Hex, composto da lettere e numeri) che ti ho evidenziato in verde. Ma quel codice che significa? E come faccio a sapere cosa devo sostituirci? Tranquillo, collegati un momento a questa pagina e scegli il colore che preferisci semplicemente usando il mouse. Quando hai fatto copia il codice di 6 cifre sopra quel quadrato che hai appena usato (si chiama Color Picker) e incollalo al posto di uno dei due già esistenti (evidenziati in verde) alla definizione “#blueBar” (è la prima nel codice). Ripeti l’operazione per il secondo colore incollandolo questa volta all’altro posto. Se vuoi usare un solo colore ti basterà incollare in entrambi i posti lo stesso codice. Ricorda inoltre che il primo codice di 6 cifre corrisponde al colore dall’alto della barra e il secondo al colore dal basso. Ultima raccomandazione: assicurati di modificare il codice tra le parentesi graffe a destra della definizione #blueBar !
Ecco un esempio:
Questa è la definizione di cui parlavo. Contiene i due codici di 6 cifre evidenziate in verde:
#blueBar {background: -moz-linear-gradient(top, #BC8FF7 0%, #9B79C7 100%) !important; /* Firefox 3,5+ */
border-bottom: 1px solid #000000 !important}
Ho scelto due colori e li ho sostituiti ai due già esistenti (ora evidenziati in blu):
#blueBar {background: -moz-linear-gradient(top, #55F250 0%, #06AB00 100%) !important; /* Firefox 3,5+ */
border-bottom: 1px solid #000000 !important}
Così facendo la barra assumerà quest’aspetto:
A questo punto ti basterà cliccare su “Salva” o “Save” e lo stile verrà applicato a Facebook. E questo è tutto, per ora. Sono già a lavoro per semplificare tutto il procedimento sopra elencato ma avrò bisogno di tempo. Continuerò ovviamente a lavorare su nuove parti di codice per personalizzare quindi nuove parti della pagina di Facebook. Al momento sono indeciso se proporvi nel prossimo articolo come cambiare lo sfondo bianco della pagina con un’immagine/colore personalizzata/o oppure cambiare il colore dei links e del testo generale…perciò se hai preferenze fammelo sapere con un commento. A presto!
simpatico plug-in fra l’altro sono disponibili parecchi temi già impostati e se ne possono attivare molteplici contemporaneamente fino a raggiungere l’effetto desiderato. rimane il piccolo difetto che questo tipo di modifiche risulta visibile solo sul proprio pc.
grande Fedemarkez
:)
molto bello ! Lo adoro!!! però vorrei chiederti una cosa … purtroppo nn ho capito bene dove devo inserire il codice per il colore … e quindi appena ho messo tutto con stylish e chrome vado su FB e mi ritrovo la schermata celeste … nono so \come fare .. !
Utilizzi Firefox o Chrome?
Io ho capito tutto e infatti mi è venuto,ma una mia amica ha anche quella ”cosa dei commenti” sai quella li in blu chiaro ? quella c’è l’ha del colore che vuole lei,proprio come questa cosa della barra di ricerca,te ne sarei grata se mettessi il modo per farlo.Poi avrei una piccola domanda: io e mio fratello abbiamo (ovviamente) 2 account diversi,non è che uqando lui entra nel suo se lo ritrova del colore che ho scelto io ?? Speriamo di no ! :D
Per quanto riguarda il colore da te scelto questo non è legato al tuo profilo ma al browser che utilizzi (sia firefox, sia chrome). Se tu e tuo fratello utilizzate lo stesso utente del pc (e non due separati) e ovviamente lo stesso browser anche lui visualizzerà lo stesso colore della barra. Per agirare il problema basterà usare browser differenti oppure avere tue utenti diversi sul pc, uno tuo e uno di tuo fratello. Per i commenti; non ho capito a cosa ti riferisci…potresti procurarti un’immagine di questa personalizzazione o anche un link relativa ad essa?
io ho auto problemi nell’inserire i codici dei colori… una volta messo il codice nella casella code… nn so più cosa fare. utilizzo chrome!
All’opzione “Applies” clicca su “Specify” e scegli dal menù a tendina “URLs on the domain” e nel box a fianco scrivi “facebook.com” e clicca su “Add”. Ora clicca “Save” e lo stile dovrebbe attivarsi.
E’ troppo forte avere facebook lilla :33
Ma non si può fare di altri colori?
Puoi farlo di qualsiasi colore ;)
Si.. ma non capisco quale codice bisogna mettere.. quello più lungo che hai messo con i colori che voglio usare?
Perché nel codice più corto non funziona
Devi usare il codice del paragrafo chiamato “Il codice”, scegliendo quello giusto per il tuo browser. Il codice più piccolo (che trovi dopo) di un paio di righe è un “estratto” di quello grande che ho usato come esempio.
Ricorda che la riga da modificare è quella che inizia con “#blueBar”!
Sarebbe figo cambiare anche lo sfondo… bianco è di una tristezzaaaaaaaaaaa
Faremo anche quello! Grazie per il suggerimento.
Ciao, ho fatto tutto esattamente come è stato indicato ma non ha funzionato.
Chrome offre anche un’estensione realizzata appositamente per FB, per cambiare il colore (chiamata “Facebook Colour Changer 1.3.1″), l’ho provata due giorni fa ma anche quella non ha dato alcun effetto. Inizio a pensare che il mio FB sia “protetto”, immune da queste cose. Possibile?
Comunque complimenti
Ma a me è rimasto come prima.. puo’ essere che sia per colpa del “diario”?
Io ho fatto tutto ma non mi rimane come prima..
Il Codice funziona con l’ultima versione di Facebook sia per Firefox che per Chrome. Vi consiglio di controllare di aver eseguito la procedura correttamente. Per chi usa Chrome in particolare ricorda la spunta su “Enabled” nella colonna destra. In alcuni casi è probabile che sia necessario aggiornare la pagina.
Io suggerirei di cambiare le scritte cliccabili (non tutto il testo!), gli sfondi azzurri dei commenti/apprezzamenti, l’evidenziazione dei preferiti sulla sinistra…insomma, tutto ciò che c’è di blu! altrimenti la nostra nuovissima barra stonerebbe con tutto il resto u_u anche il modo in cui si evidenziano i jewelbuttons non mi fa impazzire (avendo impostato un fucsia #ff0080 escono evidenziati di rosa al passaggio del mouse, ma preferirei scegliere io di che colore farli comparire)…
altro che socialplus e altre applicazioni da aggiungere su fb (=dati personali che circolano a go-go), questa sì che è la soluzione definitiva! considerando che usavo già stylish poi…niente di più comodo :D
ancora una volta lo staff di fedemarkez ci ha preso in pieno :) ciao ragazzi, continuate così! vi seguo da lontano ;)
Io non ho proprio capito come si fa a cambiare il colore quacuno…x favore me lo può spiegare?