Kako napraviti temu u Chrome-u. Zanimljive činjenice i korisni savjeti. Testiranje teme za Chrome

Dođe vrijeme i umorite se od uobičajenog, želite da dodate malo poleta u najpopularniji preglednik i takva „jedinstvena karakteristika“ u Chromeu može biti „tema“, a ne preuzeta sa službene internet trgovine, već vaša sopstveni, za razliku od bilo koga drugog.

Kao što ste možda već shvatili, danas ćemo razmotriti pitanje kreiranja vlastitih tema za preglednik Google Chrome.

Za kreiranje potrebno nam je:

  1. Najjednostavniji grafički uređivač (čak će i Paint);
  2. Naša detaljna uputstva;
  3. Malo želje.

I ne pokušavam da vas zavaram, najbolje teme za Chrome pretraživač kreiraju se za nekoliko minuta, ali pređimo od riječi do djela.

Postoje dva načina da kreirate temu za Google Chrome:

  1. Pišite od nule (kreiranjem jednog tekstualnog dokumenta i nekoliko slika);
  2. Koristite specijalizovanu online uslugu.

Dok vi odlučite koju metodu ćete koristiti, ja ću početi s "najtežom".

Kreiranje teme za Google Chrome od nule

Teme, kao i ekstenzije za pretraživače zasnovane na Chromium mašini, su zasnovane na datoteci manifest.json.

Manifest.json je tekstualni dokument koji pohranjuje postavke za teme i ekstenzije, kao i naslov, opis i druge informacije o usluzi.

Kreirajmo novi folder na radnoj površini s imenom naše buduće teme, za mene će se zvati "Nemoj to raditi!", a unutar njega ćemo kreirati tekstualni dokument - manifest.json, gdje je manifest naziv dokumenta, a json njegov . Osim toga, kreirajte praznu mapu pod nazivom “images” koja će sadržavati sve grafičke elemente naše teme.

Sljedeći korak u kreiranju teme bit će priprema slika.

Možete koristiti gotove slike preuzete s interneta ili napraviti svoje. Napravit ću potpuno jedinstvene slike za naknadno postavljanje teme u Chrome online prodavnicu.

Trebat će nam slike sljedećih veličina:

1. 1920x1080px (HD format) – za korištenje kao glavna pozadina u pretraživaču.

2. 30x256px – ova slika će se koristiti kao dekoracija Chrome prozora.

3. 1100x40px – ova slika će se ponašati kao splash screen u gornjem lijevom uglu pretraživača (ne znam zašto biste koristili dodatnu sliku na ovom mjestu posebno - možete je koristiti za dodatno “prilagođavanje” teme ).

4. 30x200px – služiće kao popunjavanje neaktivnih otvorenih kartica pretraživača.

5. 30x256px – ova slika će se koristiti za popunjavanje aktivne otvorene kartice i Chrome trake sa oznakama.

Obratite pažnju na slike, posebno na njihove veličine, ako ne znate kako napraviti sliku upravo ove veličine i oblika, proučite jednu od naših.

Pa, ako već imate sve spremno, samo naprijed i kreirajte datoteku manifest.json.

Možete preuzeti kompletan fajl koji sam pripremio kao uzorak - ili ga sami sastaviti prema uputstvima u nastavku.

Dokument u kojem će biti opisan kod naše teme počinje vitičastom zagradom "(", a zatim morate popuniti polja:

