image
image

[3] Skyfall by sheathemes

preview | code

Features

  • full support for NPF posts
  • responsive to all screen sizes
  • post sizes between 350px - 540px
  • up to 6 custom links
  • like and reblog buttons

Optional

  • header image
  • sidebar image
  • tags always on display or by toggle
  • search bar

Important

  • full credits are here
  • sidebar image is a minimum of 350px width
  • you will use google fonts to change the main font. Search for the font of your choosing and copy/paste the title of said font into the appropriate text field
glenthemes's avatarglenthemes

Banner that reads "Interloper: theme 42 by glenthemes" stylized in all uppercase, accompanied with the cover arts for Eden Eyes' "Interloper II" (song) and "Half A Life" (EP that the song is a part of) on either side.ALT
Screenshot gif preview of the theme "Interloper" by glenthemes. The theme consists of a header that spans the width of a sidebar and posts beneath it. As the page scrolls, the bottom part of the header sticks/anchors to the top; the sidebar scrolls along with the page and stops when it reaches the bottom (the posts can keep scrolling).ALT
A closer preview of the "Interloper" theme on a narrow screen (mobile view) with label text that reads "desktop & mobile friendly". The layout condenses into a single column, with the header visible at the top. The header's description is hidden and can be expanded by clicking the "About" label button.ALT
Screen recording gif of the ask and submit popups on the "Interloper" theme, which can be opened by clicking their respective icons in the header. Clicking outside these popups will close them.ALT

Theme [42]: Interloper by glenthemes

🩸 ── preview / code / guide / credits 。

ĭn′tər-lō′pər, (n.) one who is unwanted or unwelcome; one who interferes where they do not belong. A mini fansite theme matching my Heartworm about page.

🩸 ─── features ‣

  • header: banner image ； profile picture ； Discord-inspired status bubble ； username ； description ； smaller profile picture and title ； basic nav links ； popup ask ； popup submit ； back-to-top button
  • sidebar: 200px–375px ； left or right ； auto sticky behavior
  • sidebar box 1: image with optional gradient ； bonus description ； custom links (up to 8) ； searchbar
  • sidebar box 2: custom updates (up to 8)
  • sidebar box 3: members/affiliates (up to 6, tumblr blogs only) with optional short comment
  • posts: 300px–650px (1 column only) ； legacy & NPF compatible ； old or new captions ； original poster, posting date and content source always visible ； optional click-to-show tags ； optional infinite scroll
  • misc: mobile theme support ； optional shadows ； optional rounded corners

🩸 ── how to use and edit ‣

Please read the guide I put together! (〃˘▿˘)

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

tumblr's avatartumblr

Reblogs in a chain now get their own notes

The reblog chain is one of the things that makes Tumblr unlike anywhere else. All the notes on reblogs are attributed to the original post, no matter which branch people actually liked or reblogged. We want to keep encouraging conversations, and give contributors the recognition they deserve. 

Soon, you'll be able to like, reblog, or reply to any part of a reblog chain, and that note will go to that reblog's author. Each reblog will have its own counts, instead of one aggregated number from every version of the post. And yes, you’ll be able to like multiple posts in one chain.

If a reblog doesn't add anything, the love flows up to the last person in the chain who did. Your post doesn't lose notes just because people spread it quietly.

Past notes will stay on the original post — we're only changing what happens from here on out. Retroactively re-attributing all of them would be... a lot.

This is just the beginning. More changes are coming as we keep building this out – stay tuned!

glenthemes's avatarglenthemes

Banner titled "NPF Images Fix (v4.0)" with a subtitle that reads "written by @glenthemes". What follows is a comparison of two screenshots of an example post displaying how the same post looks before and after the NPF images v4 fix has been applied. The post is by user glen-px which consists of three images laid out in a single row, each consisting of different heights; the first is portrait, the second is landscape, and the third is square. In the first screenshot, the user header appears first, followed by the photoset that has been vertically stretched to take on the height of the tallest image in that row, followed by the caption text. In the second screenshot, the photoset appears first, significantly shorter in height as it takes the height of the shortest column in that row, mimicking that of the Tumblr dashboard. Underneath the photoset sits the user header, then the caption text. A brown arrow points from the first screenshot to the second one.ALT

✽  NPF images fix v4.0 by glenthemes

A plugin that cleans up the appearance of NPF images on Tumblr themes, allowing them to mimic the appearance of legacy photo posts. Only applies to Tumblr themes, not the Tumblr dashboard.

✦ What is NPF?

"Neue Post Format" — prior to est. 2020, users could create posts of a primary type (i.e. text, photo, quote, link, chat, video). In recent years, Tumblr introduced NPF as the only available post type (i.e. everything becomes a text post) despite the post editor showing the illusion of different post types. NPF images can also refer to images between paragraphs (inline images).

✦ Features:

  • turns images HD if available
  • prevents shorter images from stretching / overflowing
  • custom photoset spacing
  • custom caption spacing
  • improved lightbox functionality
  • supports legacy blockquote captions, unnested captions, and modern captions
  • automatic infinite scroll support
  • [optional] moves main photoset to top of post
  • [optional] adds original poster source to captionless npf posts

PREVIEWS + HOW TO INSTALL  ✽

eggdesign's avatareggdesign

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!

phantomcodes's avatarphantomcodes

image
image

strawberry (revamped) | theme by sage

get the code: preview version 1 / version 2
a sidebar (left or right) theme with sticky buttons for permalink & reblog
— free til october 2025!

features (more info below the cut):

  • toggle: tags on click, music player*, updates, right or left sidebar
  • headerbar includes blog icon/home link & search bar // (optional) music player & updates buttons // day/night & tumblr controls buttons
  • sidebar includes links for home, ask, archive, & up to 5 extras, an uploadable image, and custom description
  • customizable: blog title, description, colors, body & title fonts, and font size
  • responsive design, jumpination, scroll to top, 4 corner options, 3 post margin options, phosphor icons

nothing needs to be changed in the code, everything can be changed in the customize panel!

terms:

Keep reading

glenthemes's avatarglenthemes

Banner that reads "CSS Popups: written by glenthemes" stylized in all uppercase.ALT
Screen recording GIF of the user interacting with the demo page for CSS popups. There are four sentences present, each of which has several words emphasized in blue and underlined. When the user clicks the emphasized phrase, a popup appears with content associated with said trigger. Clicking outside of the box closes the popup.ALT

✨ CSS popups (no JavaScript)

Some basic CSS popups I put together by utilizing <⁠l⁠a⁠b⁠e⁠l⁠ ⁠f⁠o⁠r⁠=⁠"⁠.⁠.⁠.⁠"⁠> and <⁠i⁠n⁠p⁠u⁠t⁠ ⁠t⁠y⁠p⁠e⁠=⁠"⁠r⁠a⁠d⁠i⁠o⁠"⁠> combinations together with its :checked state to mimic a <⁠d⁠i⁠a⁠l⁠o⁠g⁠> in its open/showModal() state.

  • Unlimited popups
  • Only 1 popup can be open/active at a time
  • Clicking outside the popup box will close all popups.

🔗 github.com/glenthemes/css-popups