nyctocodes

[nyctocodes]

I wanted to get back into making themes, but alas sometimes life throws a wrench, so I have to put it off a little longer 🥲

[nyctocodes]

good news: I switched from nyctothemes to nyctocodes

bad news: in the switching process I accidentally did something to activate (I assume??) bot detection and now the nyctothemes url is deactivated and unavailable....

[nyctocodes]

Thank you so much for all your hard work!!! I don't know if it's just tumblr themes disappearing over time or I'm just not seeing them cross my dash anymore but you're the only one I know that still makes them regularly. With how much Tumblr has changed over time I can't imagine it's getting any easier to code, but I really appreciate what you do. It kinda feels like keeping the old ways alive or something haha

😭🙏 thank you!! I've actually been on hiatus for... quite a few years 🙈 but I've lately gotten passionately interested in the "indie web" and the idea of making a website to 100% express yourself outside of streamlined social media. And since tumblr has been getting waves of new users over the last few years, I'd like to make stuff for them! ESPECIALLY with the new features of CSS that didn't exist when I was active!

There are definitely theme makers I don't recognize (whether they're new creators or old creators who rebranded), so I'm excited to re-immerse myself in this community!!

[nyctocodes]

base theme is finally done 👴🏻🪦

[nyctocodes]

NPF based template

preview + code

This is an alternative to the more extensive base code I'm working on that uses the NPF variable that still uses the legacy theme blocks and variables. This is intended to keep your theme making process familiar and more comfortable for those who do not have a lot of JS experience but still want to utilize the NPF variable.

The JS is pretty minimal (especially compared to the full NPF theme), but it uses the NPF variable to keep formatting more consistent with the legacy post types. While you do not need to edit any JS to use this theme, if you want to, you can use more things from the NPF variable like getting checkmarks for users that have them!

This theme will also take into consideration if photos or other media should not move, like in the case of text separating photosets.

Here is a before and after of a post made with the beta editor:

This base code is very simple compared to my other ones (it is only the posts and pagination), so please edit it as much as you want! I didn't want this to be restricted to a specific style or layout. Given a lot of theme makers have felt limited with their post styles since switching to one post type, I'm hoping this can help bridge that gap.

Let me know if you have any questions or run into problems while using this!

[nyctocodes]

This is a masterlist consisting of links to different types of posts here on Tumblr. I compiled this for theme-makers in mind as a way of double-checking if any elements have been accidentally left unstyled. You can reblog the posts onto your test blog to check if everything looks as intended. Particularly for NPF posts, there may be some default properties you wish to override. I had these links saved all over the place so I decided to group them in one post for easier access. This list is by no means definitive, but I hope it can help somewhat. ♡

2023 Dec update: I’ve created a blog at @glen-test in which I reblog a variety of different post types and formats! My tags list: https://glen-test.tumblr.com/list

💌 If you have any suggestions or additions to this list, let me know!

🕒 Last updated: 2023-12-27

Keep reading

[nyctocodes]

Hello, I have been away from html/css for a few years and I recently learned that blend modes and masks have been added aaaand..... my interest is severely piqued...

[nyctocodes]

◍ magnesium theme.

Links: preview | install | features

Magnesium is a theme for the lovers of angled corners, blocky styles, and neatly constructed layouts; plus a flashy sidebar design.

Features: header theme, floaty elements, sidebar sections (description + featured + progress bars + updates + navigation), searchbar, 250/400/500px posts, styled search & tag pages

Credits: cappuccicons, feather icons, NPF images fix v3.0, NPF audio player, photosets.css, customaudio.js, Style-my-Tooltips, Truncate note counts

[nyctocodes]

1.0.1 - added more code to hide the "Go Ad Free" button and suggested blogs within the dashboard. 1.0.2 - added code to hide the second dashboard tab 1.0.3 - re-hid the updated Lives suggestion window. I didn't change the code but rather added onto it, in case some people didn't get the update yet.

Tumblr 2023 Layout - cleaned up

I personally am open to a new look, but my god is it cluttered 😵 I'm rusty with coding, so lemme know if there's any bugs.

How to add:

Add the Stylus Chrome or Firefox extension.

While on tumblr's homepage, click the extension's "Write style for: www.tumblr.com/" button.

Paste this code into the top area (replace any default code already present)

Delete any part of the code that hides something you want (e.g. the Explore button).

