Come creare il tuo tema di Google Chrome

click fraud protection

Hai mai desiderato personalizzare l'aspetto del tuo browser web? I temi per Google Chrome possono essere utilizzati proprio per 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 nessuno di questi quelle opzioni sono proprio quello che vuoi, o se vuoi personalizzare Chrome per avere invece una delle tue foto come sfondo? Bene, per fortuna puoi fare proprio questo.

Esistono due metodi per creare il proprio tema. Chrome ha una semplice funzione integrata che ti 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 TemaBeta ti copre, con un creatore di temi Chrome ricco di funzionalità, ma facile da usare (sebbene il processo di installazione sia 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, innanzitutto, fai clic sul simbolo in alto a sinistra, quindi utilizza 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 tuo 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 uno schema di colori personalizzato.

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

Temi di terze parti resi semplici

Se vuoi un tema semplice, lo strumento integrato di Chrome dovrebbe essere sufficiente, ma se vuoi più individualità, TemaBeta offre più 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 sul loro homepage, oppure puoi andare direttamente al loro pagina del creatore 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 lo è troppo piccolo 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 che desideri, puoi saltare qui al Istruzioni per l'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 pagina della 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.
  • "Sfondo scheda" configura il colore di sfondo per le schede non attive.
  • "Sovrapposizione cornice" consente di configurare una seconda immagine che si sovrappone all'immagine in "Cornice".
  • "Attribuzione NTP" aggiunge un'immagine nell'angolo in basso a sinistra della pagina Nuova scheda, generalmente per scopi di filigrana.

Suggerimento: se hai caricato un'immagine e non ti piace come appare, puoi rimuoverla facendo clic sul pulsante "X" accanto al relativo indicatore "Caricato". Se il caricamento di un'immagine ha cambiato il colore di sfondo per quell'elemento, puoi reimpostarlo manualmente o fare nuovamente clic su "Genera colori" nella scheda "Base" per ripristinare la combinazione di colori.

La seconda scheda avanzata è intitolata "Colori". Qui, come con le opzioni nella pagina precedente che avevano una casella accanto a loro, puoi usare la casella per aprire un selettore di colori e scegliere un colore solido per i rispettivi elementi. Ancora una volta, se passi il mouse sull'opzione di configurazione, evidenzierà in rosso l'elemento interessato nell'anteprima.

Fare clic sulla casella per aprire il selettore di colori per i rispettivi elementi.
  • "Barra degli strumenti" configura il colore di sfondo dell'etichetta di attribuzione di ThemeBeta nella parte inferiore sinistra della pagina della nuova scheda.
  • "Tab Text" configura il colore del testo nella scheda attualmente attiva nell'elenco delle schede. Imposta anche il colore del testo di attribuzione di ThemeBeta nell'angolo in basso a sinistra della pagina della nuova scheda.
  • "Testo scheda sfondo" configura il colore del testo nelle schede inattive nell'elenco delle schede.
  • “Testo segnalibro” configura il colore del testo degli elementi nella barra dei segnalibri.
  • "Testo NTP" configura il colore del testo o i collegamenti di pagina consigliati/normali al centro della pagina.
  • "NTP Link" non ha alcun effetto.
  • "Pulsanti di controllo" configura il colore dei pulsanti di riduzione a icona, ingrandimento e chiusura nell'angolo in alto a destra.
  • "Pulsanti" configura il colore dei pulsanti avanti, indietro, ricarica e home.

Dopo aver configurato tutte le opzioni avanzate nel modo desiderato, sei pronto per procedere al processo di installazione.

Installazione di un tema di terze parti

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 su 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 come "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 importato il tema, 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 nuovamente 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.