tumblr themes + resources

Beta release of the theme builder!

Learn more about the theme builder + start building your theme

The theme builder is ready to be used! Since this is the beta version, there are still a lot of options that are going to be added in the future.

Here are some examples of themes made with the current version:

image
image
image
image

And here are some of the current options:

image
image
image

Please let me know if you have any suggestions or run into issues making or using a theme!

Screen recording of a navigation menu that slides in from the left of the screen.ALT

CSS-only Sliding Menu

base code / simple preview

Aside from some built in transitions and CSS variables, this is a blank template to build your own menu content. To showcase what you can do with it, I’ve also made a customized preview.

This is made possible with :focus-within, which lets us select a parent element based on the (focused) state of its children, similar to :has(). Using :has(:focus) could have accomplished something like this, but this selector is specialized for this purpose.

Let me know if there’s anything I should add!

Getting a feel for interest in the topic, but since using js in custom pages is not as easy as it used to be (for pretty decent reasons), would anyone be interested in some tutorials for how to do common scripting things with just HTML and CSS?

Tutorials/Resources for CSS-only features?

Yes

No

See Results

If there’s anything specific you’d like to know how to do/see CSS only equivalents for, please add some replies! I already have a few ideas

(popups, sliding menus, etc)

I’m also open to tutorials for no jquery versions as well

screen recording of an about page with stickers of gummy sharks and Marvel's Jeff the Shark. It's themed to look like a scrap bookALT
A screen recording of a black and red about page. It's themed to look like a scrapbook.ALT

Gummy Shark!

🦈light preview / 🥀 dark preview + code

A multi-tabbed about page to go with Notebook.

All of the effects on this page are CSS only (no scripts). You won’t have to wait for approval to use javascript to use this page!

There’s 14 color options, but HTML and CSS knowledge is needed for any further customization. Let me know if there’s anything I need to add!

Theme [06]: Determination by glenthemes

🌻 ── preview / code / guide / credits 。

A retro theme with draggable windows, featuring a recurring pixel heart inspired by Undertale. All pixel icons in this theme are hand-crafted with CSS (I wrote about my process here if you’re interested ♥). 𝐌𝐚𝐣𝐨𝐫 𝐮𝐩𝐝𝐚𝐭𝐞: 𝟐𝟎𝟐𝟓 𝐒𝐞𝐩.

🌻 ── theme features ‣

  • sidebar image: 75px–200px  ⊹  custom hover text (optional)
  • navlinks: 4 default links  ⊹  pixel heart shows on hover  ⊹  custom link text
  • description: custom title  ⊹  scrolling text marquee (optional)  ⊹  custom desc text
  • custom links: up to 8  ⊹  1–3 columns
  • music player: 1 song only  ⊹  scrolling text marquee (optional)
  • posts: 1 column  ⊹  300px–650px  ⊹  post type indicator in title bar  ⊹  legacy and NPF support  ⊹  choose between old blockquote captions or modern dashboard captions  ⊹  optional toggle tags  ⊹  shortened notes (optional)  ⊹  optional infinite scroll
  • corner image: 60px–300px  ⊹  custom hover text (optional)
  • interactive windows: minimize, maximize, and close buttons  ⊹  draggable windows (optional)  ⊹  customizable borders  ⊹  customizable shadow offset, size, color, transparency

🌻 ── how to use this theme ‣

Please read the guide I put together! ˭̡̞(◞⁎˃ᆺ˂)◞

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