Zamanı gelir ve sıradan olandan sıkılırsınız, en popüler tarayıcıya biraz lezzet katmak istersiniz ve Chrome'daki böyle bir "benzersiz özellik" bir "tema" olabilir ve resmi çevrimiçi mağazadan indirilemez, ancak sizin başkalarının aksine, kendine ait.

Zaten anlamış olabileceğiniz gibi bugün Google Chrome tarayıcısı için kendi temalarınızı oluşturma konusuna bakacağız.

Oluşturmak için ihtiyacımız var:

  1. En basit grafik düzenleyici (Paint bile iş görür);
  2. Detaylı talimatlarımız;
  3. Biraz arzu.

Ve sizi kandırmaya çalışmıyorum, Chrome tarayıcısı için en harika temalar birkaç dakika içinde oluşturuluyor, ancak hadi sözlerden eyleme geçelim.

Google Chrome için tema oluşturmanın iki yolu vardır:

  1. Sıfırdan yazın (bir metin belgesi ve birkaç resim oluşturarak);
  2. Özel bir çevrimiçi hizmet kullanın.

Siz hangi yöntemi kullanacağınıza karar verirken ben “en zor” olandan başlayacağım.

Google Chrome için sıfırdan bir tema oluşturma

Krom motorunu temel alan tarayıcılara yönelik temaların yanı sıra uzantılar da dosyaya dayalıdır manifest.json.

Manifest.json, tema ve uzantı ayarlarının yanı sıra başlık, açıklama ve diğer hizmet bilgilerinin saklandığı bir metin belgesidir.

Masaüstünde gelecekteki konumumuzun adıyla yeni bir klasör oluşturalım, benim için adı “Yapma!” Olacak ve içinde bir metin belgesi oluşturacağız - manifest.json burada manifest belgenin adıdır, json ise . Ayrıca temamızın tüm grafik öğelerini içerecek “resimler” adında boş bir klasör oluşturun.

Tema oluşturmanın bir sonraki adımı görsellerin hazırlanması olacaktır.

İnternetten indirilen hazır görselleri kullanabilir veya kendinizinkini oluşturabilirsiniz; temanın daha sonra Chrome çevrimiçi mağazasına yüklenmesi için tamamen benzersiz görseller yapacağım.

Aşağıdaki boyutlarda resimlere ihtiyacımız olacak:

1. 1920x1080px (HD formatı) – tarayıcıda ana arka plan olarak kullanmak için.

2. 30x256px – bu resim Chrome pencere dekorasyonu olarak kullanılacaktır.

3. 1100x40px – bu görüntü, tarayıcının sol üst köşesinde bir açılış ekranı görevi görecektir (burada neden ayrı olarak ek bir görüntü kullanmanız gerektiğini bilmiyorum - bunu temanın ek "özelleştirilmesi" için kullanabilirsiniz) ).

4. 30x200px – etkin olmayan açık tarayıcı sekmeleri için dolgu görevi görür.

5. 30x256 piksel – bu resim, etkin açık sekmeyi ve Chrome yer işaretleri çubuğunu doldurmak için kullanılacaktır.

Görsellere, özellikle de boyutlarına çok dikkat edin; eğer tam olarak bu boyut ve şekilde bir resmin nasıl yapılacağını bilmiyorsanız, bizimkilerden birini inceleyin.

Zaten her şeyiniz hazırsa devam edin ve bir dosya oluşturun manifest.json.

Örnek olarak hazırladığım tamamlanmış dosyayı indirebilir veya aşağıdaki talimatlara göre kendiniz oluşturabilirsiniz.

