Introduction: Making a Mario Brothers Custom Google Chrome Theme

Picture of Making a Mario Brothers Custom Google Chrome Theme

I have been trying to post a new instructable, but due to lack of time.

Anyway few days ago prashjini commented on a very old instructable of mine https://www.instructables.com/id/Making-a-Google-Ch... so I decided to take some time and make another instructable.

This time I'll show you how to make a custom Chrome Theme.

Step 1: Making Image Files

Picture of Making Image Files

For this start up your image editor, I used Photoshop you can use gimp, mspaint, whatever.

First image that we need is the background image, the dimensions depend on your screen resolution and size.
My resolution is 1024x786 so my background image size is 1024x653px.
Your image can be larger, but some parts might be cut off.

Second image is the frame, you know the blue bar on the top with the _ [] X buttons.
If you are using a single image then the width should be equal to that of background image and the height should be 30px.
If you are using a sold color like me, you can make the width less as the images repeats itself.

The next image is tab size should be 66x65px.

The toolbar image is size should be 120x120px. I used a pattern for this.

If you want to add your logo in the credits you can do that. The height should be 65px.
I'm not placing any logo, I've added it in my background image.

*NOTE - The credit is right oriented meaning if you want to place your logo on the left side you have to make the width equal to the size of background image and place the logo near the left side.

Lastly the icon image, you don't need to put it, but I prefer to make it. Size should be 120x120px.

*NOTE - All the images should be .png, you can make the background transparent, if you want to.

Step 2: Making the MANIFEST JSON File

This is the important and easy step.

Copy and paste this code in Notepad
{
"name": "Mario Brothers Chrome Theme",
"version": "1.0",
"manifest_version": 2,
"description": "Mario Brothers v1.0 Google Chrome Theme designed by Tanmay Das. ©Copyright, Tanmay Das. Visit at www.rexdzines.com", "icons": { "128": "images/128.png"},
"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": [0, 0, 0],
"ntp_section_link": [255, 255, 255],
"ntp_section_text": [255 , 255 , 255],
"ntp_background": [10 , 17 , 27],
"frame": [10 , 17 , 27],
"toolbar": [255 , 255 , 255],
"tab_text": [255, 255, 255, // changes the color of the selected tab heading to white
"tab_background_text": [0 , 0 , 0], // changes the color of the text on the not selected tab to black
"bookmark_text": [255, 255, 255] }, // changes the color of the bookmark text to white
"tints" : { "buttons" : [0.33, 0.5, 0.47] },
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat" } } }

Name the file manifest.json, also remove all the // comments before saving the file.

Step 3: Testing the Theme

Picture of Testing the Theme

Place the images in a folder call it "images" and then place the images folder in a folder and name it to match your theme.

To test it go to Tools > Extensions

Click on Developer Tools > Load Unpacked Extension

Select the folder in which you have all the files > OK and done

Step 4: Packing the Theme

Picture of Packing the Theme

Go to Extension > Click on Pack Extension

Click on the top Browse button > Select the folder with the files > Pack Extension

Two files foldername.crx and foldername.pem would be created.

.pem file is useful for making an update, but for now we are interested in the .crx file.

To install the theme just drag and drop the .crx file in your browser and done.

Comments

OlegS8 (author)2015-11-14

Or much more easier with http://chromizer.com/ - just few clicks.

chenjian (author)2014-09-13

wow.cool.

Tanmay Das (author)2014-09-10

Can't believe my instructable was featured it's awesome

Tater Zoid (author)2014-09-10

This is pretty cool.

Tanmay Das (author)Tater Zoid2014-09-10

Thanks

About This Instructable

7,266views

109favorites

License:

Bio: Full time Technical Support Associate. Part time Web-Designer & Developer. What's left I spend trying to make stuff.
More by Tanmay Das:Making a Mario Brothers Custom Google Chrome ThemeLOKEY v1.0 (portable version)Knock, knock, Neo.
Add instructable to: