1. Home » Facebook » Personalizza Facebook! Come cambiare colore o sfondo alla Barra Blu

Personalizza Facebook! Come cambiare colore o sfondo alla Barra Blu

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:

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

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!