themes & resources

Themes and resources by zsu/taezs. ko-fi: @taezs

[taezsthemes]

taezsthemes has a new look!

i have finally gotten around to revamping this blog's layout, and making a portfolio of (most of my) codes!! go take a look!!

i've also finally compiled a list of all my frequently used resources, including all of the scripts and codes i use a lot, as well as icon fonts, tumble thingies and more!

[taezsthemes]

yo! i was just wondering if it was cool if people used your codes for specific pages (like the bookshelves) on, like, non-tumblr sites like neocities as long as the credit link back to your tumblr was left intact? though it's cool if that's not allowed!! anyway love your codes n hope you have a good day~

yep thats fine :)

[taezsthemes]

hello! are you okay with your codes being used for neocities? the credit will remain untouched! it's perfectly fine if not, apologies for the trouble. thank you!

yep that's fine :)

[rachaelthemes]

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!

my themes are free to use, and always will be — but if you love my work, I'd be so happy if you bought me a coffee. thank you!

[taezsthemes]

hi, random question here but you wrote in some fic titles for your bookshelf page "addict/obsess": do those stories actually exist or did you make them up as examples? where did you get the titles from? & why did you recommend the hating game novel? /gen

i barely ever come on here anymore but i saw this and it sounded like fun to answer so hi!!

they're all real fics or book titles i like, with the tags and word counts mostly made up or generalised - except the books, those are all real books i've read.

i recommend the hating game because it's excellent for what it is - a fun, breezy rom com. i was also coming off of reading a little life, which is hands down the worst thing i've ever read, so it was wonderful in comparison. it's a fun read from what i remember!! i'd read it again i just do not have the time.

[seyche]

re: Tumblr’s ban on JS in pages

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. 

I have a ton of messages in my inbox I’ll try to get around to in the next little while, but please be patient since I’m busy and tired :(

[pirateskinned]

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

read my terms of use. please like or reblog if you plan on using!

[pirateskinned]

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)

read my terms of use. please like or reblog if you plan on using!

[kosmique]

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.

preview header credit | full credits here

[starlightthemes]

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!

Theme credits: Original design by Discord, tooltips by atomiks, Tumblr controls by seyche, icons from Font Awesome, custom like buttons by Demirev, infinite scroll by Paul Irish+Metafizzy, NPF photosets fix by glenthemes, dark/light mode toggle by eggdesign

[taezsthemes]

im loving your newest fansite 'newsflash'! its probably one of the better fansites ive seen in a long time. i'm curious if there's a way to make the posts 540px instead of 500px (that i can do myself if i can figure it out lol) so posts dont look so squished? ^^ if not, that's fine! <3

thank you so much!

to change the post width, search for section{ and just change max-width:500px; to whatever you want (e.g. 540px). On a smaller screen it will automatically reduce the width.

[mercurythms]

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.

Please do not remove credit or steal parts of this code. Please message me if you have questions or encounter problems with this theme.

[glenthemes]

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]

⊱ ─── terms of use / ask a question / tip jar ☕

[xuethms]

◍ 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

Extra thanks to starlightthemes for figuring out OP icons

[taezsthemes]

hi! i love your themes & pages so much, you have such a great eye and are so skilled at coding!! i recently started using your character list/members page and was fiddling with the icon options that you linked through cappuccicons and it only seems to work with specific icons? i thought this might be due to an update to their icons or something and was just wondering if there's a way to get all the icons available? thank you so much for your time!! 💙

hello! thank you for your kind words that's so lovely!!

basically that icon font was retired and is now only available to see which ones work through the wayback machine, as the new one removed some or renamed some.

the other option is to install the new one, by pasting this after <!– fonts & scripts –> <script src=“//pull.cappuccicons.com/cpf.js”></script>

NOTE you will need to rewrite the “”s!!!

then instead of “th th-book”, go “th cp cp-book”

e.g.: <a href=“URL”><span class=“th cp cp-book”></span></a>

[taezs]

hi! I love your themes and I'm learning how to code, so I'd like to know if you'd share some tips like tools or resources (for exemple, do you use figma or adobe xd?). It's okay if you're not comfortable with that, but thanks either way (since I use one of your themes and absolutely love it)

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.

4. join the coding cabin - they're super helpful at sharing resources or helping you out when you're stuck with something. also at tumblr-specific stuff that you can't really get help with from google.

[taezsthemes]

hi! im currently using your koi no yokan theme on one of my sideblogs and i was wondering how you got the little tail styling on the end of the sidebar/description/navigation boxes, if that makes sense? im trying to tweak an addon of mine to fit the aesthetic and i decided to ask since i couldn't figure it out myself, rip

hello! they're pseudo elements!

check out this pen here! - basically it's a box with 3 rounded corners.

on the bottom left corner, theres two pseudo elements. one is a coloured box, and the other is a box the same colour as the background, but with a rounded corner so it shows through on the bottom.