themes & resources

GPOY — a 2012 Tumblr-inspired theme

Preview // More Info & Install

happy April Fools! this theme is a joke. and by "joke" I mean, unfortunately, I spent time making this Tumblr theme that you can now use. consider it a late Ides of March gift or something.

What does GPOY mean?

oh, my little Tumblr baby. I'm so glad you asked!

GPOY is short for "Gratuitous Picture Of Yourself," and is usually accompanied by a picture of yourself or something that you do. It was a very common reply and tag on Tumblr in the early 2010s, essentially meaning the same thing as "me" or "same".

GPOY comes with the following features:

I spent a ridiculously long time making sure this looked as close to the Tumblr dashboard from 2011-2012 as I could, so it includes absurd, long-obsolete features such as...

Reblogged post commentary is nested in blockquotes, that can and will be unreadable and break when there are too many (don't worry, if you don't like this you can disable it).

Like and reblog buttons are at the top of posts (so convenient!)

This theme supports all post types! That being said, some of them look like absolute shit (as David Karp originally intended)

3 font sizes (original 14px - for ants, 15px, and 16px)

5 post sizes and 5 sidebar widths

9 built-in color schemes (Default, Modern, Dark, Galaxy 1-3, Doctor Who, Sherlock, and Supernatural) plus a custom scheme for your own uploaded background image (the most low-res, high-contrast, over-saturated image you can find would be great)

"Followed tags" section to host your favorite blog tags

"Suggested blogs" section to recommend your favorite blogs

An optional fake "create a post" section at the top of the blog

Unlimited custom links (visit the help desk FAQ for a tutorial)

Custom titles for Home, Ask, Submit, and Archive links

Pagination or endless scroll

you can install this theme via the source code here! the theme is still pending approval in the theme garden, and I'll add that installation link later. as always, thank you so much for using my themes, even the hellishly ugly themes like this one. it means a lot!

as many of you are probably already aware, Tumblr recently banned pages that use javascript. if you try to edit a page that uses javascript, you’ll get an error message that won’t let you use your page - you can see Tumblr’s official notice on this here. via Tumblr:

Blog pages cannot have JavaScript as well. If we detect it, we’ll remove it when the blog is viewed. If you try to edit a blog page that contains JavaScript, you’ll see an error message that reads: Looks like you’re trying to add some Javascript or invalid html to your page. You’ll need to contact Support if you’d like to use Javascript.

according to Tumblr, you can contact support and apply for an exemption here. if you’re using one of my pages that uses javascript and you’d like to continue, please follow that link and contact support about an exemption for your own blog (note: it’s a blog-wide exemption, not an account-wide exemption). I don’t know whether they’ll allow blogs to use pages with javascript coded by a third party, and I feel like it may be a long shot, but I suppose it’s worth a try.

I’ve applied for an exemption for my own pages and I’ll ask about the possibility for thememakers like myself to get a blanket exemption for our pages; however, I think that’s probably impossible since all of my pages are hosted extraneously from Tumblr and I don’t think the logistics necessary for Tumblr to create a policy that would allow for blanket exemptions on third party pages are even possible and still allow for spam filtering are even possible.

I’ll update once I hear back from support and if/when Tumblr puts out more info on this.

some faqs responding to the many messages in my inbox:

help! I’m using one of your pages and it stopped working. what do I do?

the only thing you can do is to contact support, apply for an exemption, and see if they’ll let you. I’m not optimistic about it and I don’t think support has clarified to anyone whether it’s possible to get an exemption for javascript coded by a third party (I assume they’re deluged with requests), but I suppose it’s worth a shot.

if you have pages that use JS, don’t touch them. don’t try to reinstall; it won’t work. 

I’m using one of your themes that uses javascript; do I need to do anything?

if your theme uses JS, it will be fine; this only affects pages.

do you have any pages that don’t use javascript? 

no.

would you be able to come up with a javascript-less fix or version of your pages to evade the ban?

I don’t have the time to do that right now, so unfortunately, not right now. plus, a lot of my pages are centered around some kind of function that requires javascript - i.e. poppy would be super lame without the popup descriptions and the filtering. 

plus, Tumblr hasn’t released much info about this and what possible exemptions will entail, so I’d rather wait and see what’s going to happen with exemptions, whether this ends up being a permanent policy, or if they’ll get rid of it, or if they’ll modify it. I don’t want to put a ton of work into making js-less versions till there’s more clarity on what’s going to happen. I might reconsider and create JS-less versions of the few pages I have that aren’t JS-heavy, but as I’m going to be very very busy writing my thesis and being logged off for the future, I wouldn’t count on it.

what will you do if this is permanent?

if it’s permanent, I’d be really annoyed, but I’ve always considered myself more of a theme thememaker than a page thememaker, so I’d stop making pages and continue to solely make themes. it’s really frustrating for us thememakers who use static previews though.

also, as a final note: please be nice to support if you contact them. Tumblr’s support is well aware that thememakers exist and they’ve been responsive to our concerns pretty consistently. 

theme 80 / preview + code

contained theme with custom post & font sizes, custom font family, unnested captions and a lot of colour options

sidebar with title, description and image (320x470)

popup with text area, up to ten links, image (250x330) and three sections for what you’re currently reading, watching and listening to

