How To Design A Browser Theme For Google Chrome

Ads by Google

When it comes to the web browser, one of the important aspects of it is whether or not it is customizable. We all like our own user experience on our own computers, right?  Well, as I wrote in an earlier article, 2 New Reasons Google Chrome May Pull Ahead Of Mozilla Firefox, the way Chrome handles themes is top notch.

We saw how easy it was to find and change browser themes for Chrome without even restarting the browser. This article will show you how easy is to design a custom theme for Google Chrome.

There are several ways to change your browser theme for Chrome, a few of which involve downloading and using editors to make it easier.¬†First, you can make and modify a *.json file using a test editor by following the instructions here –¬†Theme Creation Guide.¬†Doing so may require some previous experience with the *.json file.¬† Secondly there is a theme editor called “Chromium Theme Creator” which I believe makes edits to the default dll file (short instructions here).

Since Google has come up with the newer way of implementing themes via the extensions system, making handling them easier, I will be going over the third way of designing a Chrome theme via another program called “Chrome CRX Theme Creator.”¬† You see, themes (or skins) can now be contained and distributed within files with the extension “CRX” and this program makes it possible to easily design the theme and distribute it.

Ads by Google

You will need to download and run the Chrome CRX Theme Creator program from this link.

how to design a theme for google chrome

and some sort of image editor such as Photoshop, GIMP or Fireworks.

how to design a theme for google chrome

You see, the CRX program will allow you to assign colors where applicable and to assign images to different areas of the theme.  An image editor will allow you to create those images.  You will also need to keep the previously mentioned link to the Theme Creation Guide open for referencing because it explains what each of the color assignments and the image assignments are and how they will appear.

My advice?  Keep this page open in a different browser, such as Firefox, because you will be restarting Chrome numerous times throughout the design process.

Begin by looking at the theme creation guide in order to see which graphics you’ll have to create and the size requirements.

how to design a theme for google chrome

Look for the heading “Image Elements” and you’ll notice the column containing the recommended size requirements.¬† Once you see where each image will show when the browser theme is applied to Chrome, go ahead and put your creative juices into action in your chosen image design program (ie. Photoshop).¬† Make a folder located someplace you will find it later and save all of the images in the one folder.

create theme for chrome

Once you have the images created the way you want them, go ahead and open the CRX creator.  This is where you will apply the images to the theme.

create theme for chrome

In my case, once I began applying the images and testing the theme in the browser, I ended up making many changes to the original images I created to get the look I wanted.¬† To me, that’s OK because it’s all part of the creative process.

Once you apply the images where you want them, notice the “View Theme” button at the bottom of the window.

create theme for chrome

Make sure Google Chrome is closed and hit that button to get an idea of what the theme will look like.  If Chrome is not closed before hitting the button, the theme you want to test will probably not be applied to the window that will open.

That’s basically the design process for designing a Google Chrome theme.¬† When you go to change the colors (text, links, etc.) from the left column of the editor :

create chrome theme

Apply the same principles, checking things out via the “View Theme” button as you go.¬† Also notice the “Tint” column off to the right.¬†This applies different tints to different areas of the browser theme.

Instead of having a full understanding of what everything did, I tended to try stuff out and see what happens until I found the theme looking the way I wanted.¬†Once you have everything where you want it, you’re ready to pack the theme into a CRX file.¬† This is where you hit the “Pack Theme” button.

create chrome theme

Fairly self-explanatory, I know.  This will pack the images and color assignments into one file for easy application and distribution of the theme.

As far as distributing your newly created theme goes, you have several options.¬† There is a handy “Share Theme” button within the CRX creator program.

This will bring you to a page on the chrometheme.chromepub.com site with a form you fill out and it allows you to upload your theme to share there.  Another option you have is sharing it yourself.  I linked to it on my own site.

create chrome theme

It is easy for anyone to use your theme on their Chrome browser. All they have to do is click a link and apply the changes.

Tell me, what do you think of the process? Also, have you created a theme for Google Chrome yet?   If so, please share in the comments.

Ads by Google

2 Comments - Write a Comment

Reply

Tinnitus Miracle

When it comes to the web browser, one of the important aspects of it is whether or not it is customizable. We all like our own user experience on our own computers, right?

Reply

Ff

hjjf

Your comment