Save!

[nyctocodes]

Tumblr 2023 Layout - cleaned up

I personally am open to a new look, but my god is it cluttered 😵 I'm rusty with coding, so lemme know if there's any bugs.

How to add:

Add the Stylus Chrome or Firefox extension.

While on tumblr's homepage, click the extension's "Write style for: www.tumblr.com/" button.

Paste this code into the top area (replace any default code already present)

Delete any part of the code that hides something you want (e.g. the Explore button).

Save!

[nyctocodes]

🎧 NPF audio player ⋆

On Tumblr's process of changing everything to NPF, staff has added metadata (details) to NPF audio inserts to reflect what was originally entered when it was posted. Unfortunately, they're unstyled for now, so I wrote a plugin that mimics the appearance of Tumblr's legacy audio player.

☆ Features:

functional play/pause buttons with customizable sizes and colors

[optional] preceding labels, e.g. "Track:" / "Artist:" / "Album"

[optional] placeholder text for empty fields, e.g. "Untitled Track"

shows album cover image if its comes with one, with customizable dimensions

customizable player padding and background color

☆ How to install:

https://gitlab.com/tmblr-npf-audio/s#preview

[nyctocodes]

Page 04: POKÉDEX 98 

Preview  | Code

An about page that is also a Pokédex mini web application, based on the Pokémon Yellow interface design. Why? Because is having a Pokédex in your blog is cool! (｡◕‿‿◕｡)

Read the customization guide here.

Features:

A full functional Pokédex. You can search any of the current 1000+ existing pokémon. 

Set your dream team easily.

Change the language of the Pokédex.

About section.

Tags/Links section.

Extra section that can be used for more information, terms of use, FAQ, etc.

Toggle Light/Dark Mode and customize it, too.

Add background music and switch on/off.

Select between ultra retro or modern sprites for your team.

Responsive on mobile.

More info:

This page retrieves all the pokémon information through the services of the Poke API. The Poke API is a full RESTful API linked to an extensive database detailing everything about the Pokémon main game series. This means this page does not have coded any information of the pokémon, instead every time you search a pokémon the app connects to the API and gets the information back.

Notes:

This is the first version of the page, but in the future I will add more functionalities! Recommendations are always welcome.

The Pokémon nformation is dependant of the Poke API database, so if there is some information missing or wrong the Pokédex page can’t control that.

Make sure you have Javascript enabled on your blog.

Credits on code.

Inspiration came from Pokémon first generation games and also the page was inspired by @nyctothemes beautiful first generations themes! Check them out!

Please reblog/like if using! :3

[nyctocodes]

I started to revisit a theme wip from back in October where I used the NPF variable to grab a user's default/mobile theme. I ended up with a combination of the dashboard popup and the blog view.

I thought it was really neat that the variable includes the last updated timestamp, so I'm trying out an active indicator above the user's avatar

While I'm not sure if I can get a fully functioning theme with the NPF variable yet (although I'm close), it's still opening a lot of new doors for theme features that I've been wanting to try for a while now!

Also, I ended up making an alternative version of the script I made for recommended blogs to display a blog's followers which I will probably incorporate into this theme somehow

[nyctocodes]

◍ neon theme.

Links: previews [ neo / eon ] | install | features

Neon is a contained theme which features animated floral features and other decorative elements, creating a maximalist, scrapbook-like design — Perfect for those who want a more artistic blog theme!

Features: contained theme, decorative elements, animated flowers (3 different petal shapes), big title, user profile (icon + status + another title), searchbar, 250px/400px/500px posts, styled search & tag pages

Credits: cappuccicons, feather icons, iconsax icons, NPF images fix v3.0,   Griddery v2.0, photosets.css, customaudio.js, Style-my-Tooltips, Truncate note counts

[nyctocodes]

Premium Theme - Spring Again

Live Preview ⬩ Static Preview Buy £20

A fully responsive, art journal inspired grid theme. Recommended for photo blogs but also supports all blog types.

Sidebar features

polaroid image

music player

filmstrip (showing either your own photo uploads or your top Tumblr posts)

scheduler box

social media box

extra info box

Blog features

fixed post size

custom fonts and font sizes (compatible with google fonts)

auto link pages with 3 additional custom links

dashboard style captions

supports new post types

search bar

responsive layout

Notes:

