to the
7th district
lastest release
[PAGE #5] about page: gold
Welcome to the 7th district!
A place where you'll find tumblr themes and resources.
● Themes are optimized for Chrome
● Codes are updated often
● Screen resolution 1366 x 768
SEP 25, 2014 Hiatus message UPDATED**
JUL 07, 2014 Theme #12 code is updated
JUN 27, 2014 About Page #5: Gold LP
APR 25, 2014 New Resource page
APR 21, 2014 Theme #17 Say Hello LP
APR 17, 2014 Askbox reopened!!
MAR 22, 2014 FAQ Page updated


Pattern Set #06

To download: right click on a pattern, then Save Image As.


4 squares hover updates tab (#13) by iamthemelocked / thewomvn

STATIC / LIFE PREVIEW if the gif isn´t enough :)
  • the codes : 1 | 2 3
  1. paste code number 1 in the meta section of your theme (right at the top where you can see for example: <meta name=”color:Background” content=”#ffffff”/>). This is so that you can change the colours of the boxes without going into the code.
  2. paste code number 2 right above {CustomCSS}</style></head><body>
  3. paste code number 3 right under {CustomCSS}</style></head><body>



  • The original version has 4 squares / lines with text boxes that appear upon hovering
  • it contains a picture in the middle, size: 70px x 70px
  • All the colours are customizable without having to go into the code, just do it in your tumblr customizing menu
  • For inserting the text you need to go into the code though, just like with every other updates tab
  • You have the option of turning it off in your customizing menu if you don´t want to use it anymore, you don´t have to delete it from the code
  • Check my other updates tabs for reference, on all those posts there are explanations for most questions.
  • If you don´t find the answer to your question there, check the tutorials on my theme blog.
  • If you still have questions, request a tutorial here.

You want to have a colour spectrum to choose from?

Check this link.

You want to add colorful headers?

The tutorial is here.

You want to add a music player?

Find the detailed tutorial here.

You want to have a clock in your updates tab?

Check out this link.


This updates tab is mine and mine alone.(thewomvn/iamthemelocked)

I spent a lot of time making it so I would really appreciate it if you:

1. left the credit where it belongs

2. directed others who ask for a tutorial for this updates tab to this post

3. didn´t claim it as your own, no matter how many changes you have done

4. didn´t steal the code or redistribute this updates tab in any way.

I will find out and I can assure you, it´ll not be pleasant for you.

I am always there for your questions, so check on my HTML and Themes blog if you want to know something or just ask your question there and I will make a tutorial for you.



I was going through my pictures earlier today when I realized I have a lot of backgrounds, so I decided to make a masterpost!! 

(None of these pictures are mine and I take no credit for them, these are just some I have collected)

I put them into categories to make it easier for you:

I’ll be adding to these pages as I find more~

I worked hard on this so it’d help a lot if you liked/reblogged this post :)

Hope it helps!


Updates Tab #2

Ok so I made these because I think most of the updates tabs are like “hover me and I will expand” so I decided to make one that you can click on it and magically a box appears lol okay I need friends.

The preview, codes and how to use are here.

Please READ EVERYTHING BEFORE YOU ASK! I beg you sweetie. If you have problems installing please let me know! <3333



✄ BLUE: live / static | PINK: live / static | VIEW CODE ✄

  • 57 colour options
  • 8 custom links
  • 1 column only
  • 400px posts / 500px posts
  • show captions option
  • monochrome posts option
  • infinite scrolling option
  • fading photos option
  • music player option
  • corner image
  • white photoset lightbox (courtesy of ladmilk uvu)
  • alternate styles for sidebar and permalink

Please like/reblog if you’re using the theme! :)


An ongoing tutorial series for those who already have a basic understanding of making tumblr themes and hopefully find something new or different to try.

A while back I said I was going to post a tutorial on how to use custom fonts on tumblr. And what better time than now, after that latest update from Chrome is messing up font rendering.

Difficulty: CSS (easy) | HTML | JS
Extra Reading: @font-face rule, base64 encode, fallback fonts

Read More

updates tab 01 by lunors


I decided to release the updates tab I’ve had on my blog for a while.

Here is a screenshot of what it will look like. The “stats” tab hovers open to reveal stats and other updates.


This tutorial requires some basic HTML knowledge, but is easy to customize because I took the time to explain what some elements of the code are.

