Theme Making Masterpost

!!!!UPDATED 6/17/16!!!




Base Codes

Image Editors

Code Hosting Sites

Update Tabs

Aligning Your Layout

Cheat Sheet

Infinite Scrolling


How to Add Favicons

Compress Your Theme Code (helps prevent tampering and stealing)

Make Your Theme Accessible To Disabled People

How To Make Your Sidebar Image Change On Refresh

Pixel Text Bubble Maker + More

Add Falling Snowflakes (to view the demo change “.org” to “”)

Custom Scrollbar

How To Use Image Mapping and an Image Mapping Website

Multi-Column Theme Tutorials (Masonry,Wookmark,Isotope,& Freetile)

Icon Generator

HTML Color Picker

A Ton of Free HTML Effects (more here)

Text to ASCII Art Generator

Let me know if any of the links are broken or missing! Feel free to add on if you find anything that you think should be on here

“Play it again Epsilon.

You sure? I’m not sure how healthy this is, Sis.

…Just play it again.”


Analyzing 50k fonts using deep neural networks

Coding experiment by Erik Bernhardsson uses neural networks to see if it is possible to generate new fonts based on a dataset of existing ones:

For some reason I decided one night I wanted to get a bunch of fonts. A lot of them. An hour later I had a bunch of scrapy scripts pulling down fonts and a few days later I had more than 50k fonts on my computer.

I then decided to convert it to bitmaps. It turns out this is a bit trickier than it might seem like. You need to crop in such a way that each character of a font is vertically aligned, and scale everything to fit the bitmap. I started with 512 * 512 bitmaps of all character. For every font you find the max y and min y of the bounding box, and the same thing for each individual letter. After some more number juggling I was able to scale all characters down to 64 * 64.

If you take the average of all fonts, here’s what you get:

More Here

Hoefler & Co. has released Operator, their first take on a monospace font, and it looks fantastic. It’s full of character, especially with its playful, but still readable, set of italics. I’ll probably set this up over the weekend in Terminal and Sublime Text.

In this quick tutorial, I’ll be showing you how to use fonts in your theme that you have the files for but that aren’t hosted on a web-friendly font site like Google Fonts or aren’t one of the built-in fonts

Okay, so the first thing you need to do is upload the font file either to tumblr, itself, or to a file hosting site like dropbox. I’ve only ever done it with tumblr, but the tumblr site is super temperamental and the file’s don’t always upload. You might have to try the file twice before the site grabs it.

Go to the static file uploader, and choose your file. Upload it, and if it works a little box should show up displaying the url of your new file. You can’t get back to this url after you refresh the page or something, so be sure to save it somewhere!

Now go into your theme’s HTML editor and under the <style type="text/css"> tag type in the @font-face CSS code:

@font-face {
    font-family: 'font name';
    src: url('static file url');

You’re going to have to fill in the details, though. Continuing with my example from above, your code should look something like this:

You don’t necessarily have to use the file name for the font-family name, but for this font they’re the same. 

Next, scroll down to the CSS for whatever you want to use the font for. If you want to change all the font on your theme (for anything that isn’t specified elsewhere), look for the body{} tag. For the font-family attribute, add in the name of your new font.

You’ll probably want to change the font-size, too. (Most pixel fonts look best at 8px on web browsers, and that’s what I’m using here in this example). 

And there you go! Update your preview, and you should have your new font displayed nicely on your theme. 


Hacker is a rounded display font. The font may remind you of 1980’s, when the computer revolution opened up a new frontier. Hacker is very inviting, yet has a distinctive boldness to it making it very appealing. It can be used for anything related to cyber, security, internet, technology, communication, coding, data, electronics, mathematics, networking, commerce, communication, and much more.

Files included:

  • TTF

Download here:

zoeyrph Character PSD #027: Crystal Clear

It’s minniewrites birthday today (go wish her a happy birthday!) and this is just a little thing I made for her.

As I do with all my PSD’s, all customizable layers have been highlighted in red. To use this PSD, all you’ll need is an image of your chosen faceclaim. Simply clipping mask it to the layer provided and you’re good to go! The fonts used are Times, Code Bold, and Code Light.

Remember to like or reblog if you download. If you need help customizing, contact me here.

Jabberjais requested I made a tutorial on this post, and although my post was inspired by this and this post I will certainty do my best.

First make your background to #f6f6f6 (or something similar) then write whatever text fits your fancy. I used the font Code Bold for the big letters and Code Light for the smaller ones. Then we move on to the fun part…

Find a texture or picture you want to use, take the layer over your text, right click the layer and choose “Create Clipping Mask”. That will leave you with something like this:
Then I went on to making a new layer, again choosing create clipping mask, and picked a large brush (0% hardness) and colored random parts of the text:

Put this layer to “Soft Light” and change the opacity if you want to. I finished off with applying this texture by psytrances and setting it to “Soft Light”.

To get the effect that one side is a little darker than the other, add a black gradient something like this:

Then take the opacity down to around 10%. If you want the test in black and white apply a black and white gradient map.
Please like or reblog if this helped you, and if you have any questions leave them in my askbox <3

~ okdonghyuk’s 600 follower special ~

yes!!! everyone, the time has come for my special!!!
if you’ve been paying attention to my blog recently, you will know that i have been working on this for about 3 weeks, i almost got carpel tunnel like 4 times, i swear!! 

so this post will just be explaining what is actually in the pack and how to get it!! more details below!! 

Keep reading