Nelle lezioni precedenti ti ho già spiegato come installare gli sfondi live nel browser Opera, e ora è il turno del browser successivo. A differenza di Opera, Chrome non ha una funzione integrata, quindi per gli sfondi live è necessario installare un'estensione speciale. Ho già mostrato come installare l'estensione in Chrome, quindi non ci fermeremo qui.

Quando vai al negozio online, inserisci la richiesta "Live Wallpaper" nel campo di ricerca. Nei risultati della ricerca dobbiamo installare la prima estensione "Pagina iniziale live - sfondo animato".

Dovresti vedere un'icona di estensione speciale nell'angolo in alto a destra. Cliccandoci sopra con il tasto destro possiamo:

• Rimuovere l'applicazione dal browser;
• Nascondi il pulsante in modo che non venga visualizzato;
• Vai alle impostazioni;
• Vai alla pagina con tutte le estensioni.

Non appena l'estensione viene installata, dovrebbe aprirsi una finestra con le impostazioni del programma, in cui è possibile selezionare un tema. Le categorie sono mostrate sopra.

• Sfondo fotografico dal vivo;
• Sfondo dal vivo;
• Sfondo statico.

Tutti i temi hanno un'anteprima. Per fare ciò, devi passare il mouse sopra la miniatura e aspettare un po'.

Per aggiungere un nuovo tema al browser, fai clic sul pulsante "Installa" e attendi che venga caricato nel browser. I temi che sono già stati installati avranno semplicemente un pulsante "Abilita".

Non mostrato per impostazione predefinita gran numero carta da parati Se vuoi ancora di più, in fondo puoi fare clic sul pulsante speciale "Carica altro".

Apertura nuova scheda, vedrai il design installato. A proposito, per impostazione predefinita, al centro dello schermo verrà mostrato un orologio, ma puoi cambiarlo in segnalibri visivi facendo doppio clic su di esso con il pulsante sinistro del mouse e, viceversa, accendere l'orologio.

Nell'angolo in alto a destra è possibile configurare la visualizzazione del meteo. La città può essere impostata automaticamente o manualmente attraverso le impostazioni.

Nell'angolo in basso a sinistra c'è un piccolo “Task Planner” dove puoi aggiungere un elenco di attività per la giornata e contrassegnare quelle già completate.

Un po' più in basso c'è un'opzione:

• Seleziona sfondo: apre una pagina con una scelta di temi;
• Impostazioni: vai alle impostazioni del programma;
• Attività: nascondi o mostra "Utilità di pianificazione";
• Mostra siti: possibilità di abilitare la visualizzazione segnalibri visivi al centro.

Questo è praticamente tutto. Spero che l'estensione ti sia utile e che ti divertirai ad usarla.

In questa lezione ti dirò cos'è la modalità di navigazione in incognito nel browser. Google Cromo e come abilitarlo.

Continuiamo a lavorare con il browser da Google e successivamente abbiamo una domanda su come aggiungere un segnalibro a Google Chrome.

Per fare ciò, avrai bisogno di uno speciale costruttore di temi web, un po' di ispirazione e qualche minuto di tempo libero. Anche se soffri di perfezionismo, puoi passarci diverse ore. Ti abbiamo avvertito. :)

Quindi, apri l'applicazione web. Vedrai le schede con gli strumenti per la creazione di temi sul lato sinistro della finestra e un'area per anteprima risultato a destra.

Questo costruttore ti consente di creare temi in modalità semiautomatica. Ma puoi anche personalizzare tutto manualmente in modo che il risultato soddisfi completamente i tuoi gusti.

1. Modo semplice

Il punto è questo: carichi qualsiasi immagine che ti piace nel costruttore e ThemeBeta la usa come sfondo principale per nuovo argomento e adatta automaticamente tutti i colori del disegno ad esso.

