Make Chrome browser themes from your favorite wallpapers
Ever since Chrome’s theme gallery was launched, we’ve come across a steady flow of awesome themes. Themes spanning across various genres like nature, automotive or of any other category make your web browser a bit more pepped up. But think for a while if you want to create your own? Relax, it's very easy and simpler than you might assume. Given below are certain methods, whether it is an online service, software download or going down to the last detail and creating your own custom Google Chrome browser theme.
1. Creating Chrome theme online:
To make chrome themes in a minute from the favorite wallpapers Oleg Samusenko has created a very simple tool. The theme will make change only to the new tab page wallpaper, and not to the colors of your tab, menu etc. You can visit Google Chromizer to create it online.
How it works?
The below video guides you with every step required to create your own theme from favorite wallpaper. Please watch this video and create your own theme. Enjoy!
2. Creating Chrome theme from your favorite wallpapers using Software utility
You may also refer to “CRX Theme creator” software, to create a Chrome theme from your favorite wallpaper. It’s available for downloading, please click on the provided link and download it to solve the purpose.
Below are the steps that will guide you how to make create it
As “CRX Theme creator” is a portable program, just download and double click to launch it.
Then create PNG format images that should be used in your custom theme. You can use any image editing program like Photoshop, GIMP or more.
Select color or PNG image for different parts of the Chrome theme in the theme creator program window.
Then click “View Theme” button to preview your Chrome theme. Make sure you close all Google Chrome windows before clicking to preview theme.
Finalize the theme by clicking “Pack Theme” button. A file with theme.crx name will be created.
3. Guidelines and steps for creating Chrome theme from your favorite wallpapers the hardcore way
A Chrome theme is nothing but an add-on that does not contain any source code or scripts. A Google Theme basically consists of two parts:
1. Images used by the theme
2. A single manifest.json file which contains parameters for the theme.
These two parts are packages into a single file with the CRX file extension. (A .crx files is a compressed container file format, much like a CABinet or ZIP file, used by Google Chrome).
You will require several software tools to create your own Google Chrome theme:
• A basic idea about how your theme should look like and suitable wallpaper you wish to use for your theme.
• An image editor. There are plenty software tools available for you to use, both free or commercial, such as Microsoft Paint, Adobe Photoshop, Corel Photopaint or any other.
• A text editor. Notepad in Windows will do, but there are many editors available on the internet, so pick your favorite.
Once you have all this, just follow the steps below to create your own Google Chrome theme.
Step 1: Create a directory with the name of the theme
The first thing you will do, is to create a new directory for your theme and name it after your theme. Let’s say "my_new_theme". Inside this folder create another one, named "images," which will contain all images used by your new theme.
Step 2: Create the images for your theme
To create a Google Chrome theme you will need four basic image elements, or five, if you want to add your own personal logo to the theme, but that's optional. All images used in Google Chrome themes have to be in PNG file format. If you have your pictures in another file format, you must first convert them to PNG with any software or online converting tools available. We will describe each image element below along with its proper requirements.
Theme Frame (frame.png)
This image is used for the frame of your new Google Chrome theme and as the background image of the "Close," "Minimize" and "Maximize" buttons. If you don't want to use this image, then your created Chrome theme will act as the default Chrome theme and display the native OS title bar. The theme frame images need a minimum height of 30px and there is no limitation on its width. The theme frame is usually created with the darkest colors.
Theme Toolbar (toolbar.png)
This theme element is displayed as the background of the "Forward," "Back" and "Refresh" button and also as the extensions toolbar. It represents both the current tab and the toolbar. The theme toolbar images needs a minimum height of 120px with no limitation on its width.
Theme Tab Background (tab.png)
This image element is used for inactive tabs if more tabs are opened at the same time. It has a minimum height requirement of 65px and no limitations on its width.
New Tab Page Background (background.png)
This image element is the main image that is displayed a new tab is opened. The recommended minimum image size is 800x600, but for best look, use wallpapers matching the screen resolution of the display the theme will be used on. This image should use the lightest colors for best visual presentation.
Theme Attribution (theme_ntp_attribution.png)
This is the creator logo; it is shown at the bottom right corner of the Google Chrome theme and this element is purely optional.
Once you have all the image elements prepared, just paste them in the "images" directory you created in step 1. So if everything goes smoothly, the folder should contain 4-5 images.
Step 3: Create the manifest file
Every Google Chrome add-on, installable web application or theme has its own "manifest.json" file. This file provides the browser with information about the theme. It contains code for 4 different things: name, images, colors, tints and properties. An example of the code in manifest.json file is shown below. Just open a new file in Notepad, copy paste the code and save with the name manifest. After that, just rename the file extension from TXT to JSON.
{
"version": "1.0",
"name": "my_new_theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.png",
"theme_ntp_attribution" : "images/theme_ntp_attribution.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [10 , 17 , 27],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [10 , 17 , 27],
"tab_text": [255,255,255],
"tab_background_text": [10 , 17 , 27],
"bookmark_text": [255,255,255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47],
"frame_inactive": [0.50, 0.50, 0.50],
"frame_incognito_inactive": [0.50, 0.50, 0.50]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}
Now that you have created your own manifest.json file, let’s take a look on what each of the sections means and does and what you can edit.
Name
That's the name of your new Google Chrome theme. The name in the manifest,json file should correspond to the name of your theme written in Step 1.
Images
Images from Step 2 of our guide are defined in this section of the manifest.json file. If you want to change the file name or folder of your images, you have to make a corresponding change in the manifest.json file.
Colors
Each element in these sections defines the colors used in the theme. There are just few things to remember about colors:
1. The download toolbar button text color is the same as the bookmark text's color.
2. The status bar background color is the same as the toolbar color you choose.
3. The status bar text color is the same as the tab text color you choose.
Tints
The tint element specifies the color tint for all icons inside all the buttons in the toolbar (forward, back, refresh, etc.). Each tint has a floating value from 0 to 1 or -1. The -1 value means no changes will be made to the color of that element. The tints values are arranged as [Hue, Saturation, Luminance] and you can use values like for example 0.256, 0.2, -0.4 to define the color. You can adjust the values to make the buttons blend it or stand out.
Properties
The properties sections in the manifest.json file is used to define the settings for the main background image. The background image can be aligned either to top, bottom or the center of the browser and you can choose to either repeat it along the x or the y axis, or not at all.
Step 4: Packaging and previewing your theme
• Now you have your images ready in the "my_new_theme/images" directory and and a manifest.json file in the "my_new_theme" directory.
• To test your new theme, open your Google Chrome internet browser and type "chrome://extensions" in the address bar and hit the enter key.
• Once you are inside, click on the "+" next to the "Developer model" link on the right side. You should now see a couple of options appear on the page. Click on the "Load unpacked extension" and browse through your computer to your "my_new_theme" directory. Select it and press OK. If a proper manifest.json file is present in that folder, Chrome will load your new theme. Now check your browser to see if everything is all right
• You can repeat this process until you tweak your own Google Theme to its perfection. Once you are satisfied with your custom Google Chrome Theme, just press the "Pack extension" button and Chrome will create a the theme and save it in the "my_new_theme" directory with a CRX file extension. A file with PEM file extension will also be created, which is a private key for your Google theme that will allow you to update this extension in the future, if you upload your theme to the Chrome Extensions Gallery.
• If everything goes fine, Google Chrome will tell you that the .crx and .pem files have been created and it will also display the location of these new files. After you have created couple of Google Chrome themes, you will see that it’s really not that hard.
Reference Link: http://www.file-extensions.org/article/how-to-create-custom-chrome-theme
