|
Follow these steps to create your own theme
Requirements:
*Text Editor
*Image Editor (Adobe Photoshop or Paint)
*Google Chrome developer account if you want to upload it to Google Chrome
Step 1: Creating the folders
In a chrome theme folder (a regular folder), there should be a text file named (manifest.json) and a subfolder named images.
Step 2: Make your Theme
#1.Frame: 1920px by 30px; name the file (frame.png) and place in the image folder
#2.Toolbar: 1920px by 120px; name the file (toolbar.png) and place in the image folder
#3.Tab: 1920px by 80px; name the file (tab.png) and place in the image folder.
#4. Background: size varies on computer and image resolution: Test anything from 800px by 600px to 1920px by 1080px. Name the file (mytheme.png) place in the image folder
#5. Logo: 150px by 30px; name the file (logo.png) and place in the image folder
#2.Toolbar: 1920px by 120px; name the file (toolbar.png) and place in the image folder
#3.Tab: 1920px by 80px; name the file (tab.png) and place in the image folder.
#4. Background: size varies on computer and image resolution: Test anything from 800px by 600px to 1920px by 1080px. Name the file (mytheme.png) place in the image folder
#5. Logo: 150px by 30px; name the file (logo.png) and place in the image folder
Step 3: Manifest.json text file code
Copy the .json code below in to the manifest.json text file. Make sure the names on the corresponding lines are the same as the names of the png files. Also, you can further customize the image, text colors, and button colors. However, your theme will not upload if there is any mistakes. Go to This site to test if your code is correct.
{
"description": "Description of theme",
"version": "1.0", "manifest_version": 2,
"name": "Name of your theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/mytheme.png",
"theme_tab_background" : "images/tab.png"
"theme_ntp_attribution" : "images/logo.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [100 , 100 , 100],
"ntp_background": [0 , 0 , 0],
"frame": [255 , 255 , 255],
"toolbar": [255 , 255 , 225],
"tab_text": [100,100,100],
"tab_background_text": [100 , 100 , 100],
"bookmark_text": [100,100,100]
},
"tints" : {
"buttons" : [0.99, 0.99, 0.99],
"frame_inactive": [0.99, 0.99, 0.99],
"frame_incognito_inactive": [0.99, 0.99, 0.99]
},
"properties" : {
"ntp_background_alignment" : "center",
"ntp_background_repeat": "no-repeat",
"ntp_logo_alternate" : 1
}
}
}
"description": "Description of theme",
"version": "1.0", "manifest_version": 2,
"name": "Name of your theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/mytheme.png",
"theme_tab_background" : "images/tab.png"
"theme_ntp_attribution" : "images/logo.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [100 , 100 , 100],
"ntp_background": [0 , 0 , 0],
"frame": [255 , 255 , 255],
"toolbar": [255 , 255 , 225],
"tab_text": [100,100,100],
"tab_background_text": [100 , 100 , 100],
"bookmark_text": [100,100,100]
},
"tints" : {
"buttons" : [0.99, 0.99, 0.99],
"frame_inactive": [0.99, 0.99, 0.99],
"frame_incognito_inactive": [0.99, 0.99, 0.99]
},
"properties" : {
"ntp_background_alignment" : "center",
"ntp_background_repeat": "no-repeat",
"ntp_logo_alternate" : 1
}
}
}
Extra Help:
Colors:
"ntp_background": color of the area where the image does not cover
"tab_text": text color of the current tab
"tab_background_text": text color of the unused tabs
"bookmark_text": color of the text in the bookmark bar
Tints:
Properties
"ntp_background_alignment": ("center", "top", "bottom", "right", "right top", "right bottom", "left", "left top", "left bottom")
Colors:
- The color is in RGB format (Red, Green, Blue) use this site for help.
"ntp_background": color of the area where the image does not cover
"tab_text": text color of the current tab
"tab_background_text": text color of the unused tabs
"bookmark_text": color of the text in the bookmark bar
Tints:
- The value of the tints are floating values that range from 0 - 1 or -1. If you use -1 then there will be no color change.
- The color values are arranged as (Hue, Saturation, Luminance). You can choose to make the buttons stand out or blend in.
Properties
"ntp_background_alignment": ("center", "top", "bottom", "right", "right top", "right bottom", "left", "left top", "left bottom")
- If the image is bigger than the screen size the part of the image that will show will depend on the alignment choice.
- If the image is smaller than the screen size than the position on the browser of image will depend on the alignment choice.
- You can choose to either to repeat the image or not to repeat the image.
- You can choose between the two google chrome logos.
Step 4: Test your Theme
Go to extensions within your chrome browser and turn on developer mode. Upload an unpacked extension and choose your folder.
|