The Story behind the day Google Failed Me - Designing Chrome Themes

As a Harry Potter fan, who eats off a Harry Potter plate, keeps books in a Harry Potter cupboard and has a Harry Potter wallpaper for her desktop, I ventured into finding the Harry Potter themed Chrome browser.

For the first time in living memory, Google had failed me.

The Chrome Store had nothing to offer for regular members of the witchcraft community like me. I saw two themes, and disliked both of them.

So, as I had an amazing amount of time to kill, I decided once and for all, that I will have a Chrome browser theme for Harry Potter.

Finally,  after relentless Googling, I ended up with making my first customised theme.

The Story behind this result goes like this. A guide by a most relentless person on how to design a Google Chrome theme.

First I accessed the online chrome theme creator by googling it (you could also download it from the chrome webstore).

The first tab was pretty simple for me as it just asks you to give the theme name and description.

Now the images tab was also very explicit. As you mouse-over every option, the indicated portion is displayed in red. I have to upload an image for every section. For some strange reason, even if I simply wanted just a solid colour, (for example black for the highlighted theme_toolbar option), I couldn't specify it in the Colors tab and had to upload an image for every portion.

Thus, for the theme_ntp_background, I uploaded the Harry Potter wallpaper.

Then, for each colour, I had a square tile 120x120. The minimum height is 119 pixels. (Learnt that after many disastrous results!). I found that a nice way of choosing colours is to use them from the picture using the dropper tool. 

Thus, I used this picture for the theme_toolbar.

Continuing in a similar vein, I ended up with this layout.

Now I realised that I can't make out the text at all. Later I found that the next tab, Colors, takes care of that. 

Unfortunately, all the colours are specified in hex codes.

To know the hex codes of the colour I used the Dropper tool in GimpShop. Then, I filled the frame option with the exact code corresponding to the image I have uploaded.

So, the hex code is 001B22. I set this for the frame portion. Now the Colors tab is not very clear about the respective placeholder of each option. The frame refers to the place behind the tabs which has already been given an image. Frame inactive is the same region but when the window is inactive. I later learnt can give the colour you want straightaway or give the same colour as the fame active and tint it light or dark using the Tints tab. The same applies for the tabs in incognito mode. Now the toolbar option is a little tricky.

The toolbar option affects the arrows, the status bar at the bottom, and the background of the bookmark panel. Also, I had to choose a dark colour to complement the grey in the status bar. I still haven't figured out how to change that font colour. However, the code is open source and the more HTML zealots can try it out. And the arrows' colour  jar at the moment but I found that they could be easily tinted in the next tab.

In the above screenshot, I have changed all the required font colours. Now, the ntp_header option refers to the background colour of the border in the most visited section. It is not visible in the preview. I've taken a screenshot from the final result for the idea.

The next three options refer to ntp_section. That is the region that is highlighted when you mouse_over the apps.

So then, I chose the appropriate colours for the background, text and link. Sometimes, the changes of text are not reflected in the preview but they are faithfully reproduced finally. The last two options refers to the control buttons (minimize, restore and close).

Next, we come to the tints tab. Here, I just chose the colours that I would like to tint (or add onto) the ones I had already chosen in the previous Colors tab. Sometimes, when I did not want a tint, I chose the exact same colour as before. Also, as I wanted the buttons to be grey, I tinted them so. 

And finally, in the last tab Pack and I chose to apply the theme. But later I learnt it is wise to regularly download zip file and then upload it for changes. Otherwise, I had to start from scratch even if I just wanted to change one parameter.

And I am just enjoying my new creation. 

P.S. I can't wait for the release of the last Harry Potter film!

And, I think my tenses went awry because I have edited this post near twenty times juggling between past and present.