Per aggiungere la tua immagine, nella scheda Base, fai clic su Carica un'immagine e seleziona immagine desiderata sul computer. Quindi, per fare in modo che l'editor personalizzi i colori del tema, fai clic su Genera colori.

Se sei soddisfatto del risultato, fai clic su Comprimi e installa e conferma il download e quindi l'aggiunta del tema a Chrome. Il browser attiva immediatamente il nuovo design.

Se dopo impostazioni automatiche ti consigliamo di cambiare i colori o aggiungere sfondi separati per elementi diversi temi, avrai bisogno degli strumenti nelle altre schede. Maggiori dettagli su di loro sono nel paragrafo successivo dell'articolo.

2. Metodo avanzato

Questo metodo è impostazione manuale sfondi e colori del testo per il nuovo tema.

Per selezionare immagini o colori come sfondi per vari elementi di design, utilizza gli strumenti nella scheda Immagini. Basta posizionare il cursore su qualsiasi strumento e nella finestra a destra il designer mostrerà quale parte del tema cambia. Ad esempio, NTP Background viene utilizzato per configurare lo sfondo principale. E lo sfondo della scheda ti consente di selezionare lo sfondo dell'intestazione del sito.

Una volta individuati gli sfondi, puoi regolare i colori del testo nella scheda Colori. Qui funziona tutto allo stesso modo. C'è un elenco di strumenti, seleziona uno di essi e nella finestra a destra vedrai di cosa è responsabile.

Quando hai finito con gli sfondi e i colori del testo, apri la scheda Pacchetto e fai clic su Pacchetto e installa per scaricare e applicare il tema scelto.

Inoltre, puoi sempre scegliere e installare uno dei tanti temi già pronti dal database ThemeBeta o dal catalogo ufficiale di Google. Se desideri tornare al design standard in futuro, vai a Impostazioni di Chrome e di fronte alla voce “Temi”, fare clic su “Scala predefinita”.

Per fare ciò, avrai bisogno di uno speciale costruttore di temi web, un po' di ispirazione e qualche minuto di tempo libero. Anche se soffri di perfezionismo, puoi passarci diverse ore. Ti abbiamo avvertito. :)

Quindi, apri l'applicazione web. Vedrai le schede con gli strumenti per la creazione di temi sul lato sinistro della finestra e un'area di anteprima sulla destra.

Questo costruttore ti consente di creare temi in modalità semiautomatica. Ma puoi anche personalizzare tutto manualmente in modo che il risultato soddisfi completamente i tuoi gusti.

1. Modo semplice

Il punto è questo: carichi qualsiasi immagine che ti piace nel costruttore e ThemeBeta la usa come sfondo principale per il nuovo tema e adatta automaticamente ad esso tutti i colori del design.

Per aggiungere la tua immagine, nella scheda Base, fai clic su Carica un'immagine e seleziona l'immagine desiderata sul tuo computer. Quindi, per fare in modo che l'editor personalizzi i colori del tema, fai clic su Genera colori.

Se sei soddisfatto del risultato, fai clic su Comprimi e installa e conferma il download e quindi l'aggiunta del tema a Chrome. Il browser attiva immediatamente il nuovo design.

Se, dopo la configurazione automatica, desideri cambiare i colori o aggiungere sfondi separati per i diversi elementi del tema, avrai bisogno di strumenti in altre schede. Maggiori dettagli su di loro sono nel paragrafo successivo dell'articolo.

2. Metodo avanzato

Questo metodo prevede l'impostazione manuale degli sfondi e dei colori del testo per un nuovo tema.

Per selezionare immagini o colori come sfondi per vari elementi di design, utilizza gli strumenti nella scheda Immagini. Basta posizionare il cursore su qualsiasi strumento e nella finestra a destra il designer mostrerà quale parte del tema cambia. Ad esempio, NTP Background viene utilizzato per configurare lo sfondo principale. E lo sfondo della scheda ti consente di selezionare lo sfondo dell'intestazione del sito.

