Come cambiare colore o sfondo alla Barra Blu di Facebook

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.

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

• Su Chrome puoi installare Stylish cliccando sul tasto “+ Aggiungi” nella pagina del Chrome Web Store

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.

Come procedere

Su Firefox:

1. Sulla barra dei menu in alto nel browser clicca “Strumenti” e subito dopo “Componenti Aggiuntivi”
2. Nella barra a sinistra clicca “Stili Utenti”
3. Crea un nuovo stile cliccando “Nuovo Stile”
4. Inserisci un nome a piacere (ad esempio: Barra Blu – Facebook) e delle etichette (puoi anche lasciare questo box vuoto)
5. Inserisci il codice che trovi nel paragrafo successivo (per Firefox)

Su Chrome:

1. Clicca sulla chiave inglese in alto a destra, poi su “Strumenti” ed in infine su “Estensioni”
2. Trova Stylish nella lista delle estensioni e clicca sulle sue “Opzioni”
3. Crea un nuovo stile cliccando su “Write new style” nella barra sinistra
4. Inserisci un nome nel box “Name” e metti la spunta su “Enabled”
5. 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”
6. 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. m

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}