Tutorial – How to make a Chrome theme easy!


So You want to make a Chrome/Chromium theme? But how to do so? Do i need specific software? An IDE? Java? Do I even need Chrome to do this?

Well, This is a Tutorial on how to Easily enough make Chrome Themes. It may take as long as 10 minutes to make a Theme, however, remember, What You Put In To It Is What You Get Out Of it. (AKA, Good work shows itself off)

 

Requirements? Well, two things.

  1.  Google Chrome / Chromium
  2.  A Cool Wallpaper (Not Copyrighted, plz!)

So, start up Chrome and go here…
https://chrome.google.com/webstore/search/chrome%20theme?hl=en-US

The top two results should be (Should!)

  • My Chrome Theme
  • Theme Creator

Install Both, because we will be using both.

Once both are installed, New Tab > My Chrome Theme.
Click “Start Making Theme” (By the way, this is where themes that you have made will show up at after you make at least one theme)

Your going to want to start off with a wallpaper, you can either drag and drop it from whatever file manager Or you can click the giant “Upload Image”.
After the upload is done, you can Adjust the Position, Because your using a Wallpaper, I suggest “Fill screen” with your choice of Top, Center, or Bottom.
Once that is done, Proceed to Step 2.

Now for the colors! You can either manually choose the colors by the blue arrow pinpoints, (it only has a list of common colors, sadly) OR you can click “I’m feeling Lucky”. I generally do this last option because it gets the colors right about 80% of the time. If you do “lucky” option, it will proceed to Step #3, Name, Description and Save. If your

Doing colors the picker way, when your done, click “Continue to Step 3” to finish up.

Ok! Name your theme! after that you can click the “description” Plus to dive an optional description, however! only 120 chars allowed…

Click “Make my Theme and it will generate the theme and you get a “Install my Theme” button, and it will give you a preview page with a re-direct URL for linking the download! (Open the Theme redirect / DL url in a new tab if you want to do some Advanced editing!)

NOTE: If your posting to dA I suggest right-clicking > save the preview picture.. People on dA like preview pictures 😀

IF your happy with what you have right now, you can stop. The other “Theme Creator” is for Advanced Editing, and if your happy with what you have, then you don’t need to go any further! You can stop!

NOW!!!!! Say you need to do some advanced Theme editing…

This is where “Theme Creator” comes in at. It has a lot of options, launch it if you need to tweak something, and look at the bottom, and choose “Old Version” on the bottom Right hand side.

OK, remember that Redirect Page that we opened! go to it. To get the actual .crx theme file, we will need to do some web-tech stuff…

Put the mouse over the blue button on the page that installs the theme, and right-click > Inspect element. Now, at the bottom of the code-view, go up 1 backs indention arrow, look for the element name that says “data”. Right-click the word “data” > Edit Attribute > and it will highlight the full URL for downloading the CRX theme file!

Now because Chrome will try to auto-install this if you download it, use another web browser (Firefox, Opera, heck, even IE will work for this) Or use wget if your on Linux (I suggest this…) and paste the DL URL of the .crx file and have it download it.

At this point, open the folder that the file is at, and i suggest re-naming the .crx file. Optionally, if you saved the preview pic from the previous step, copy/move it to the same folder and re-name it to the same name.

Ok, so you have the .crx file, now, go back to Chrome, go to the “Theme Creator” app that we have running, left hand side > Upload a theme for editing, zip or crx. Yup, this is the Advanced Editing. Thing is, so many options for this one app, well, I am leaving you to play with it and figure it out.

Theme Creator (old version) will seem intimidating at first, but don’t worry! After using it a few times, you discover that it has more awesome options that the other app does not have, plus, you can download and save your now-modified .crx theme file now!

I was doing a theme file as I was writing this Tut, so here is my simple Captain America theme if you want to see it…
https://www.mychrometheme.com/t/cgpl8jef9z9kpcgt7kgju6544

Have fun!

(oh yeah, these two apps are good, but really, best way to make a thee is with a text editor and gimp/pain/photoshop/mac paint? No editor will ever beat a hand-crafted theme…)

 

, , , , , , , , , , , , , ,

  1. No comments yet.

You must be logged in to post a comment.

  1. No trackbacks yet.
%d bloggers like this: