themekets

[themekets]

"we're all going to be using and leaning into spatial computing" this is a telltale sign of rich techbro brainrot. "oh lets reinvent the kitchen timer but worse and connected to wifi" fucking idiot

[themekets]

An underwater graveyard in Llyn Celyn, Wales. The village it was located in was flooded in the 60’s to supply water to Liverpool.

[themekets]

"do X to piss off a terf" what about doing things to make a trans person feep safe? what about building camraderie and community? what if you chose to center your actions around building bonds and uplifting others instead of making your main motivators spite and cruelty?

[themekets]

being in a completely normal nonthreatening scenario & environment and thinking “i have GOT to get the fuck out of here” with the intensity of some trapped neurotic prey animal

[themekets]

REBLOG IF THIS RELATES TO YOU:

AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!!!!!

[themekets]

you want my hot take for the evening? people who dont like complainers just havent been exposed to good complaining, and will never know if they themselves have an inborn talent for the art of kvetching

[themekets]

I didn’t miss that social cue I just thought it was stupid 

[themekets]

Hey, I'm wondering if you'd be able to give me some advice. On my theme, the newer audio posts just show up as default mp3 modules, without all the css that would normally apply to an audio post. Tumblr seems to have changed its coding for new audio posts, and I'm not exactly sure how to get my old theme to apply to new posts. The old posts were classified as 'audio posts' in the code, but the new code seems to have removed that, so it only has the audio controls, not the player code.

Hey, sorry for the long delay in answering, I haven't been keeping close tabs on it. But if you still need a hand here (or for anyone else who's also wondering about this!) here's a run-through of what's up here.

The TL;DR: is summarised a bit obliquely in Tumblr's custom theme documentation (which I'm surprised they even update still, there's a lot that goes unmentioned here that you can really only find by pulling down a complete theme from the Tumblr theme selections and inspecting the code, I've found):

Basically, pretty much any new audio post is going to be NPF-style, so any styles that use any of the Audio-post specific functionality will not be used. Instead, as you can see below, Tumblr renders NPF posts as a text post (note the <article class="post text" in the markup below).

What you can also see here is that NPF audio posts can contain multiple audio players, and will have them laid out with the following structure:

<figure class="tmblr-full"> <audio controls="controls"> <source src="AUDIO_URL_HERE" type="media/type"> </audio> </figure>

The styling of these audio players is pretty much exclusively done by your browser, and is pretty variable between browsers, but always fairly simple and bare-bones. Tumblr itself has very little control over them, even.

The only real way to "style" these things is to effectively hide them completely with something like display: none; in CSS, and then use JavaScript to control them with some additional buttons or something that you embed around them. Because you don't have a lot of granular control of the audio players or even have much indication of where they'll be embedded with how NPF works currently, I'm pretty sure you'll essentially have to cobble together some JS to detect these elements and fill in some more traditional HTML buttons and whatnot around them, and rig them up to events that control the actual (hidden) audio element.

I'm somewhat hopeful that eventually @staff will update their custom theme framework to properly work with NPF posts, because the only proper solution in my mind is that the old {block:Audio} and other posts type placeholders are "brought back" in some form or another to allow us to define what, exactly an NPF post "block" should look like for each of the NPF content types.

Till then, any possible solution will have to be hacky as all heck, I'm afraid.

[themekets]

Enjoy the songs from Schmigadoon 2x03!

[themekets]

Hello! I was tinkering around with your Stillness theme and I'm having an issue where Ask responses aren't displaying. Can you help me figure out why?

Ah, right, I do remember having to fix this, but I haven't gone back to edit the theme post just yet. Low priority for me, sorry. The thing was... let's see...

Right! Tumblr changed their theme spec slightly; previously it was the case that the {Body} template fragment was valid for Answer-type posts when there were no reblogs on it. That apparently changed after I initially put the theme together; now you have to replace that {Body} node with {Answer} specifically in the {block:Answer} post block.

I'll update the theme code gist as well, thanks for asking!

[themekets]

Hello, I'm currently using this theme: "Theme 12 - Magical Skies (by drxgonfly)" can find by clicking the dragonfly in the bottom right, and it has an issue with "NPF" / new post format posts. I've talked to the creator and they're not used to npf posts and are unsure of how to fix it currently, so I was wondering if you knew how I could go about making the npf posts conform to the rest of the posts in the theme? Example of the sore thumb of avatar/name/text as a reblog on my page. Thank you 💖

Heya, sorry about the delay in responding, I'm not on Tumblr super frequently at the moment. I'm happy to help, but I'm not seeing any particular issues on your page at the moment? Do you have a link to a post where it's showing up for you so I can take a look? 😊

