Come creare il tuo tema di Google Chrome

Hai mai desiderato personalizzare l'aspetto del tuo browser web? I temi per Google Chrome possono essere utilizzati per fare esattamente questo. Il Chrome Theme Store può avere una vasta gamma di opzioni, dai temi spaziali alle auto e ai bellissimi paesaggi, ma cosa succede se nessuna di queste opzioni è esattamente ciò che desideri o se desideri personalizzare Chrome per avere una delle tue foto come sfondo invece? Bene, per fortuna puoi fare proprio questo.

Esistono due metodi per creare il proprio tema. Chrome ha una semplice funzione integrata che consente di importare un'immagine di sfondo per la nuova scheda e personalizzare la combinazione di colori dell'interfaccia utente da una serie di preimpostazioni. Se la funzione Chrome integrata non ha la quantità di opzioni di personalizzazione che desideri, un sito web chiamato ThemeBeta ti copre, con un creatore di temi Chrome ricco di funzionalità, ma facile da usare, (anche se il processo di installazione è un po' più complesso). In questo articolo, ti guideremo attraverso il processo di creazione del tuo tema Chrome con entrambi gli strumenti.

Il semplice strumento Chrome integrato

Per utilizzare l'editor di temi di Chrome integrato, apri una nuova scheda. Nell'angolo in basso a destra della pagina Nuova scheda c'è un'icona a forma di matita, fai clic su di essa per personalizzare l'aspetto del tuo Chrome.

Fare clic sull'icona a forma di matita per aprire l'editor del tema.

Nella finestra pop-up che appare dopo aver fatto clic sull'icona della matita, la prima opzione è configurare l'immagine di sfondo. Qui puoi scegliere tra un numero molto limitato di opzioni preimpostate oppure puoi caricare la tua immagine. Questa immagine di sfondo si applicherà solo alla pagina Nuova scheda, non diventerà uno sfondo su nessun sito web reale.

Seleziona un'immagine di sfondo per la pagina Nuova scheda.

Dopo aver selezionato un'immagine di sfondo, passa alla scheda "Colore e tema". Qui puoi scegliere tra una selezione di combinazioni di colori. Queste opzioni di colore influiscono sui colori della scheda e delle barre di ricerca e dei segnalibri che formano l'interfaccia utente di Chrome. In altre parole, nella maggior parte dei siti che visiti, questi colori saranno più evidenti dell'immagine di sfondo solo perché la barra in alto del browser sarà sempre di questo colore!

Seleziona uno schema di colori preimpostato.

Se nessuna delle combinazioni di colori preimpostate è esattamente ciò che desideri, l'opzione colore in alto a sinistra ti consente di scegliere la tua combinazione di colori, con uno spettro completo di opzioni di colore tra cui scegliere. Per selezionare un colore, prima clicca sul simbolo in alto a sinistra, poi usa il popup che appare per scegliere il tuo colore. Regola il mirino nello spettro dei colori per ottenere la tua ombra e la freccia nera a destra della finestra per scegliere la luminosità del tono. Se non sei sicuro di come funzioni, più in alto o in basso muovi la freccia nera, più chiaro o più scuro diventa il colore. Per sfumature più intense imposta il mirino nella parte superiore e la freccia al centro. Per colori più chiari, sposta il mirino un po' più in basso e la freccia in alto.

Dopo aver selezionato il colore desiderato, fai clic su "Aggiungi a colori personalizzati" in basso a destra. Quindi, seleziona il tuo colore personalizzato dall'elenco "Colori personalizzati" in basso a sinistra, quindi fai clic su "OK" per applicare. Se scegli una combinazione di colori personalizzata, puoi scegliere solo un colore, Chrome sceglierà un secondo colore simile per completare il tema con quello che ritiene più adatto.

Suggerimento: Chrome presuppone quasi sempre che il colore che hai scelto sia il più scuro dei due colori del tema e sceglierà una seconda tonalità più chiara. Scegli di conseguenza!

Seleziona una combinazione di colori personalizzata.

Una volta che sei soddisfatto dell'immagine di sfondo e del set di colori, fai clic su "Fine" per salvare il tuo tema personalizzato e sei pronto per partire!

Temi di terze parti resi semplici

Se desideri un tema semplice, lo strumento integrato di Chrome dovrebbe essere sufficiente, ma se desideri più individualità, ThemeBeta offre un maggiore controllo. Il sito Web consente di modificare manualmente i colori per le schede in primo piano e di sfondo, il testo nelle barre delle schede e altro ancora.

Prima di tutto, devi navigare sul sito Web di ThemeBeta. Puoi sfogliare i temi inviati dagli utenti sulla loro home page oppure puoi andare direttamente alla loro pagina di creazione del tema per iniziare con il tuo. Il primo passo una volta che sei nel creatore del tema è scegliere un'immagine di sfondo. Fare clic su "1. Carica un'immagine” e poi carica un'immagine dal tuo disco rigido. Questa immagine sarà la base del tuo tema e sarà l'immagine di sfondo nella nuova scheda.

Suggerimento: qualsiasi immagine caricata deve essere in formato file PNG o JPG, poiché questi sono gli unici formati supportati. Usa un convertitore online se la tua immagine è qualcosa di diverso.

Se l'immagine che hai caricato non sembra corretta, potrebbe essere troppo ingrandita o avere delle barre ai lati o in alto, allora dovresti provare a cambiare le opzioni "Immagine di sfondo". Rispettivamente, configurano l'allineamento orizzontale, l'allineamento verticale, se l'immagine si ripete se è troppo piccola per lo schermo, come l'immagine viene ridimensionata per adattarsi allo schermo e una regolazione manuale del ridimensionamento. Prova le opzioni finché non trovi qualcosa di cui sei soddisfatto!

Configura il posizionamento della tua immagine di sfondo.

Una volta caricata l'immagine, l'anteprima sul lato destro della pagina si aggiornerà per rappresentare l'aspetto che avrà il tuo tema. Il secondo passaggio consiste nel fare clic su "2. Genera colori”, questo pulsante utilizzerà i colori presenti nell'immagine che hai caricato, per creare una tavolozza di colori simili da utilizzare sul resto dell'interfaccia utente.

Se la combinazione di colori generata automaticamente si adatta all'aspetto desiderato, puoi passare direttamente alle istruzioni di installazione . Ma se vuoi configurare manualmente i colori di cose come le schede in primo piano, le schede in background e la barra degli strumenti, i dettagli sono trattati nella sezione di configurazione avanzata di seguito.

Configurazione avanzata

Ci sono due schede di opzioni di configurazione avanzate disponibili in alto a sinistra, la prima è "Immagini". Qui puoi configurare un'immagine di sfondo per determinati elementi. Quando passi il mouse su ciascuna delle opzioni, evidenzierà in rosso l'elemento che quell'impostazione modificherebbe nell'anteprima.

Passa il mouse sulle opzioni per vedere quale parte dell'interfaccia utente cambiano.

Suggerimento: NTP sta per “New Tab Page”, le opzioni che iniziano con questo acronimo sono presenti solo nella nuova scheda, altre sono visibili in altre pagine.

• "NTP Background" configura lo sfondo principale, se hai importato un'immagine in precedenza questa sarà già "Caricata".
• "Frame" configura l'interfaccia utente escludendo l'elenco delle schede, la barra di ricerca e la barra dei segnalibri.
• "Barra degli strumenti" configura la scheda attiva, la barra dei segnalibri e l'area che circonda la barra di ricerca.
• “Tab Background” configures the background colour for non-active tabs.
• “Frame overlay” allows you to configure a second image that overlays the image in “Frame”.
• “NTP Attribution” adds an image to the bottom left corner of the new tab page, generally for watermark purposes.

Tip: If you’ve uploaded an image and don’t like how it looks, you can remove it by clicking the “X” button next to the relevant “Loaded” marker. If uploading an image changed the background colour for that element you can either set it back manually or click “Generate Colors” in the “Basic” tab again to reset the colour scheme.

The second advanced tab is titled “Colors”. Here – as with the options on the previous page that had a box next to them – you can use the box to open a colour picker and pick a solid colour for the respective elements. Once again, if you mouse over the configuration option, it will highlight the affected element in the preview in red.

Click the box to open the colour picker for the respective elements.

• “Toolbar” configures the background colour of the ThemeBeta attribution label in the bottom left of the new tab page.
• “Tab Text” configures the colour of the text in the currently active tab in the tab list. It also sets the colour of the ThemeBeta attribution text in the bottom left corner of the new tab page.
• “Background Tab Text” configures the colour of the text in the inactive tabs in the tab list.
• “Bookmark Text” configures the colour of the text of items in the bookmarks bar.
• “NTP Text” configures the colour of the text or the recommended/regular page links in the centre of the page.
• “NTP Link” doesn’t have any effect.
• “Control Buttons” configures the colour of the minimise, maximise and close buttons in the top right corner.
• “Buttons” configures the colour of the forwards, backwards, reload and home buttons.

Once you’ve configured all of the advanced options the way you want them, you’re ready to proceed to the installation process.

Installation of a third-party theme

Per motivi di sicurezza, Google ora consente l'installazione di estensioni e temi solo tramite Chrome Webstore. Per installare il tuo tema personalizzato, dovrai abilitare una funzione per sviluppatori. Sfortunatamente, questa modifica significa che il semplice pulsante "Pack and Install" sia nella scheda "Base" che nella scheda "Pack" non funziona più. Se provi il metodo "Pack and Install", riceverai un messaggio di errore.

I file CRX di terze parti non possono essere installati in Chrome.

Per aggirare questo problema, vai alla scheda "Pack" e fai clic su "Pack and Download Zip file"

Fare clic sul pulsante "Comprimi e scarica file zip" nella scheda "Comprimi".

Una volta scaricato il file zip, estrai i file e salvali sul disco rigido. Fai doppio clic sul file che hai scaricato e seleziona Estrai nella parte superiore del visualizzatore di file. Dovrai selezionare dove estrarre i tuoi file. Ricorda dove li salvi in ​​modo da poterli caricare di nuovo più facilmente.

Suggerimento: se rinomini la cartella per indicare qual è il tema, potrebbe essere più facile ritrovarla in futuro, se desideri riutilizzarla.

Estrai i file dal file ZIP e salvali sul tuo disco rigido.

Il passaggio successivo è la pagina delle estensioni di Chrome. Puoi accedervi facendo clic sui tre punti nell'angolo in alto a destra, sotto "Altri strumenti", quindi "Estensioni", oppure puoi fare clic qui .

Fai clic sui tre punti, quindi su Altri strumenti > Estensioni.

Una volta che sei nel menu delle estensioni, nell'angolo in alto a destra della pagina, c'è un cursore contrassegnato "Modalità sviluppatore". Abilitalo. Una volta abilitata la modalità sviluppatore, dovrebbero apparire tre pulsanti nell'angolo in alto a sinistra. Quello che ti serve è "Carica decompresso". Fai clic su "Carica decompresso" e importa la cartella che hai estratto dal file zip in precedenza.

Abilita la modalità sviluppatore e quindi fai clic su "Carica decompresso".

Suggerimento: si desidera importare la cartella principale, non la cartella "immagini" che contiene. Se non l'hai rinominato in precedenza, verrà chiamato qualcosa come "theme1234567890"

Una volta che il tema è stato importato, verrà visualizzato un avviso nella scheda corrente, che conferma che il tema è stato installato e offre un pulsante Annulla. Prima di chiudere questo avviso, apri una nuova scheda e assicurati che tutto appaia come volevi.

Non nascondere l'avviso di conferma finché non sei sicuro di essere soddisfatto del risultato!

Se il tuo tema non si è rivelato esattamente come speravi, fai clic su "Annulla" e prova a modificare di nuovo il modello. Una volta che sei soddisfatto dei risultati, sentiti libero di chiudere la pagina "Estensioni" e continua a navigare con il tuo nuovo tema Chrome personalizzato.