Una volta individuati gli sfondi, puoi regolare i colori del testo nella scheda Colori. Qui funziona tutto allo stesso modo. C'è un elenco di strumenti, seleziona uno di essi e nella finestra a destra vedrai di cosa è responsabile.

Quando hai finito con gli sfondi e i colori del testo, apri la scheda Pacchetto e fai clic su Pacchetto e installa per scaricare e applicare il tema scelto.

Inoltre, puoi sempre scegliere e installare uno dei tanti temi già pronti dal database ThemeBeta o dal catalogo ufficiale di Google. Se in futuro desideri tornare al design standard, vai nelle impostazioni di Chrome e di fronte alla voce “Temi” clicca su “Scala predefinita”.

Arriva il momento e ti stanchi del solito, vuoi aggiungere un po 'di gusto al browser più popolare e una tale "caratteristica unica" in Chrome può essere un "tema", e non scaricabile dal negozio online ufficiale, ma il tuo possedere, a differenza di chiunque altro.

Come avrai già capito, oggi esamineremo la questione della creazione dei tuoi temi browser di Google Cromo.

Per creare abbiamo bisogno di:

1. più semplice redattore grafico(anche Paint andrà bene);
2. Le nostre istruzioni dettagliate;
3. Un po' di desiderio.

E non sto cercando di ingannarti, gli argomenti più interessanti per Browser Chrome vengono creati in pochi minuti, ma passiamo dalle parole ai fatti.

Esistono due modi per creare un tema per Google Chrome:

1. Scrivi da zero (creandone uno documento di testo e qualche foto);
2. Utilizza un servizio online specializzato.

Mentre decidi quale metodo utilizzare, inizierò con quello “più difficile”.

Creare un tema per Google Chrome da zero

I temi, così come le estensioni per i browser basati sul motore Chromium, si basano sul file manifest.json.

Manifest.json è un documento di testo che memorizza le impostazioni per temi ed estensioni, oltre a titolo, descrizione e altre informazioni di servizio.

Creiamo sul desktop nuova cartella con il nome del nostro futuro argomento, lo chiamerò “Non farlo!”, e al suo interno creeremo un documento di testo - manifest.json, dove manifest è il nome del documento e json è il suo file . Inoltre, creiamo una cartella vuota chiamata “immagini” che conterrà tutti gli elementi grafici del nostro tema.

Il prossimo passo nella creazione di un tema sarà la preparazione delle immagini.

Puoi già usarlo immagini già pronte, scaricato da Internet o creane uno tuo, lo farò completamente immagini uniche, per il successivo caricamento del tema nel negozio online di Chrome.

Avremo bisogno di immagini delle seguenti dimensioni:

1. 1920x1080px (formato HD) – da utilizzare come sfondo principale nel browser.

2. 30x256px: questa immagine verrà utilizzata come decorazione della finestra di Chrome.

3. 1100x40px – questa immagine fungerà da schermata iniziale nell'angolo in alto a sinistra del browser (non so perché dovrebbe essere utilizzata separatamente in questo posto immagine aggiuntiva: puoi usarla per un'ulteriore "personalizzazione" del tema).

4. 30x200px: fungerà da riempimento per le schede aperte del browser inattive.

5. 30x256px: questa immagine verrà utilizzata per riempire l'attivo scheda aperta e la barra dei Preferiti di Chrome.

Presta molta attenzione alle immagini, in particolare alle loro dimensioni; se non sai come realizzare una foto esattamente di queste dimensioni e forma, studia una delle nostre.

Bene, se hai già tutto pronto, vai avanti e crea un file manifest.json.

Puoi scaricare il file completo che ho preparato come campione o comporlo tu stesso seguendo le istruzioni riportate di seguito.