( "name":"Nemojte to raditi!", // polje koje označava naziv teme; "verzija": "1", // broj verzije vaše teme (kasnije, kada mijenjate teme, trebate za ažuriranje verzije: "Može li još dvaput razmisliti?", // kratak opis teme "manifest_version": // verzija manifesta (postoje dvije verzije "manifesta"); i 2, verzija 1 - za preglednike Chrome ispod verzije 18, 2 za preglednike verzije 18 i novije, uključujući).

"theme":( "images":( "theme_frame": "images/theme_frame.jpeg", // slika korištena u dizajnu prozora preglednika; "theme_toolbar": "images/theme_toolbar.jpeg", // slika korištena kao popunjavanje aktivna otvorena kartica "theme_tab_background": "images/theme_tab_background.jpeg", // popunjavanje neaktivnih kartica "theme_ntp_background": "images/theme_ntp_background.jpeg", // glavna pozadina naše teme; // popuniti gornji lijevi kut.

"tema" :(

"slike" : (

"theme_frame" : "images/theme_frame.jpeg" , // slika koja se koristi u dizajnu prozora pretraživača;

"theme_toolbar" : "images/theme_toolbar.jpeg" , // slika koja se koristi kao ispuna za aktivnu otvorenu karticu;

"theme_tab_background" : "images/theme_tab_background.jpeg", // popunjavanje neaktivnih otvorenih kartica;

"theme_ntp_background" : "images/theme_ntp_background.jpeg", // glavna pozadina naše teme;

"theme_frame_overlay" : "images/theme_frame_overlay.jpeg"} , // popuniti gornji lijevi kut.

Kod na ovoj stranici koristi simbol “//”, potrebno je “komentirati” kod. Direktno u fajlu manifest.json– može se izbrisati.

Nakon što ste odredili putanje do slika, trebalo bi da odredite boje fontova i elemenata interfejsa. IN manifest.json Koriste se RGB boje - njihove kodove možete dobiti u bilo kojem online pretvaraču.

"colors":( "frame":, // Popunjava prazan prostor glavne pozadine navedenom bojom; "toolbar":, // Popunjava područje u donjem lijevom kutu, gdje je prikazan "url" stranice; "tab_text":, // Font u boji aktivne otvorene kartice "tab_background_text":, // Boja fonta neaktivne kartice "bookmark_text":, // Boja fonta za oznake na panelu pretraživača; :, // Boja pozadine ispod ikona "aplikacija" u pretraživaču:, // Boja fonta imena aplikacija "button_background":), // Boja "Zatvori", "Minimiziraj", "; Cijeli ekran” dugmad u gornjem desnom uglu.

"boje" :(

"okvir" : [ 0 , 0 , 0 ] , // Popunjava prazan prostor glavne pozadine navedenom bojom;

"toolbar" : [ 0 , 0 , 0 ] , // Ispunjava područje u donjem lijevom kutu, gdje je prikazan “url” stranice;

"tab_text" : [ 255 , 255 , 255 ] , // Boja fonta aktivne otvorene kartice;

"tab_background_text" : [ 167 , 167 , 167 ] , // Boja fonta neaktivne otvorene kartice;

"bookmark_text" : [ 167 , 167 , 167 ] , // Boja fonta oznaka na panelu pretraživača;

"ntp_background" : [ 0 , 0 , 0 ] , // Boja pozadine ispod ikona "aplikacija" u pretraživaču;

"ntp_text" : [ 167 , 167 , 167 ] , // Boja fonta imena aplikacija;

"button_background" : [ 255 , 255 , 255 ] ), // Boja dugmadi “Close”, “Minimize”, “Full Screen” u gornjem desnom uglu.

Ostaje samo podesiti pozicioniranje glavne pozadinske slike i nekoliko dodatnih postavki.

"tints":( "buttons": // Odredite nijanse korištenih boja (ostavite vrijednosti navedene ovdje);), "properties":( "ntp_background_alignment": "bottom", // Odredite u odnosu na koji rub prozora će se nalaziti glavna slika (dole – dole, gore – gore "ntp_background_repeat": "no-repeat" // Označavamo da li je potrebno "popuniti" čitav prostor prozora pretraživača našom slikom); , ako je veće veličine od naše glavne slike) )

Jesi li prošao sve korake sa mnom? Odlično, možete zatvoriti datoteku manifesta i spremiti je te započeti testiranje rezultirajuće teme tako što ćete prvo učitati prethodno kreirane slike u mapu "images".

Testiranje teme za Chrome

Testiranje zvuči preglasno, zapravo, moramo provjeriti da li smo napravili neku grešku u radu.

Da li već imate instaliranu temu u vašem pretraživaču i trebate je malo izmijeniti? Nema problema! Fajlovi već instaliranih tema u Chromeu pohranjeni su na C:\Users\User_Name\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions

Otvorite svoj pretraživač i idite na Postavke, karticu Ekstenzije i kliknite Učitaj raspakovanu ekstenziju. Obavezno provjerite da li je označen "Način za razvojne programere".

U prozoru koji se pojavi odaberite mapu sa svojom temom za Chrome i kliknite na "U redu" - u mom slučaju, ovo je mapa "Nemoj to raditi!"

Čestitamo! Tema u pretraživaču bi se trebala promijeniti u vašu, ako nije, onda se vratite na gornji kod i potražite greške u vašim datotekama i rezolucijama slika, ili preuzmite arhivu sa mojim datotekama sa linka - i uporedite s vašim.

Sada možete uživati ​​u vlastitoj temi za Google Chrome, ali u svakom buretu meda nalazi se kašika znate čega.

Svaki put kada otvorite svoj pretraživač, u gornjem desnom uglu će se pojaviti prozor koji vas obaveštava da jedna od instaliranih ekstenzija ili tema nije preuzeta iz službene prodavnice. Postoji samo jedan način da to izbjegnete - postavite svoju temu u službenu Chrome online trgovinu i odatle je instalirajte u preglednik.

Kako prenijeti temu u Chrome Store

Ako se odlučite odvojiti od svog teško zarađenog novca, prođite jednostavnu registraciju u online trgovini na https://chrome.google.com/webstore/category/extensions.

Nakon što ste kreirali lijepu i jedinstvenu temu, možete učiniti instalaciju plaćenom za korisnike - na taj način ćete dobiti mali pasivni prihod.

Nakon registracije i plaćanja za razvojni račun, imat ćete priliku učitati vlastita proširenja i teme u trgovinu s manjim ograničenjima - ne više od 20 ekstenzija po računu, broj tema je neograničen.

Prije svega, zapakirajte datoteke teme i otpremite ih u Chrome Store kao što je prikazano na snimku ekrana.

Ako nije bilo grešaka, informacije o vašoj temi će se pojaviti na glavnoj stranici panela za programere sa vezom do stranice postavki, gdje možete promijeniti opis, dodati ikonu i objaviti temu.



Neću opisivati ​​sva polja koja su dostupna za popunjavanje - ona su, dakle, dobro komentarisana - ako imate problema, napišite komentar ispod posta i pokušaću da vam pomognem.

Kreiranje teme za Chrome pomoću online usluge

U prvom dijelu članka opisao sam "komplikovanu" metodu kreiranja tema za preglednik Google Chrome, a sada prijeđimo na jednostavniji koji ne zahtijeva kopanje u kodu i stvaranje puno dodatnih slika. Sve što trebate je otići na web stranicu - www.themebeta.com/chrome-theme-creator-online.html sa unaprijed pripremljenom velikom pozadinom.

Preglednici zasnovani na Chromiumu ne podržavaju animirane teme, ali Opera podržava.

Jednom na servisu, koji, inače, ni na koji način nije službeno povezan sa Google korporacijom, vidjet ćete radno područje u kojem se nalaze alati s komentarima (na engleskom) s lijeve strane, a sa desne strane vizualizirani prozor Chrome pretraživača , u kojem će biti prikazane sve izvršene promjene, a na dnu se nalaze dugmad za pozicioniranje vaše slike u odnosu na prozor pretraživača.

Unesite naziv teme i otpremite pozadinsku sliku. Odmah - napravite postavke pozicioniranja ili ih ostavite na zadanim.

Na kartici "Boje" možete postaviti boje fontova koji se koriste na različitim mjestima u pretraživaču. Zadržite pokazivač iznad bilo koje od predloženih opcija na lijevoj strani i mjesto promjene će biti istaknuto crvenom bojom u vizualiziranom prozoru. Sve što trebate učiniti je raditi s paletom boja kako biste odabrali one koje su vam potrebne.

Bez preuzimanja puno dodatnih slika o kojima smo gore govorili, prozor vašeg pretraživača će odražavati zadanu shemu boja Windowsa, tj. Za potpunu "prilagodbu" teme potrebno je da sve predložene slike unesete u karticu "slike", prema veličinama navedenim u prvom dijelu članka.

Odlaskom na karticu “Pakiranje” dobit ćete tri akcije koje možete izabrati:

  1. Instalirajte rezultirajuću temu u pretraživač (zapamtite nedostatak prozora prilikom otvaranja pretraživača).
  2. Pakujte temu u format datoteke crx i preuzmite je na svoj računar (ova datoteka je instalaciona datoteka za teme i ekstenzije u pregledniku Chrome).
  3. Preuzmite "izvorni kod" teme u zip arhivi (gotovu temu možete odmah prenijeti u online prodavnicu).

Napominjem da će prilikom korištenja ove usluge vaša tema biti smještena u direktorij i bit će dostupna za preuzimanje i instalaciju drugim korisnicima.

Ako ste zainteresovani, u narednim postovima ću opisati proces kreiranja animiranih tema za pretraživač Opera.

Da biste to učinili, trebat će vam poseban program za izradu web tema, malo inspiracije i nekoliko minuta slobodnog vremena. Iako ako patite od perfekcionizma, možete provesti nekoliko sati. Upozorili smo vas. :)

Dakle, otvorite web aplikaciju. Vidjet ćete kartice s alatima za kreiranje tema na lijevoj strani prozora i oblast za pregled na desnoj strani.

Ovaj konstruktor vam omogućava da kreirate teme u poluautomatskom režimu. Ali sve možete i ručno prilagoditi tako da rezultat potpuno odgovara vašem ukusu.

1. Jednostavan način

Poenta je u ovome: u konstruktor postavljate bilo koju sliku koju želite, a ThemeBeta je koristi kao glavnu pozadinu za novu temu i automatski joj prilagođava sve boje dizajna.

Da biste dodali svoju sliku, na kartici Osnovno kliknite na Otpremi sliku i odaberite željenu sliku na svom računaru. Zatim, da bi urednik prilagodio boje teme, kliknite na Generiraj boje.

Ako ste zadovoljni rezultatom, kliknite na Pakuj i instaliraj i potvrdite preuzimanje, a zatim dodajte temu u Chrome. Pretraživač odmah aktivira novi dizajn.

Ako nakon automatske konfiguracije želite promijeniti boje ili dodati zasebne pozadine za različite elemente teme, trebat će vam alati ispod drugih kartica. Više detalja o njima nalazi se u sljedećem pasusu članka.

2. Napredna metoda

Ova metoda uključuje ručno postavljanje pozadine i boja teksta za novu temu.

Da biste odabrali slike ili boje kao pozadinu za različite elemente dizajna, koristite alate na kartici Slike. Samo zadržite pokazivač iznad bilo kojeg alata, a u prozoru s desne strane dizajner će pokazati koji dio teme mijenja. Na primjer, NTP pozadina se koristi za konfiguraciju glavne pozadine. A Pozadina kartice vam omogućava da odaberete pozadinu zaglavlja stranice.

Kada shvatite pozadinu, možete prilagoditi boje teksta na kartici Boje. Ovdje sve funkcionira na isti način. Postoji lista alata, pokažite na bilo koji od njih - i u prozoru sa desne strane videćete za šta je odgovoran.

Kada završite s pozadinom i bojama teksta, otvorite karticu Pack i kliknite na Pack and Install da preuzmete i primijenite odabranu temu.

Osim toga, uvijek možete odabrati i instalirati jednu od mnogih gotovih tema iz baze podataka ThemeBeta ili službenog Google kataloga. Ako u budućnosti želite da se vratite na standardni dizajn, idite na postavke Chrome-a i nasuprot stavke “Teme” kliknite “Zadana skala”.

Moderni pretraživač Google Chrome pojavio se relativno nedavno, ali je već osvojio mnoge obožavatelje. Naravno, jer se brzina rada s njim ne može porediti ni sa jednim analogom. Sada je moderna inovacija postala dostupna svim korisnicima, omogućavajući im da samostalno kreiraju, uređuju po svom ukusu i instaliraju teme za svoj omiljeni pretraživač. Besplatni online dizajner chrometheme.net može pomoći u tome. Da biste to učinili, samo idite na stranicu i preusmjerite na vezu Theme Creator. Na kartici Početak morate unijeti naziv teme, au sljedećem redu - njen opis. Zatim idite na karticu Slike.

Pomoću stavke Okvir možete jednostavno promijeniti dizajn okvira. Pomicanjem miša odabiremo željeno područje primjene, čiji se rezultat prikazuje u pregledu prozora. Odabiremo kada rezultat zadovoljava naše želje. Otvorite stavku Toolbar-a, koja vam omogućava da promijenite dizajn adresne trake koristeći punu paletu boja. Ali takođe možete da otpremite bilo koju željenu sliku sa svog računara.


Screenshots

(Kliknite na sliku za uvećanje)

Opcija Pozadina kartice vam, naravno, omogućava promjenu pozadine kartica. Na ovoj kartici ne možete samo odabrati pozadinu preglednika iz predložene palete, već i preuzeti bilo koju. Ako je pozadinska slika premala, odaberite Ponovi, čime će se slika ažurirati na željenu veličinu. Odmah ispod odaberite željenu lokaciju pozadine i pričvrstite je na jednu od strana ili u sredini.

Preporučuje se da opciju preklapanja okvira ostavite nepromijenjenu. Sljedeća stavka Nova kartica Atribucija (dodavanje nove oznake kartici) vam omogućava da dodate neki zanimljiv logotip na dno tako što ćete učitati gotovu sliku sa vašeg računara. Koristeći opciju Window Control Background, možete odabrati i promijeniti karakteristiku boje prozora, u U ovom slučaju, pozadina prozora će biti u jednom tonu. Ali također možete ostaviti nepromijenjenu ako već imate odabranu pozadinu.

Samo naprijed i otvorite karticu Boje i nijanse. Među čitavom listom postavki možete odabrati boju teksta aktivne kartice, boju neaktivne kartice, boju alatne trake, pozadinu dugmadi itd. Eksperimentiramo i biramo postavke koje nam se sviđaju. Ostaje samo da upakujemo gotovu temu. Vratite se na karticu Start i odaberite jednu od tri predložene komande: Pakuj i instaliraj temu, Pakuj i preuzmi temu i Pakuj i preuzmi zip datoteku.

Možete početi instalirati svoju novu dizajniranu temu. Kliknite na dugme Dalje koje se pojavljuje na dnu prozora i pričekajte nekoliko sekundi. Tema je postavljena. Također bi bilo pametno sačuvati paket tema za budućnost kako biste kasnije mogli uređivati ​​temu.

Uvek se trudimo da sve personalizujemo, prilagodimo sebi i prepravimo na osnovu naših preferencija i ukusa. Računar nije izuzetak u tom pogledu. Na kraju krajeva, pravilno odabrana slika za screensaver ili jednostavno boje koje su ugodne oku mogu podići udobnost korištenja računara na potpuno novi nivo.

Ko od nas nije promijenio pozadinu za Windows? U današnje vrijeme rijetkost je sresti takvu osobu. Neki imaju mačke, neki prelijepu mladu damu, a neki vole apstrakciju.

Jeste li znali da se slični screensaveri mogu instalirati u pregledniku Google Chrome? Samo tamo se zovu teme.

Ako ste umorni od zadanog bijelog platna, čitajte dalje da biste saznali kako možete promijenite dizajn teme u Google Chromeu.

Promjena teme (splash screen) u Chromeu

Promijenite temu u Google Chromeu možete slijediti sljedeća uputstva:

Takođe možete direktno pratiti link.

U ovom dijelu ćete vidjeti ogromnu galeriju svih vrsta tema. Neke od njih kreirali su Google dizajneri, a neke umjetnici. Svi su besplatni.

Kada pronađete željenu temu, postavite pokazivač miša preko nje i kliknite u iskačućem prozoru "besplatno".

Ostale teme za preuzimanje Google Chromea

Drugi izvor tema su dizajneri trećih strana. Kako se ispostavilo, ima ih jako, jako puno. Često po kvaliteti znatno nadmašuju standardne, a da ne govorimo o raznolikosti.

Preuzmite Google Chrome teme:

Preuzete datoteke imaju ekstenziju CRX (ponekad se mogu zipovati). Da biste ih instalirali, trebali biste raspakirati i jednostavno prevući datoteke teme u prozor vašeg pretraživača.

Generator tema (skina) za Google Chrome

Ako gore navedene metode ne daju rezultate, trebali biste ih koristiti generator temaMoja Chrome tema, koji se može preuzeti sa istog "Online prodavnica".

Direktan link za preuzimanje.

Korištenje ove aplikacije je vrlo jednostavno: postavljate sliku, prilagođavate shemu boja i obrađujete je pomoću dostupnih alata.

Ako je ranije bilo moguće kreirati teme za Chrome samo pomoću posebnih dodataka, sada je postalo mnogo lakše s Themebeta alatom. Možete promijeniti gotovo sve - od pozadinske slike do boje fontova i kartica. Osim toga, svoju temu možete objaviti u direktoriju tema kako bi je drugi korisnici mogli sami instalirati. U ovom kratkom članku ćemo pogledati kako kreirati temu za Google Chrome ili Chromium.

Prije svega, hajde da se prijavimo sa našim Google računom na web stranici https://www.themebeta.com/. U tom slučaju, stranica će tražiti dozvolu za pristup nekim podacima vašeg računa, potvrditi i nastaviti sa kreiranjem teme. Da biste počeli raditi na kreiranju teme, kliknite na vezu Theme Creator:

Funkcionalnost ThemeBeta je prilično jednostavna i jasna: odmah se otvara stranica za uređivanje teme na koju možete učitati pozadinsku sliku i odabrati boje. Dakle, idemo na korak 1 i otpremite sliku.

Ako je vaš cilj bio samo da promijenite pozadinsku sliku Chrome-a, tada možete odmah kliknuti na Pack&Install da sačuvate i instalirate temu, ali ćemo pogledati detaljnije postavke. Zatim se predlaže da se boje automatski generiraju na osnovu boja učitane fotografije. Ponekad se boje uspješno generiraju, a ponekad ne. Ne zaboravite da skripta nema svoj ukus i jednostavno uzima odgovarajuće boje sa slike.

Ako boje nisu zadovoljavajuće, kao u ovom slučaju, idite na karticu Slike za detaljnije podešavanje. Ni tu nema ništa komplikovano - na kartici Slike možete konfigurisati boje i slike interfejsa teme, na kartici Boje možete da konfigurišete boje fonta, kao i boju statusne trake i trake sa obeleživačima. Radi praktičnosti, područja koja se mogu uređivati ​​su označena crvenom bojom.

Na kartici Boje postavite boje fontova, trake sa oznakama i statusne trake:

Kada su sva podešavanja završena, idite na posljednju karticu Pack da biste spremili i instalirali temu. Kada se jednom sačuva i instalira, tema se može uređivati, tako da uvijek možete nešto promijeniti. Nakon što kliknete na dugme za instalaciju, pretraživač će od vas zatražiti da instalirate novu temu. Slažemo se i ocjenjujemo našu novu temu. Ako vam sve odgovara, prelazimo na sljedeći korak, ako ne, uređujemo dalje dok ne dobijemo rezultat koji nam se sviđa.

Nakon što sačuvate svoju temu, možete je javno objaviti u kreiranom direktoriju tema. Korisnici će vidjeti ime kreatora teme, pa će mu se čak i svidjeti. Da biste to učinili, vratite se na prvu karticu Basic i kliknite Save Online. U prozoru koji se pojavi potrebno je navesti naziv teme, kategoriju, oznake odvojene zarezima, a također, ako želite, dodati opis i prenijeti snimku ekrana teme.

Nakon što kliknete na Sačuvaj, tema će biti sačuvana, ali neće biti objavljena u direktorijumu tema. Postoje određene prednosti u tome - moguće je sve ponovo provjeriti prije nego što se objavi u javnosti. Nakon što se uvjerite da je sve u redu, kliknite na link Objavi da biste postavili temu u direktorij. Nakon toga, moći ćete vidjeti svoju temu među novim temama u katalogu.

Male stvari poput nove pozadine radne površine ili nove teme pretraživača nam se čine kao besmislice, ali, začudo, mogu utjecati na naše raspoloženje i dobrobit. Stoga, nemojmo zanemariti ovu jednostavnu priliku za diverzifikaciju okruženja, pogotovo jer sada možete prilagoditi izgled Google Chrome ili Chromium pretraživača gotovo kako želite.

  • Sergej Savenkov

    nekakav “kratki” osvrt...kao da im se negdje žuri