theme 79 / preview + code

contained theme with custom post & font sizes, custom font family, unnested captions and a lot of colour options

sidebar with title, description and an image (400 x 500)

dione: a theme inspired by tumblr dashboard made to commemorate of the milestone of a thousand followers :))

preview // code

features

responsive.

four posts widths: 450px, 475px, 500px and 540px.

show/hide header icon, show/hide post icons, left sidebar options.

header image.

custom font¹ and font size.

up to seven custom links and five tags².

message popup³.

notes

you can use any font from google fonts. just enter the site, copy the name of the font you want and paste in the appropriate field.

if you don’t want to show the links and the tags, leave the titles fields empty.

the message box only appears if the ask box option is activated.

to change the umbrella icon, enter feather icons site, copy the name of your chosen icon and paste it in the indicated field.

THEME 1: Discord

A theme replicating Discord’s layout, using unnested captions for a server-like feel.

Live preview (temporary) | Static previews: home page, permalink | Code

Features:

Responsive

Unlimited custom links

Supports new post types/pinned posts

Pagination or infinite scroll (manual load/automatic)

Light/Dark modes: set your default color mode + optional toggle

Custom colors for special text/links/other accents

Custom fonts and text sizes

Optional header image, avatar, description, search bar, like/reblog buttons, tags, Archive/Random links, and date/timestamps

(Optional) Custom Discord tag#1234 - set it to whatever you’d like!

(Optional) FAQ/Submission Guidelines sections that appear above the form on Ask/Submit pages

(Optional) Use the default Discord fonts if the viewer has them downloaded!

And more!

Given the complexity of the light/dark modes, the gray/white backgrounds aren’t customizable, but a good deal else is!

io by mercurythms

preview 1 | preview 2 | download

features:

adjustable post width and height

full height sidebar with adjustible width

adjustable post margins

customized audio player in posts

credits: 

base code - @seyche

system uicons - corey ginnivan and @glenthemes

responsive videos - @nouvae

css photosets - @annasthms and @eggdesign​

mobile photoset fix 3.0 - @glenthemes

custom like and reblog button inspired by @shythemes

custom audio player - @annasthms

minimal soundcloud player - @shythemes ​

tippy.js tooltips - atomiks

fade in effect - cory laviska

remove tumblr redirects - @magnusthemes

smooth scroll - gblazex

customization tips:

Font choices can be found on google fonts. All you need to do is type the font you want in the theme customization panel.

Icon shapes can be found on the system uicons webpage. All you need to do is type the name of the icon in the theme customization panel.

Theme [19]: Stardust by glenthemes

⊱ ─── preview / code / credits。

A minimal 1-2 column theme featuring our beloved alienboy Oikawa Tooru from Haikyuu!! 𝐑𝐞𝐰𝐨𝐫𝐤𝐞𝐝 𝐢𝐧 𝟐𝟎𝟐𝟏 𝐎𝐜𝐭𝐨𝐛𝐞𝐫! Remade this from scratch ଘ(੭ˊᵕˋ)੭*✩

⊱ ─── theme features ‣

post sizes: 220px — 540px

choose between single or duo columns!

non-intrusive post hover effect – post source is always there!

show/hide captions option

full NPF support (let’s pray)

up to 8 custom links (shows name on hover)

custom description

lots of options for colors, spacing, sizes, etc

corner music player – 1 song [+instructions]

◍ carbon theme.

Links: dark preview | light preview | install | features

Carbon incorporates the best elements from Instagram Web together with functionality and customisability. As an all-in-one theme, it comes with an optional integrated ask page (FAQ section + ask box) and navigation page (custom links + social media + tagslist).

Features: all-in-one theme (askbox + faq + nav + social media + tags), 500px posts only, 3x sidebar styles, searchbar, styled search and tag pages, built-in custom links (limitless), personalise navicons

Credits:

Layout inspired by Instagram Web

Sidebar image art by jellykobi

cappuccicons by suiomi

photosets.css by annasthms & eggdesign

NPF images fix v3.0 by glenthemes

thank you so much!!!! welcome!! i feel like i should not be giving advice but anyway lets give it a go

my tips are:

1. find a base code you like - i used seyche's for ages until I was finally comfortable enough in making my own (which I haven't actually used on a release yet). it's good bc it has lots of instructions within the code to help you out. eggdesign also has a really good one for beginners. i recommend just diving in and playing around until you get a good feel for it.

2. i would recommend sketching or having some idea of what you're doing but tbqh i mostly just make it up as i go and see what happens. it makes my codes really messy and i have to spend much much longer fixing them though, whoops! i don't use figma or XD or anything else. i use github to host my codes, and use codepen when i want to figure out little things. tumblr can be realy annoying sometimes so i prefer to code in the acutal customizer.

3. in terms of other resources, things i use the most are phosphor icons, google fonts, eggdesign & annasthms css photoset script, eggdesigns day/night mode (this is also really excellent for anything you want to do on click with some tinkering), this guide on flexbox, and w3schools. google is your friend! if you google "css accordion tutorial" you'll find heeeeaaaaps.

4. oh also have the tumblr docs bookmarked and if you're working on something have it open. it explains how stuff is implemented on tumblr.