#Code Guide

This is a list of pre-made layouts and code snippets that are free for you to use. Check individual posts for details on how to use them. There’s also a Github repository listing them here. A few notes:

  • All themes are licensed under the MIT License, which means they’re free for you to use however you want. The only stipulation is that you retain attribution to me, which can be as simple as leaving credit in the HTML/CSS comments (hidden from public view.)
  • Page themes are platform agnostic layouts and can be used anywhere that supports (modern) HTML/CSS. They use CSS variables to manage user settings so you can swap out colors, images, fonts, etc. These variables are located in the :root element. If you’d like to know more about CSS variables, you can read this guide.
  • Page themes are meant to look identical to previews out-of-the-box, so they come shipped with web URL images rather than local links. I encourage you to link your content locally.
  • Page themes are stored in one messy file so you can easily drop it in and test it out, but this is not best practice. If you plan to use any themes across multiple pages, I strongly recommend separating the CSS and JS into their own files.
  • Themes are tested on Mozilla and Chrome on a variety of displays, but there’s no way I’ll catch all bugs. If anything is weird, let me know.
  • For instructions on installing a Tumblr theme, you can read their official documentation.

Feel free to email me (nenrikido@pm.me) with any questions/comments or leave a comment here.

Comment Form is loading comments...

A theme preview. A retro style background with boxes overlaid. There is an 8 striped flag in the corner. As the user clicks each stripe, the color scheme of the box shadows, border, and text changes to match.

A mobile preview of the theme.

An alternate theme preview. This one has a sky background with a rainbow and an icon of Michiru Kaioh from Sailor Moon.

A zoomed-in preview of the sidebar boxes.

Rainbow Page Theme

live preview

made a theme for pride month based on the original 70s rainbow flag! you can click on stripes of the flag to swap color schemes.

features:

  • customizable background & sidebar images
  • pride flag theme toggler (uses javascript)
  • animated rainbow title
  • lightly styled audio player
  • responsive image class
  • …and other cool stuff!

A theme preview. It's a gif of a standalone page. It has a header of Sakura from Cardcaptor Sakura and a background image of cherry blossoms over a river. Two pixels are to the right and left of the header image. The gif shows someone clicking on the left pixel, which opens a pop-up box with more text.

A mobile preview of the theme. The pixels, rather than sitting besides the header image, rest beneath the main content.

An alternate theme preview, with brighter pinks and blues. The theme uses a different gif of Sakura.

A mobile preview of the theme.

Sakura Page Theme

live preview / tumblr post

re-coded an unreleased page theme an anon asked me to release like 5 years ago (example of the original). realized i actually hated a lot of how it was originally handled and now…it is ready to be unfurled!

features:

  • 2 custom pixels that trigger pop-up boxes/modals
  • customizable fonts, images, and colors
  • title font supports english & japanese
  • header designed for 4:3 ratio gifs/images
  • mobile responsive (built with flexbox)

A theme preview. It's a profile page with a background image of sunflowers. A foggy box with text is in the center. A PNG of a girl is sitting next to the box.

A mobile preview of the theme.

A theme preview. It's a profile page with a background image of a city road. On the left, there are storefronts with flowers and the background shows a distant mountainous forest. A PNG of an anime-styled girl stands next to the foggy text box. She is holding a green bag behind her, smiling, and wearing cat ears.

A mobile preview of the theme.

Sunflower Page Theme

live preview / tumblr post

completely re-coded and re-vamped a page theme from 2018 i made for tumblr. (original is here.) added a few features, made it behave on mobile, and it is now published for use anywhere.

features:

  • up to 2 side images (left & right)
  • customizable fonts, font sizes, images, and colors
  • mobile responsive (built with flexbox)
  • …and more!

A gif of a loading screen as the home page for Nenrikido loads.

Preloader

blog post + codepen

“I recently decided it might improve user experience to get a loading screen instead of watching the grid unceremoniously disentangle itself. A few experiments later, and here we are.”

A theme preview. It's pink and minimal.

A blue theme with a cat icon on the sidebar.

Toothache Theme

live preview / tumblr post

this is a re-release of my very first theme back in 2016…it’s cleaned up & a bit more comprehensible.

features:

  • 400px posts
  • 2 links w/ a customizable link divider
  • customizable post background color, permalink, favicon
  • dropdown font selection & customizable font size
  • options for rounded/square sidebar image
  • option to show/not show your description

A yellow Tumblr blog theme. It's minimal and serene with a photo of flowers and a sleeping girl.

An alternate pink version of the theme that is left aligned rather than centered

Pudding Theme

live preview / tumblr post

i love the plain times theme and have made lots of customizations over the years. so i decided to finally tidy it up and release it as a formal edit.

features:

  • 500px posts
  • left or center aligned posts
  • links for ask & archive (if enabled)
  • customizable fonts (dropdown selection)
  • custom permalink icon or text
  • optional title, header image, & blockquote indentation