Il documento che descriverà il codice per il nostro tema inizia con parentesi graffa“(”, quindi è necessario compilare i campi:

( "name":"Non farlo!", // campo che indica il nome del tema; "version": "1", // numero di versione del tuo tema (in seguito, quando apporti modifiche ai temi, avrai bisogno per aggiornare la versione); " descrizione":"Riesci ancora a pensarci due volte?", // breve descrizione temi;

"theme":( "images":( "theme_frame": "images/theme_frame.jpeg", // immagine utilizzata nel design della finestra del browser; "theme_toolbar": "images/theme_toolbar.jpeg", // immagine utilizzata come riempimento scheda aperta attiva; "theme_tab_ background": "images/theme_tab_ background.jpeg", // riempimento delle schede aperte inattive; "theme_ntp_ background": "images/theme_ntp_ background.jpeg", // lo sfondo principale del nostro tema .jpeg"), // riempie l'angolo in alto a sinistra.

"tema" :( "immagini" : ( "theme_frame": "images/theme_frame.jpeg" , // immagine utilizzata nel design della finestra del browser; "theme_toolbar": "images/theme_toolbar.jpeg" , // immagine utilizzata come riempimento per la scheda aperta attiva; "tema_tab_sfondo" : "immagini/tema_tab_sfondo.jpeg", // riempie le schede aperte inattive; "theme_ntp_ background" : "immagini/tema_ntp_sfondo.jpeg", // lo sfondo principale del nostro tema; "theme_frame_overlay" : "immagini/theme_frame_overlay.jpeg"} , // riempie l'angolo in alto a sinistra.

Il codice in questa pagina utilizza il simbolo “//”, è necessario “commentare” il codice. Direttamente nel fascicolo manifest.json– può essere cancellato.

Dopo aver specificato i percorsi delle immagini, dovresti specificare i colori dei caratteri e degli elementi dell'interfaccia. IN manifest.json Vengono utilizzati i colori RGB: puoi ottenere i loro codici in qualsiasi convertitore online.

"colors":( "frame":, // Riempie lo spazio vuoto dello sfondo principale con il colore specificato; "toolbar":, // Riempie l'area nell'angolo in basso a sinistra, dove viene visualizzato l'"url" del sito; "tab_text":, // Colore del carattere della scheda aperta attiva; "tab_ background_text":, // Colore del carattere della scheda aperta inattiva; "bookmark_text":, // Colore del carattere dei segnalibri nel pannello del browser; :, // Colore di riempimento dello sfondo sotto le icone delle "applicazioni" nel browser; "ntp_text":, // Colore dei caratteri dei nomi delle applicazioni; "button_ background":), // Colore di "Chiudi", "Riduci a icona", " Pulsanti “schermo intero” nell'angolo in alto a destra.

"colori" :( "cornice": [ 0 , 0 , 0 ] , // Riempie lo spazio vuoto dello sfondo principale con il colore specificato; "barra degli strumenti": [ 0 , 0 , 0 ] , // Riempie l'area nell'angolo in basso a sinistra, dove viene visualizzato l'“url” del sito; "testo_tab" : [ 255 , 255 , 255 ] , // Colore del carattere della scheda aperta attiva; "tab_testo_sfondo" : [ 167 , 167 , 167 ] , // Colore del carattere di una scheda aperta inattiva; "testo_segnalibro" : [ 167 , 167 , 167 ] , // Colore del carattere dei segnalibri sul pannello del browser; "ntp_sfondo" : [ 0 , 0 , 0 ] , // Colore di riempimento dello sfondo sotto le icone delle "applicazioni" nel browser; "ntp_testo" : [ 167 , 167 , 167 ] , // Colore del carattere dei nomi delle applicazioni; "sfondo_pulsante" : [ 255 , 255 , 255 ] ), // Colore dei pulsanti “Chiudi”, “Riduci a icona”, “Schermo intero” nell'angolo in alto a destra.

Non resta che impostare il posizionamento dell'immagine di sfondo principale e un paio di impostazioni aggiuntive.

"tints":( "buttons": // Specifica le sfumature dei colori utilizzati (lascia i valori specificati qui);), "properties":( "ntp_ background_alignment": "bottom", // Specifica rispetto a quale bordo della finestra verrà posizionata l'immagine principale (bottom – bottom, top – top); "ntp_ background_repeat": "no-repeat" // Indichiamo se è necessario “riempire” l'intero spazio della finestra del browser con la nostra immagine. , se è di dimensioni maggiori rispetto alla nostra immagine principale) )

Hai seguito tutti i passaggi con me? Ottimo, puoi chiudere il file manifest e salvarlo e iniziare a testare il tema risultante caricando prima le immagini create in precedenza nella cartella "immagini".

Testare il tema per Chrome

I test sembrano troppo forti, infatti dobbiamo verificare se abbiamo commesso errori nel nostro lavoro.

Hai già un tema installato nel tuo browser e devi modificarlo leggermente? Nessun problema! I file sono già temi installati in Chrome sono archiviati in C:\Users\Username\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions

Apri il browser e vai su Impostazioni, scheda Estensioni e fai clic su Carica estensione decompressa. Assicurati di controllare che la "Modalità sviluppatore" sia selezionata.

Nella finestra che appare, seleziona la cartella con il tuo tema per Chrome e fai clic su "Ok" - nel mio caso, questa è la cartella "Non farlo!".

Congratulazioni! Il tema nel browser dovrebbe essere cambiato nel tuo, in caso contrario, torna al codice sopra e cerca errori nei tuoi file e risoluzioni delle immagini, oppure scarica l'archivio con i miei file dal collegamento e confrontalo con il tuo.

Ora puoi goderti il ​​tuo tema per Google Chrome, ma in ogni barile di miele c'è un cucchiaio di tu sai cosa.

Ogni volta che apri il browser, apparirà una finestra nell'angolo in alto a destra che ti informa che uno dei estensioni installate o che non sia stato scaricato dallo store ufficiale. C'è solo un modo per evitarlo: carica il tuo tema sullo store online ufficiale di Chrome e installalo nel browser da lì.

Come caricare un tema sul Chrome Store

Se decidi di separarti dai tuoi sudati guadagni, effettua una semplice registrazione nel negozio online all'indirizzo https://chrome.google.com/webstore/category/extensions.

Dopo aver creato un tema bello e unico, puoi rendere l'installazione a pagamento per gli utenti: in questo modo riceverai un piccolo reddito passivo.

Dopo esserti registrato e aver pagato un account sviluppatore, avrai l'opportunità di caricare le tue estensioni e temi nello store con restrizioni minori: non più di 20 estensioni per account, il numero di temi è illimitato.

Prima di tutto, crea un pacchetto dei file del tema e caricalo su Chrome Store come mostrato nello screenshot.

Se non si verificano errori, pagina iniziale Nel pannello dello sviluppatore, verranno visualizzate le informazioni sul tuo tema con un collegamento alla pagina delle impostazioni, dove potrai modificare la descrizione, aggiungere un'icona e pubblicare il tema.

Non descriverò tutti i campi disponibili per la compilazione - sono quindi ben commentati - se hai problemi scrivi un commento sotto il post e cercherò di aiutarti.

Creazione di un tema per Chrome utilizzando un servizio online

Nella prima parte dell'articolo ho descritto un metodo “complicato” per creare temi per il browser Google Chrome, ora passiamo a uno più semplice che non richiede di scavare nel codice e creare molte immagini aggiuntive. Tutto ciò che serve è andare al sito web - www.themebeta.com/chrome-theme-creator-online.html con uno sfondo grande pre-preparato.

I browser basati su Chromium non supportano i temi animati, ma Opera sì.

Una volta entrato nel servizio, che, tra l'altro, non è in alcun modo ufficialmente correlato alla società Google, vedrai zona di lavoro, dove a sinistra ci sono strumenti con commenti (in inglese), a destra viene visualizzata una finestra del browser Chrome in cui verranno visualizzate tutte le modifiche apportate, e in basso ci sono i pulsanti per posizionare la tua immagine rispetto alla finestra del browser.

Inserisci il nome del tema e scaricalo immagine di sfondo. Immediatamente: effettua le impostazioni di posizionamento o lasciale ai valori predefiniti.

Nella scheda “colori” puoi impostare i colori dei caratteri utilizzati in diversi punti del browser. Passa il cursore su una qualsiasi delle opzioni proposte a sinistra e la posizione della modifica verrà evidenziata in rosso nella finestra renderizzata. Tutto quello che devi fare è lavorare con la tavolozza dei colori per scegliere quelli che ti servono.

Senza caricare molte immagini aggiuntive discusse sopra, la finestra del tuo browser rifletterà il colore impostato Schema di Windows, cioè. Per una completa “personalizzazione” del tema è necessario caricare nella scheda “immagini” tutte le immagini proposte, secondo le dimensioni indicate nella prima parte dell'articolo.

Accedendo alla scheda "Pacchetto", ti verranno offerte tre azioni tra cui scegliere:

1. Installa il tema risultante nel browser (ricorda lo svantaggio della finestra all'apertura del browser).
2. Pacchetto tema in formato file crx e scaricalo sul tuo computer (questo file è il file di installazione per temi ed estensioni nel browser Chrome).
3. Scarica il "codice sorgente" del tema su archivio zip(puoi scaricarlo immediatamente tema già pronto al negozio online).

Prendo atto che quando utilizzi questo servizio, il tuo tema verrà inserito nella directory e sarà disponibile per il download e l'installazione da parte di altri utenti.

Se sei interessato, nei post successivi descriverò il procedimento di creazione di temi animati per il browser Opera.

Forse a qualcuno piacerà questo articolo. Qui ho deciso di pubblicare diversi temi belli e piacevoli per il browser Google Chrome.

Oggi è uno dei browser più popolari, ma tu ed io lo sappiamo già. Ha molte funzionalità: plugin, estensioni e ovviamente temi per Google Chrome. In questo modo puoi personalizzare l'aspetto del tuo browser nel modo che preferisci. Di seguito darò diverse opzioni per gli argomenti, forse alcuni ti piaceranno e altri no, sta a te scegliere.

Temi per Google Chrome

Cubi blu e verdi, un bel tema di design per il dipinto, abbastanza minimalista e carino. Se ti piacciono i temi come questo, affrettati a installarlo.

Già dal nome si capisce che il tema per i fan di Batman, come potete vedere, è anche piacevole da vedere.

• Carbonio nero + metallo argento

Il tema è metallo argento e carbonio nero, molto minimalista con un bellissimo motivo, il motivo si trova vicino alla barra di ricerca.

• Doink

Il tema è grande, con un motivo floreale sullo sfondo e molti fiori nella parte superiore della finestra del browser. Il design è convincente alla vista. Nelle stanze ben illuminate, i colori chiari a tema torneranno utili. Se ti piace il tema, installalo.

• Politema

Molto argomento interessante in una forma minimalista, un'ampia varietà di sfumature viola. Sicuramente imposterei un argomento del genere.

Tema sotto forma di strisce alternate bianche e nere. Chiunque l'abbia realizzato ha sicuramente un grande senso del design.

• Citrus_Crane

Il tema è in tonalità arancione con verde lime e colore origami kaki sullo sfondo. Vediamo gli origami di carta nella parte superiore della finestra del browser. Sembra fantastico.

• Tema di Google Now

Penso che sia abbastanza. Dieci temi, penso che ti piaceranno un paio di loro e deciderai di installarli nel tuo browser. Anche se non ti piace nessun tema, puoi sceglierne un altro dal Chrome Web Store.