Here is the code: http://pastebin.com/2iXHcvgf

The music player needed for this updates tab can be found here: 


You can always message me if you need/want help! Enjoy :o)

Note: PLEASE put credit in your FAQ! It’s not necessary but I would highly appreciate it.


TUTORIAL » How to move things on click with Javascript.


Difficulty:  ★ ★ ★  ☆
Requested By: anonymous
Notes: This isn’t for the faint-hearted because I and many others will know how tetchy coding with scripts can be so please be wary. I can only help so much if you’re not that familiar with scripts/html/css.

Feel free to request a tutorial! 

I’ve received a few messages of people asking how I did the javascript effect on my theme 12: coexist, and I use this on a lot of my themes and pages because it’s so easy and can be used for virtually anything.

I’m going to be telling you specifically how to recreate THIS PAGE.

Also if you’re a theme maker please check this out!

Read More


i know a lot of these background masterposts probably already exist, but i really love doing masterposts cause they’re really useful for me and hopefully other people??

**none of these pictures belong to me


  • pattern backgrounds { here }
  • gradient backgrounds here }
  • sky backgrounds here }
  • floral backgrounds { here }
  • nature backgrounds { here }
  • pixel backgrounds { here }
  • animated backgrounds { here }
  • eiffel tower backgrounds here }
  • balloon backgrounds here }
  • other backgrounds here }

other pictures

  • transparent stuff here }
  • banners here }
  • sidebar pictures here }
  • pixels here / here }

themes (shortened from my other masterpost)

  • blogroll themes { here } 
  • network themes here } 
  • url redirecting themes here } 
  • collection of personal themes { here }


TUTORIAL » How to use the javascript filter

Example 1 / Example 2 (Basic)

Difficulty:  ★ ★ ☆ ☆ ☆
Requested By: 
Notes: This is used a lot in fanfics pages, tv schedules & network themes. Really simple once you get the hang of it!

Feel free to request a tutorial! 

I’m going to be telling you specifically how to make THIS PAGE.

Read More


Circle Hover Menu by Fukuo

In this tutorial, we’ll be making a Circle Hover Menu. I have used it on my personal blog—but, unfortunately, I closed it as I am not active on that blog lately. I’ve been spending my time to code this one, there are many various style on the code so I hope you can find what you like!

Please note that this might not be supported in all browsers, this is still experimental. No previews are provided for the code, I will try to add it later.

Read More

"Before you learn to code, think about what you want to code

Knowing how to code is mostly about building things, and the path is a lot clearer when you have a sense of the end goal. If your goal is “learn to code,” without a clear idea of the kinds of programs you will write and how they will make your life better, you will probably find it a frustrating exercise.”

For those who maybe haven’t visited the custom theme tumblr docs lately, they have a new link. Through GA Dash, they have a free tutorial series. They have it set up to help you make tumblr themes as well as websites. So now learning to make themes or coding is easier than ever. It teaches you in steps and you can “unlock skills”. The awesome part of it is it’s absolute free. Whether this is a ploy for tumblr/yahoo to get people to submit more custom made themes to theme garden or just to have more variety of user made themes, if you’ve ever wanted to make a theme but maybe long text tutorials seemed overwhelming this is another avenue to try.

grids for themes


I thought it would be pretty helpful if I put together some theme resources for my followers who are interested in starting to code. It’s a hard process to learn so its good to have a toolbox!

  • CodePenthe main site is full of lovely inspiration for web design, but the pen is a very helpful place to test out and build different elements of your code that you can insert into your theme without downloading a program like dreamweaver. Its separates the different codes into HTML, CSS, and Javascript so it doesn’t take much thought.
  • ColourLoversThis website is full of different color pallets that you can use on your theme, you can look them up by the color, or just the general theme you are looking for.
  • CodropsThis is a great place for inspiration and code help. It has a wide variety of tutorials to help you make your theme as unique as possible.
  • Base Code: This is the base code by theme maker farahmir that I usually use. Its hard to start from scratch when you’re just beginning so its very generous of talented theme makers to release codes to help people get a start. 
  • Codecademy: I’ve only just started to explore this website but it seems to be a good place to start when it comes to gaining your footing as a web designer. 
  • W3schoolsIf I have really basic curiosities about a bit of coding I usually end up over here. It isn’t overly complicated. Like I said, just for the basics. 

Happy coding!