theme user guide here

basic HTML knowledge is recommended to edit the sidebar contents

[nyctocodes]

How to implement the filtered tag posts on your blog theme

You can use this to prevent posts with certain tags or your own custom tags from showing up on your blog. The filtered posts will have an overlay obscuring the post itself with an explanation of why the post was filtered along with the option to view the post if you'd like.

This post is not going to explain the details, you'll be just provided an instruction to implement this on your blog. You need to be familiar with HTML, CSS, and JavaScript before proceeding with this.

Adjust the HTML element on your theme

This is required. We only need to add this variable from Tumblr called {TagsAsClasses}. Depending on your theme, the structure may differ. Put this variable where you render each post in your theme. This will look something like this (after {block:Posts})

{block:Posts} <article class="posts {TagsAsClasses}">ㅤㅤ {block:Text}…{/block:Text} {block:Photo}…{/block:Photo} {block:Quote}…{/block:Quote} … </article> {/block:Posts}

This variable basically adds a class based on your tag on the post. We need it because it gives us the flexibility of which posts need to be generated with the spoiler overlay (so it won't be applied to all of our posts).

After that, put this code below the <head> tag:

<meta name="text:Posts Filter Lists" content='"spoiler", "spoilers","warning"' /> <meta name="text:Posts Filter Button Text" content="View post"/> <meta name="text:Posts Filter Warning Text" content="This post contains filtered tags"/>

The code above will be shown on your theme options on the customize page so you can easily change the filter lists, button text, and warning text.

Add the styling on your theme (CSS)

Add this external resource link element and style tag to your code before the </head> tag

<link rel="stylesheet" href="https://static.tumblr.com/5ojoydj/RNCrgggbp/filter.min.css"> <style id="filtered"> :root { --post-filter-bg-color:255,255,255; --post-filter-text-color:17,17,17; } </style>

Implement the JavaScript

Please add the code below before </body> tag.

<script src="https://static.tumblr.com/5ojoydj/QQ9rggi38/filter.js"></script > <script> var spoiler = new filterTags({ filterList: [{text:Posts Filter Lists}], showTags: true, filterButton: "{text:Posts Filter Button Text}", filterTextWarning: "{text:Posts Filter Warning Text}" }); </script>

The default comes with pre-defined tags such as “spoiler”, “spoilers” or “warning” above. You can replace it from the theme options with whatever tags you want. Just be careful with the formatting! Don’t forget the quotation mark and comma!

Once everything is all configured and done. You can just tag your posts as “spoilers”, "spoiler" or "warning" (without the quotation mark) and the filtered post will be automatically implemented on your blog theme!

And here’s the live preview if you want to know what it will look like!

Let me know if you experience the issue!

[nyctocodes]

Page 03: “Heart of Cards” Character Page

Preview 1 | Preview 2 | Preview 3 | Code

On July 6, 2022, Kazuki Takahashi was found dead off the shore of Nago, Okinawa, Japan. He was the mangaka behind the universe of Yu-Gi-Oh! and creator of the trading card game. 

This page is a tribute to commemorate and celebrate his work, as the trading card game made an huge impact on millions of people in the beginning on the millenium and I myself I’m a huge fan of franchise and the game. Hope you enjoy this work! 

Be sure to read the instructions guide before using this page.

Features:

Show off your characters in a fun way with Yu-Gi-Oh! cards!

Dynamic card generator: All cards are dynamically generated, no html knowledge needed!

Customize your card however you want: you can choose card type (based on real Yu-Gi-Oh! cards), attribute, level, stats (attack and defense).

Add rarities to your cards: You can choose from 3 rarities effects that will show up when you mouse over your cards. Based on actual effects of card rarities from the Yu-Gi-Oh! trading card game.

Use spell and traps cards to display items and locations.

Card Filtering: filter your cards by any attribute!

Light and Dark version: choose the style you like best.

Mini about section.

Responsive layout.

Notes:

Remember to have Javascript enabled on your blog to use this page.

The page includes all types of Yu-Gi-Oh! cards that exist in the actual format except Tokens, Pendulum and Link cards, because these cards have different attributes than regular monster cards.

If you have questions send me a message.

Credits on code.

Mr. Takahashi brought happiness to millions of people around the world through his creation, and we, the fans, believe that his legacy will remain forever. Farewell, Kazuki Takahashi.