How To Design A Browser Theme For Google Chrome

crxthemelogo   How To Design A Browser Theme For Google ChromeWhen 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.

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

crx theme creator   How To Design A Browser Theme For Google Chrome

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

fireworks   How To Design A Browser 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.

imagereqs   How To Design A Browser 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.

themefolder   How To Design A Browser Theme For Google 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.

applyimages   How To Design A Browser Theme For Google 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.

viewtheme   How To Design A Browser Theme For Google 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 :

themecolors   How To Design A Browser Theme For Google Chrome

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.

packtheme   How To Design A Browser Theme For Google Chrome

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.

sharetheme   How To Design A Browser Theme For Google Chrome

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.

mytheme   How To Design A Browser Theme For Google Chrome

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.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

2 Comments -

0 votes

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?

0 votes

Ff

hjjf