EDIT: Thanks! More below the cut.

OK, so it looks like what's being hit here is that this theme is largely looking for image posts specifically. So this image here is a snippet of what the "broken" post renders as in the final HTML on your blog:

(hopefully that's kind of visible)

And for comparison, this is what the "working" ones look like:

As you can see, this theme is designed to basically show completely different sets of elements based on the type of post. Normally it's a bit more hidden, just depends where you put your {block:posts} and the block tags for each post type.

This approach just flat out doesn't really work for NPF posts; basically what you end up needing to do is (more or less) treat every post as if it's a text post, and then style the contents of the text post with CSS rather than relying on different sets of elements. It's good to keep the post type stuff in the theme when possible, it makes it easier to style any posts that are still in the legacy format, but NPF posts don't play by those rules at all.

Exactly what that should look like for this kind of theme is difficult to say -- NPF posts can contain multiple images, text, etc., so it's hard to say what should be shown as the "main" part of the post for the main page there. Fixing this will probably require some experimentation.

Some possible ideas:

1. Write some Javascript to examine text posts when the page loads and tries to find an image in the post. If it finds one, it could hide the rest of the elements in the post and attempt to add classes to the image to make it look like the others.

2. Use CSS to hide text in text posts completely. This will not be very pretty if it is a pure text post, though.

3. Use CSS to find the first image in a post that's not like a user's icon and style that so it "hides" the rest of the post as much as needed.

Javascript is finicky as heck, and hiding all text posts doesn't feel like a very nice approach overall, at least to me. If I was doing option 3, this CSS might be enough to get you started:

https://gist.github.com/vexx32/8b1462c340d8fefa45ffd5105118d258

This isn't perfect, but it's a start. You'd probably need to give the footer of the post similar CSS treatment so it allows it to hover, and there's probably adjustments you'd need to make to ensure it only happens on the main page & not permalink pages.

[themekets]

Marmalade Suite by FloralCodes

-`  Preview + Payhip ´-

✨ 𝔀𝓮𝓵𝓬𝓸𝓶𝓮 𝓽𝓸 𝔂𝓸𝓾𝓻 𝓷𝓮𝔀 𝓭𝓮𝓼𝓴𝓽𝓸𝓹 !  ✨

Transform your blog into the nostalgic 3D desktop of your dreams with Marmalade suite! With over 60+ customization options, Marmalade will effortlessly change your blog into the ultimate retro desktop experience. Featuring a functional 5 track audio player, an all-in-one tab system, updates window, interactive calendar, and the ability the toggle between 1-2 column posts with the click of a button, Marmalade offers the most extensive range of features and customization available in my retro suite line.

Features:

Full screen, non-contained desktop theme

100% customizable color palette

Live built-in clock and interactive calendar

Optional updates window with currently watching, reading & listening

Single column or 2 columns

All-in-one inbox/FAQ, navigation, profile, blogroll, and custom tab 

Messenger/text style FAQ

Up to 4 link sections with up to 12 custom links each

Optional profile likes/dislikes, up to 5 skills

Customizable audio player with 5 tracks

Optional search bar, hit counter, post scrolling animation

Responsive to smaller resolutions

Localized

Scroll page to top button

+ more!

Terms of Use under the cut !

Terms of Use:

✔ You May:

Upon purchase, feel free to edit my themes for personal use provided credit(s) remain untouched.

Take minor inspiration from me, provided permission is gained & credit is provided.

Use my themes as a learning tool.

Have fun with them!

✘ You May NOT:

Under any circumstance, alter, move, change, or delete any of the credits.

Steal, use as a base, claim or attempt to pass off as your own in any way.

Redistribute, repost, or give out copies of my themes.

Take any pieces of my coding.

Use my work outside of tumblr, unless you have commissioned me specifically for an offsite template.

Create graphics using my theme elements / screenshots / containers.

Copy my works / designs / concepts.

Please let me know if you encounter any issues. If you love what I do, please consider giving this post a reblog! Thank you ♡

[themekets]

Customizable Audio Player

There's probably at least a few of these kicking about nowadays, but so far none of them have suited mine or my wife's purposes well enough.

So here we are, I made my own.

Github Link

Follow the instructions in the readme to get started. I'll be keeping the links in there up to date as I make any necessary changes, so refer to that for up to date information.

The player consists of a couple of pieces:

HTML code for the player's visual elements on the page and the audio playlist.

Javascript for the player's operation.

CSS code for the player visuals, with some provision for simplified adjustments to fit whatever theme you need.

Because the player essentially just becomes part of your Tumblr theme itself, you have full control over how it looks. I've given it some base styling to make it usable as-is, but if you want to completely change how it looks, where it goes, that's entirely up to you.

If you have specific needs that are't met with this implementation, feel free to file a Github issue or just send me an ask. I'm much more active on Github than I am here, though, so those will tend to get seen more quickly.

If you want to submit your own custom themes for the player for others to use, that's where I'd ask you submit them to as well, please!

Of course, you're more than free to send asks if you run into any difficulty using it.

[themekets]

The XKit discord server is awesome! There's a few staff folks who just hang out there and are happy to answer random questions. There's a dev or two from Tumblr who's often chatting with the XKit folks and they'll sort out things that help XKit out or discuss bugs and it's pretty awesome to see.

But yeah if there's a tumblr bug you're seeing... just use the support form, it'll let them triage and plan properly so they can get things fixed. I'm sure there are times they're busier, but of late I've never had to wait more than a couple days for a response, and they're always helpful or following up and letting me know they're working on fixing things.

As with any support thing, be specific and help them help you, really. :)

Be kind to Tumblr staff.

The number of posts I’ve seen, especially in recent weeks and months, that outright insult the Tumblr staff is through the roof. I understand a lot of people don’t like the new update, and want things to go back to how they were before. And I understand there are genuine bugs and glitches with the site that are very frustrating to deal with.

But you guys do understand that the staff of this site are actual people, right?

Every time you @ mention staff to drag them and call them incompetent, or you submit a request that’s excessively rude, you have to realize that an actual human being is going to read that. An actual human being who likely doesn’t control the overall code or design choice of the website. An actual human being who now has to do their best to be understanding while you literally harass them.

Staff is working every day to make this website the best place it can be. And I don’t think a lot of people realize this, but many staff members are also working directly with xKit. They are doing their best for you. And in return, they only get mocked and berated.

Also, I think we as roleplayers also need to keep in mind that Tumblr is not designed for roleplay, and it never has been. Many of the hallmarks of Tumblr roleplay work directly against the way the site was designed to be used. It shouldn’t be shocking that support for this is at times lacking, when we are the ones making it difficult in the first place.

If you have a genuine complaint about the website, you should contact support using their form and tell them precisely what the issue is, in as direct and civil a manner as possible. Remember your basic manners and explain reasonably why this is an issue. Someone will see it and they will get back to you. You can also join the xKit Discord server.

tl;dr - staff are human beings who are doing their best, stop bullying them because you’re frustrated about the latest update

[themekets]

Styling NPF Post Elements

In the last major update Tumblr did for posts (a while ago now), some post types were effectively deprecated, and they became (essentially) text-posts-and-a-thing, also known as NPF or Neue Post Format. This kind of made it a bit annoying to write themes for and cover, so let's go over these real quick.

To be clear, you will not have a massive amount of control over these in a custom theme. They just render as text posts, plus some specific types of elements for whatever other media happens to be in that post; the {PostType} token you can sometimes use to determine things even just shows up as text for the newer types of posts.

These new-fangled elements include:

Video posts

Chat posts

Quote posts

Images in text posts or in reblog trails

Videos

Videos in the NPF style basically have a tumblr-embed and tumblr-full class both attached to the same <figure> element, and also contain an iframe element.

If you have a non-standard post width (or just see your theme breaking around videos as they push things around and don't resize well) you can adjust the iframe behaviour to resize properly with a simple max-width: 100% like below. I'd recommend doing at least that much to save yourself some headache.

figure.tmblr-embed.tmblr-full { /* styles for the NPF container */ } figure.tmblr-embed.tmblr-full iframe { /* styles for the iframe itself */ max-width: 100%; }

Chats

Chats come in with the npf_chat class attached to a <p> element; one element per line of the chat. Labels for each line are just a simple <b> element. If you wanted to style your chat lines with, say, alternating colors, you could do something like this:

p.npf_chat { color: rgb(120, 120, 120); /* dim grey */ } p.npf_chat b { color: red; /* labels in red */ } p.npf_chat:nth-child(2n) { color: rgb(20, 20, 20); /* dark, almost black */ }

Quotes

Quotes only have the npf_quote class attached to a </b></p><p> element, though in the vast majority of cases, the </p><p> element immediately following it will be the attribution line (quote author, source, etc.) so you can target that as well.

p.npf_quote { font-family: Georgia, serif; /* nice fancy font for the quote */ } p.npf_quote+p { font-style: italic; /* style author/source as italic */ }

Inline Images

Images can be used inline in any reblog trail segment, and will be wrapped in a <figure> element with a class of .tmblr-full, so you can style their containers or the images themselves to ensure they don't overflow your post containers or just apply any manner of weirdness to them.

Personally I like to restrict their height a bit as well, so that reblog trails are still, well, readable. Giant images in the midst of a conversation get very distracting, in my opinion.

figure.tmblr-full { } figure.tmblr-full img { /* Restrict images to the width of their container, and 25ex tall */ max-width: 100%; max-height: 25ex; /* Enforcing auto for width/height avoids distortion */ width: auto; height: auto; }

Legacy Styles

The legacy post styles are still used in some places. From what I've seen it looks like most occupy a sort of halfway, where the NPF reblog trails are still used for them, and the main post content is a weird kind of legacy content type. These will still have the proper {PostType} markers and will render according to their appropriate block types in themes.

[themekets]

Theme - Stillness

This theme's main "thing" is that you can customize it a lot without ever touching the code. A lot of things can be switched on/off, a ton of things have a few different modes / sizes to pick from, and there's a frankly ludicrous amount of color options.

Have a play!

theme code — demo blog

[themekets]

Animated Scroll to Top Button

This is a pretty simple lil drag and drop bit of code, and you can stick the button itself pretty much anywhere. It creates a nice, smooth scrolling animation that can take as long as you like, and you can customize it to scroll the whole page, your post container element, or even just a random little box that holds your likes or something.

Full disclosure; I pulled the original JS code used here from this StackOverflow answer and modified it slightly to be a little easier to drop in place. It comes in two parts; one for the button itself, and one for the styles to make it all pretty however you like!

Button Code

First, you’ll want to figure out where you want to put your scroll to top button in your theme. I’d recommend putting it just inside your sidebar for most themes, but it’s really up to you. If you want to stick it in the corner of your page directly in the element that’s entirely up to you!

<script type="text/javascript" src="https://static.tumblr.com/au4xbaf/Pn3qdtfva/animated-scroll-to-top.js"></script> <!-- scrollToTop function arguments are: - the element you need to scroll - the duration of the animation. Some examples: - scroll whole window: scrollToTop(document.scrollingElement, 500); - scroll a container (select by ID): scrollToTop(document.getElementById('containerIdName'), 500); - scroll a container (select first thing with a class name): scrollToTop(document.getElementsByClassName('containerClass')[0], 500); --> <button role="Scroll to Top" id="scroll-top-button" onclick="scrollToTop(document.scrollingElement, 500)" >︽</button>

If you look at the <button> lines near the bottom, you'll see an onclick line. This is what you need to edit. You need to provide the scrollToTop() function with two bits of information:

What exactly it's supposed to scroll for you. (Page, container element, etc.)

How long (in milliseconds) you want it to take to reach the top.

Non-Container Themes

If your theme is not a container theme, you can usually just tell it to scroll the whole page (this is the first example in the code comments) by giving it document.scrollingElement as the thing in the to scroll.

Container Themes

If your theme is a container theme, you need to know some information about the container. Oftentimes you'll see the container element in your theme labelled class="container" or id="posts-container" or something along those lines, but not all theme creators play fair and name it something easy to find!

I'd recommend looking for {block:Posts} in your theme. The container element will generally be just above / before this token. You need something with an id or a class that you can reference (id is easier).

Locate container by ID

if you have an id on your container, awesome, that's the easiest way to go. You should see id="value", take that value and replace document.scrollingElement in the onclick line with document.getElementById('INSERT ID VALUE HERE'). When you're done that line should look something like this:

onclick="scrollToTop(document.getElementById('YOUR_ID')", 500)

Locate container by Class

If you have only a class="some classes" value on your container (each class is separated by a space), see if you can find the most unique one. Ctrl+F each class name if you must and try to find one that no other elements are using in their class="...". Then, add that class name into the onclick line as follows:

onclick="scrollToTop(document.getElementsByClassName('YOUR_CLASS')[0], 500)

Styles

Once you have your button element added in where you want it, you can look at adding some styles! This is the basic set of CSS blocks you'll need:

#scroll-top-button { background: transparent; color: rgb(200, 180, 50); text-shadow: 2px 2px rgb(125, 100, 20); transition: color 0.2s; font-size: 2em; font-family: 'Segoe UI', Consolas, sans-serif; border: none; padding: 0; } #scroll-top-button:hover { color: rgb(255, 255, 255); }

You can adjust the CSS here to fit your theme however you'd like. Insert it as a new set of blocks between your <style scoped="scoped"> and </style> tags in your theme's code. If you're not sure where you want it, just stick it immediately before `` and you should be set. You could also put it in the Custom CSS part of your blog's theme customisation settings (under Advanced from the screen where you edit your description etc.)