Temamızın kodunun anlatılacağı belge küme parantezi “(” ile başlıyor, ardından alanları doldurmanız gerekiyor:

("name":"Yapma!", // temanın adını belirten alan; "version": "1", // temanızın sürüm numarası (daha sonra temalarda değişiklik yaparken ihtiyacınız olacak) sürümü güncellemek için); " açıklama":"Hala iki kez düşünebilir misiniz?", // konunun kısa açıklaması; "manifest_version":2, // manifesto sürümü ("manifest"in iki versiyonu vardır - 1) ve 2, sürüm 1 - sürüm 18'in altındaki Chrome tarayıcılar için, 2, sürüm 18 ve üzeri tarayıcılar için (dahil).

"theme":( "images":( "theme_frame": "images/theme_frame.jpeg", // tarayıcı penceresi tasarımında kullanılan resim; "theme_toolbar": "images/theme_toolbar.jpeg", // dolgu olarak kullanılan resim aktif açık sekme; "theme_tab_background": "images/theme_tab_background.jpeg", // aktif olmayan açık sekmeleri doldurma; "theme_ntp_background": "images/theme_ntp_background.jpeg", // temamızın ana arka planı; "theme_frame_overlay": "images /theme_frame_overlay .jpeg"), // sol üst köşeyi doldurun.

"tema" :(

"Görüntüler" : (

"theme_frame" : "images/theme_frame.jpeg", // tarayıcı penceresi tasarımında kullanılan resim;

"theme_toolbar": "images/theme_toolbar.jpeg", // etkin açık sekme için dolgu olarak kullanılan resim;

"theme_tab_background": "images/theme_tab_background.jpeg", // etkin olmayan açık sekmeleri doldur;

"theme_ntp_background": "images/theme_ntp_background.jpeg", // temamızın ana arka planı;

"theme_frame_overlay": "images/theme_frame_overlay.jpeg"} , // sol üst köşeyi doldurun.

Bu sayfadaki kod “//” sembolünü kullanıyor, kodu “yorumlamak” gerekiyor. Doğrudan dosyada manifest.json– silinebilir.

Resimlerin yollarını belirledikten sonra yazı tiplerinin ve arayüz öğelerinin renklerini de belirtmelisiniz. İÇİNDE manifest.json RGB renkleri kullanılır; kodlarını herhangi bir çevrimiçi dönüştürücüden alabilirsiniz.

"renkler":( "çerçeve":, // Ana arka planın boş alanını belirtilen renkle doldurur; "araç çubuğu":, // Sitenin "url'sinin" görüntülendiği sol alt köşedeki alanı doldurur; "tab_text":, // Etkin açık sekmenin yazı tipi rengi; "tab_background_text":, // Etkin olmayan açık sekmenin yazı tipi rengi; "bookmark_text":, // Tarayıcı panelindeki yer imlerinin yazı tipi rengi; "ntp_background": , // Tarayıcıdaki "uygulama" simgelerinin altındaki arka plan dolgu rengi; "ntp_text":, // Uygulama adlarının yazı tipi rengi; "button_background" :), // "Kapat", "Küçült", "Tam" rengi Sağ üst köşedeki Ekran" düğmeleri.

"renkler" :(

"çerçeve" : [ 0 , 0 , 0 ] , // Ana arka plandaki boş alanı belirtilen renkle doldurur;

"araç çubuğu": [ 0 , 0 , 0 ] , // Sol alt köşede sitenin “url”sinin görüntülendiği alanı doldurur;

"sekme_metni": [ 255 , 255 , 255 ] , // Etkin açık sekmenin yazı tipi rengi;

"tab_background_text": [ 167 , 167 , 167 ] , // Etkin olmayan açık sekmenin yazı tipi rengi;

"yer işareti_metni": [ 167 , 167 , 167 ] , // Tarayıcı panelindeki yer imlerinin yazı tipi rengi;

"ntp_background": [ 0, 0, 0], // Tarayıcıdaki "uygulama" simgelerinin altındaki arka plan dolgu rengi;

"ntp_metni": [ 167 , 167 , 167 ] , // Uygulama adlarının yazı tipi rengi;

"button_background": [ 255 , 255 , 255 ] ), // Sağ üst köşedeki “Kapat”, “Küçült”, “Tam Ekran” butonlarının rengi.

Geriye kalan tek şey, ana arka plan görüntüsünün konumunu ve birkaç ek ayarı ayarlamaktır.

"tints":( "buttons": // Kullanılan renklerin tonlarını belirtin (belirtilen değerleri burada bırakın);), "properties":( "ntp_background_alignment": "bottom", // Hangi kenara göreli olduğunu belirtin ana görselin yerleştirileceği pencerenin (alt – alt, üst – üst); “ntp_background_repeat”: “tekrarlama yok” // Tarayıcı penceresinin tüm alanını görselimizle “doldurmanın” gerekli olup olmadığını belirtiyoruz , eğer ana görselimizden daha büyük boyutta ise. ))

Tüm adımları benimle birlikte geçtin mi? Harika, manifest dosyasını kapatıp kaydedebilir ve önceden oluşturulan görselleri "images" klasörüne yükleyerek ortaya çıkan temayı test etmeye başlayabilirsiniz.

Temayı Chrome için test etme

Test yapmak çok gürültülü geliyor, aslında işimizde herhangi bir hata yapıp yapmadığımızı kontrol etmemiz gerekiyor.

Tarayıcınızda zaten yüklü bir temanız var ve onu biraz değiştirmeniz mi gerekiyor? Sorun değil! Chrome'da önceden yüklü olan temaların dosyaları C:\Users\Kullanıcı_Adı\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions konumunda depolanır

Tarayıcınızı açın ve Ayarlar, Uzantılar sekmesine gidin ve Paketlenmemiş uzantıyı yükle'ye tıklayın. “Geliştirici Modu”nun işaretli olup olmadığını kontrol ettiğinizden emin olun.

Görünen pencerede, Chrome temanızın bulunduğu klasörü seçin ve "Tamam"ı tıklayın - benim durumumda bu, "Yapma!" klasörüdür.

Tebrikler! Tarayıcıdaki temanın sizinkine değişmiş olması gerekir, değilse yukarıdaki koda dönün ve dosyalarınızdaki ve görüntü çözünürlüklerindeki hataları arayın veya dosyalarımı içeren arşivi bağlantıdan indirin ve sizinkiyle karşılaştırın.

Artık Google Chrome için kendi temanızın keyfini çıkarabilirsiniz, ancak her fıçı balda bildiğiniz bir kaşık dolusu bal vardır.

Tarayıcınızı her açtığınızda, sağ üst köşede, yüklü uzantılardan veya temalardan birinin resmi mağazadan indirilmediğini bildiren bir pencere görünecektir. Bunu önlemenin tek yolu var; temanızı resmi Chrome çevrimiçi mağazasına yüklemek ve oradan tarayıcıya yüklemek.

Chrome Mağazasına bir tema nasıl yüklenir

Zorlukla kazandığınız paranızdan ayrılmaya karar verirseniz, https://chrome.google.com/webstore/category/extensions adresindeki çevrimiçi mağazaya basit bir kayıt işlemi gerçekleştirin.

Güzel ve benzersiz bir tema oluşturduktan sonra kurulumu kullanıcılar için ücretli hale getirebilirsiniz - bu şekilde küçük bir pasif gelir elde edersiniz.

Bir geliştirici hesabına kaydolup ödeme yaptıktan sonra, küçük kısıtlamalarla kendi uzantılarınızı ve temalarınızı mağazaya yükleme olanağına sahip olacaksınız - hesap başına en fazla 20 uzantı, tema sayısı sınırsızdır.

Öncelikle tema dosyalarını paketleyin ve ekran görüntüsünde gösterildiği gibi Chrome Store'a yükleyin.

Herhangi bir hata oluşmazsa, geliştirici panelinin ana sayfasında, açıklamayı değiştirebileceğiniz, simge ekleyebileceğiniz ve temayı yayınlayabileceğiniz ayarlar sayfasına bir bağlantıyla birlikte temanızla ilgili bilgiler görünecektir.



Doldurulabilecek tüm alanları açıklamayacağım - bu nedenle iyi yorumlanmıştır - sorun yaşarsanız gönderinin altına bir yorum yazın, size yardımcı olmaya çalışacağım.

Çevrimiçi bir hizmeti kullanarak Chrome için tema oluşturma

Makalenin ilk bölümünde Google Chrome tarayıcısı için tema oluşturmanın "karmaşık" bir yöntemini anlattım, şimdi kodun derinliklerine inmeyi ve çok sayıda ek resim oluşturmayı gerektirmeyen daha basit bir yönteme geçelim. Tek ihtiyacınız olan, önceden hazırlanmış geniş bir arka plana sahip www.themebeta.com/chrome-theme-creator-online.html web sitesine gitmek.

Chromium tabanlı tarayıcılar animasyonlu temaları desteklemez ancak Opera destekler.

Bu arada, hiçbir şekilde resmi olarak Google şirketiyle ilgisi olmayan hizmete girdiğinizde, solda yorum içeren araçların (İngilizce) bulunduğu bir çalışma alanı, sağda ise görselleştirilmiş bir Chrome tarayıcı penceresi göreceksiniz. Yapılan tüm değişikliklerin görüntüleneceği ve Altta, resminizi tarayıcı penceresine göre konumlandırmak için düğmeler bulunur.

Bir tema adı girin ve bir arka plan resmi yükleyin. Hemen - konumlandırma ayarlarını yapın veya bunları varsayılan olarak bırakın.

“Renkler” sekmesinde tarayıcının farklı yerlerinde kullanılan yazı tiplerinin renklerini ayarlayabilirsiniz. İmlecinizi soldaki önerilen seçeneklerden herhangi birinin üzerine getirdiğinizde, değişikliğin konumu görselleştirilen pencerede kırmızı renkle vurgulanacaktır. İhtiyacınız olanı seçmek için tek yapmanız gereken renk paleti ile çalışmak.

Yukarıda tartışılan ekstra görüntülerin çoğunu indirmeden, tarayıcı pencereniz varsayılan Windows renk düzenini yansıtacaktır; Temanın tamamen "özelleştirilmesi" için, önerilen tüm görselleri makalenin ilk bölümünde belirtilen boyutlara göre "resimler" sekmesine yüklemeniz gerekir.

“Paketle” sekmesine gittiğinizde size aralarından seçim yapabileceğiniz üç işlem sunulacaktır:

  1. Ortaya çıkan temayı tarayıcıya yükleyin (tarayıcıyı açarken pencerenin dezavantajını unutmayın).
  2. Temayı dosya formatına paketleyin crx ve bilgisayarınıza indirin (bu dosya Chrome tarayıcısındaki tema ve uzantıların kurulum dosyasıdır).
  3. Temanın "kaynak kodunu" zip arşivine indirin (bitmiş temayı hemen çevrimiçi mağazaya yükleyebilirsiniz).

Bu hizmeti kullanırken temanızın dizine yerleştirileceğini ve diğer kullanıcılar tarafından indirilip kurulabileceğini unutmayın.

İlgileniyorsanız, sonraki yazılarda Opera tarayıcısı için animasyonlu temalar oluşturma sürecini anlatacağım.

Bunu yapmak için özel bir web teması oluşturucuya, biraz ilhama ve birkaç dakikalık boş zamana ihtiyacınız olacak. Mükemmeliyetçilikten muzdarip olsanız da birkaç saat geçirebilirsiniz. Seni uyarmıştık. :)

Yani web uygulamasını açın. Pencerenin sol tarafında tema oluşturmaya yönelik araçların bulunduğu sekmeleri, sağ tarafında ise önizleme alanını göreceksiniz.

Bu yapıcı, yarı otomatik modda temalar oluşturmanıza olanak tanır. Ancak sonucun zevkinize tamamen uyması için her şeyi manuel olarak da özelleştirebilirsiniz.

1. Kolay yol

Önemli olan şu: yapıcıya istediğiniz herhangi bir resmi yüklersiniz ve ThemeBeta bunu yeni temanın ana arka planı olarak kullanır ve tüm tasarım renklerini otomatik olarak buna göre ayarlar.

Kendi görselinizi eklemek için Temel sekmesinin altında Görsel Yükle'ye tıklayın ve bilgisayarınızda istediğiniz görseli seçin. Ardından düzenleyicinin tema renklerini özelleştirmesini sağlamak için Renk Oluştur'a tıklayın.

Sonuçtan memnunsanız Paketle ve Yükle'ye tıklayın ve indirmeyi ve ardından temayı Chrome'a ​​eklemeyi onaylayın. Tarayıcı yeni tasarımı hemen etkinleştirir.

Otomatik kurulumdan sonra renkleri değiştirmek veya farklı tema öğeleri için ayrı arka planlar eklemek istiyorsanız diğer sekmeler altındaki araçlara ihtiyacınız olacaktır. Onlar hakkında daha fazla ayrıntı makalenin bir sonraki paragrafında yer almaktadır.

2. Gelişmiş yöntem

Bu yöntem, yeni bir tema için arka planların ve metin renklerinin manuel olarak ayarlanmasını içerir.

Çeşitli tasarım öğelerinin arka planı olarak resim veya renkleri seçmek için Görseller sekmesinin altındaki araçları kullanın. İmlecinizi herhangi bir aracın üzerine getirdiğinizde sağdaki pencerede tasarımcı, temanın hangi bölümünün değiştiğini gösterecektir. Örneğin, ana arka planı yapılandırmak için NTP Arka Planı kullanılır. Ve Sekme Arka Planı site başlığının arka planını seçmenize olanak tanır.

Arka planları belirledikten sonra Renkler sekmesinde metin renklerini özelleştirebilirsiniz. Burada her şey aynı şekilde çalışıyor. Araçların bir listesi var, bunlardan herhangi birinin üzerine gelin - ve sağdaki pencerede bunun neyden sorumlu olduğunu göreceksiniz.

Arka planlar ve metin renkleriyle işiniz bittiğinde Paketle sekmesini açın ve seçtiğiniz temayı indirip uygulamak için Paketle ve Yükle'ye tıklayın.

Ayrıca ThemeBeta veritabanından veya resmi Google kataloğundan her zaman hazır temalardan birini seçip yükleyebilirsiniz. Gelecekte standart tasarıma dönmek isterseniz Chrome ayarlarına gidin ve “Temalar” öğesinin karşısındaki “Varsayılan ölçek”e tıklayın.

19nar

Bu talimatta size ne kadar hızlı ve kolay bir şekilde anlatacağım Google Chrome tarayıcısı için bir tema oluşturma. Bu en kolay yol, ancak her ihtimale karşı her şeyi ayrıntılı olarak yazacağım.

Neye ihtiyacınız olacak:
-Başvuru
-Chrome Temam
-Google'a kayıt

1.Önce Chrome'u açın ve uygulamalara gidin.

2.Şimdi Mağazaya gidin. (korkmayın, hiçbir şey satın almanıza gerek yok).

3. Aramada Chrome Temam'ı girin ve Enter'a basın.

4. My Chrome Theme uygulamasını bulun ve Ücretsiz butonuna tıklayın.

5. Bunun gibi bir pencere açılacaktır, ekle'ye tıklayın. Bu arada Ücretsiz butonuna tıkladıktan sonra Google'a giriş yapmanız gerekebilir.

6.Şimdi indirip kurmasını bekliyoruz.

7.Şimdi tekrar Uygulamalar'a gidin ve Chrome Temam'ı seçin.

8.Tema Oluşturmaya Başla'yı tıklayın

9.Burada artık bilgisayarınızdan veya web kamerasından resim yüklemeyi seçebilirsiniz. Benim durumumda bilgisayarımdan indiriyorum.

10.Bir resim veya fotoğraf seçin.

11.Şimdi resmin veya fotoğrafın konumunu düzenleyin ve 2. Adıma Devam Et'i tıklayın.

12.Burada fırçalara tıklayıp her element için ayrı ayrı renk seçiyoruz. Bundan sonra 3. Adıma Devam Et'i tıklayın.

13.Temanın adını yazın ve Temamı oluştur'a tıklayın!

15. İndirilenlerin bulunduğu alt kısımda yeni bir indirme görünecektir. Sonrakine tıkla.

16.Şimdi Ekle'ye tıklayın.

17.Ve biz hayranız. Doğru, benim durumumda fotoğraf uygun değil. İnternete uzun süredir aşina olanlar için bu talimat komik görünecek çünkü her şey çok ayrıntılı olarak anlatılıyor. Ancak bazı kişilerin interneti kullanma konusunda o kadar da uzman olmadıklarını ve ayrıntılı bir açıklamaya ihtiyaç duyduklarını unutmayalım.

İnternette çok zaman harcıyorsanız, tarayıcının görünümü, işlevselliğinden veya hızından daha az önemli değildir. Renklerin, simgelerin, kontrollerin ve arka plan görsellerinin en iyi şekilde seçildiği güzel, ergonomik bir arayüzle çalışmak çok daha rahat. Google Chrome tarayıcısı temaları yüklemeyi ve değiştirmeyi kolaylaştırır, ancak hiçbiri size uymuyorsa kolayca kendi temanızı oluşturabilirsiniz.


Bu notun yazılmasının nedeni, adlı tarayıcı ekibinin resmi bir uzantının yayınlanmasıydı. Onun yardımıyla, yalnızca üç basit adımda favori tarayıcınız için kendi benzersiz tasarımınızı oluşturabilirsiniz. Bu uzantıyı yükledikten sonra yüklü uygulamalar sekmesinde yeni bir simge belirir. Üzerine tıklamak Yeni Tema Sihirbazını başlatacaktır.


İlk aşamada bizden resim veya web kamerası görüntüsü şeklinde bir arka plan resmi yüklememiz istenecektir. Yüklenen arka plan önizleme penceresinde anında görülebilir ve konumu ve konumu ayarlanabilir. Dilediğiniz zaman butonuna tıklayarak yapılan değişiklikleri iptal edebilir veya bir sonraki adıma geçebilirsiniz. 2. Adıma Devam Edin.


Bir sonraki adımda tarayıcı penceresinin ana renklerini değiştirebiliriz. Fırça görselli butonlara tıkladığımızda yeni sekme, arka plan sekmesi ve pencere arka planı için otuz temel renkten birini seçmemiz istenecek.

Gördüğünüz gibi Google'ın tescilli bir uzantısını kullanarak kendi temanızı oluşturmak çok basittir.

Her zaman her şeyi kişiselleştirmeye, kendimize göre ayarlamaya, tercihlerimize ve zevklerimize göre yeniden yapmaya çalışıyoruz. Bilgisayar bu konuda bir istisna değildir. Sonuçta, ekran koruyucu için doğru seçilmiş bir görüntü veya sadece göze hoş gelen renkler, bilgisayar kullanma konforunu tamamen yeni bir seviyeye taşıyabilir.

Aramızdan kim Windows'un duvar kağıdını değiştirmedi? Günümüzde böyle bir insanla tanışmak nadirdir. Bazılarının kedileri var, bazılarının güzel bir genç hanımı var, bazıları ise soyutlamayı seviyor.

Benzer ekran koruyucuların Google Chrome tarayıcısına da yüklenebileceğini biliyor muydunuz? Ancak orada onlara tema denir.

Varsayılan beyaz tuvalden sıkıldıysanız nasıl yapabileceğinizi öğrenmek için okumaya devam edin Google Chrome'da tema tasarımını değiştirme.

Chrome'da temayı (açılış ekranı) değiştirme

Google Chrome'da temayı değiştirin aşağıdaki talimatları takip edebilirsiniz:

Bağlantıyı doğrudan da takip edebilirsiniz.

Bu bölümde her türden konunun yer aldığı devasa bir galeri göreceksiniz. Bazıları Google tasarımcıları tarafından, bazıları ise sanatçılar tarafından oluşturuldu. Hepsi ücretsizdir.

İstediğiniz konuyu bulduğunuzda farenizi konunun üzerine getirin ve açılır pencereyi tıklayın. "ücretsiz".

Google Chrome'un indirilmesi için diğer temalar

Bir başka tema kaynağı da üçüncü taraf tasarımcılardır. Anlaşıldığı üzere, bunlardan çok çok var. Çeşitlilikten bahsetmek yerine, kalite açısından çoğu zaman standart olanları önemli ölçüde aşarlar.

Google Chrome temalarını indirin:

İndirilen dosyaların CRX uzantısı vardır (bazen sıkıştırılabilirler). Bunları yüklemek için tema dosyalarını zipten çıkarmalı ve tarayıcı pencerenize sürüklemelisiniz.

Google Chrome için Tema (dış görünüm) oluşturucu

Yukarıdaki yöntemler sonuç vermezse, kullanmalısınız. konu oluşturucuChrome Temam aynı yerden indirilebilir "Online mağaza".

Doğrudan indirme bağlantısı.

Bu uygulamayı kullanmak çok basittir: Bir resim yüklersiniz, renk düzenini kişiselleştirirsiniz ve mevcut araçları kullanarak onu işlersiniz.