nyctothemes - Tumblr blog

[nyctothemes]

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!

[nyctothemes]

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!

[nyctothemes]

🎧 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

[nyctothemes]

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

[nyctothemes]

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

[nyctothemes]

◍ 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

[nyctothemes]

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

[nyctothemes]

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!

[nyctothemes]

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.

[nyctothemes]

Walk and talk with us.

We need your help! We’re running a little survey about blog customization, and we would love you to take part and fill it out. We can’t tell you too much more beyond this, so why not open it up and find out?

Pressed for time? Don’t worry! It will only take five to ten minutes, but be quick—it’ll only be open for a few days.

Any data collected as part of your participation in this survey will be handled according to the Tumblr Privacy Policy.

[nyctothemes]

seafoam about | about page by sage

preview & code / active preview inspired by mac os, all sections are draggable! (more info below the cut)

features:

made to match my seafoam theme

header that matches seafoam, includes day/night toggle, follow button, an updates tab, search bar, & scroll to top

chat section for quotes, testimonials, or an faq/etc.

projects with adjustable percentages & a list section for to-do’s or rules/etc.

main section with an image, blog url/title, 4 info stats, links/blogs/socials, a description, and likes/dislikes

customizable: colors & color gradient, border radius, body font, title font, & font size

responsive design

i’ve provided a customization guide below the cut but everything you need to know about editing this page is written in the code

terms:

reblog if using

do not touch the credit

view all terms

credits listed in the code / credits page

please consider supporting me ♡

Keep reading

[nyctothemes]

Theme: Faults

Static Preview: Preview  Get The Code: Pastebin / Pasted

Keep description at a three sentence length for best look.

:: Theme Features ::

Post Width: 500px Only

Sidebar Image: 300px x 180px

Nav Icon: 100px

5 Custom Links

Follow & Dash Links in Nav Bar

Regular Tumblr Controls will show on Permalink Page

Post Margin Input

Description Size Input

16 Body Font Options

14 Title Font Options

Dashboard Styled Captions

Page: Filter (About Me Page)  / (Inspiration for Design)

Static Preview: Preview   Get The Code: Pastebin / Pasted

As of 2022, be sure to contact Tumblr Support for the use of Javascript on your blog pages! 

:: Page Features ::

Image Size: 250px x 300px

3 Custom Links

8 Social Media Links

Profile Section

Bio or small paragraph section

Easy Coloring Section

:: Additional Info ::

Go to my credits page for sources

Optimized For Google Chrome

Responsive via Desktop Only

Keep Credit Intact

Do not steal, claim, redistribute, tweak, or use as base code

Check out @solocodes for more free & premium themes + resources!

Support me on Ko-fi!  Join my discord server here.

Reblog or Like for support. 

[nyctothemes]

seafoam | premium theme by sage

$5 — static preview & code / right sidebar / live preview inspired by mac os - featuring a draggable sidebar and dock

features (more info below the cut):

header with blog icon, url, home/ask/archive links, day/night toggle, updates tab, follow button, slideout search bar, slideout explore menu, scroll to top, & blog title

footer inspired by the mac os dock with up to 10 extra links & a tumblr dashboard link - footer position can be toggled to fixed or show on hover

draggable sidebar that can be toggled left or right with blog title, url, uploadable image, & custom description

toggle: hover dock, right sidebar, day/night button, updates tab, & explore menu

customizable colors & color gradient, post margin, body font, title font, font size, and blog title (for original posts)

540px posts, 0px, 5px, & 10px border radius options, responsive design

everything can be edited in the customize panel -  there’s no need to change anything in the code

terms:

reblog if using

do not touch the credit

view all terms

credits listed in the code / credits page

please consider supporting me ♡

Keep reading

[nyctothemes]

Hi Tumblr Staff,

I recently migrated my website and blog from a static site generator for GitHub Pages to Tumblr a couple of months ago and have been enjoying the experience thus far. I also have been using the Beta version of the new editor on the website.

My blog is a programming-centric one, and I often like to include code snippets to show and/or explain something I come across. Unfortunately, it appears that the beta editor doesn’t support this (previously, I thought it was a mistake in translating Markdown).

Do you have plans to add this functionality to the editor?

P.S.: I was recommended to ask about this topic here from a support request (#8976329).

Hello, @marquiskurt!

This is a fantastic idea. However, we don’t quite have the time or resources at the moment and have a considerable to-do list to attend to. Though we think this is a neat idea and would advise you to keep watch on @changes in the meantime.

Thank you, as this is great feedback and helps us fine-tune Tumblr to hellsite perfection. Keep it rollin’, and have a good day.

Love,

—Cyle (Tumblr Engineering)

[nyctothemes]

◍ fluorine theme.

Links: previews [ yoi - rai - aya ] | install | features

Fluorine is the product of my indecisiveness turned into a strength — enjoy multiple ways of styling your header, blog navigation, sidebar, and posts (all post sizes + multi-column support).

Features: header (full-width, half-width, or none), sticky or fixed navigation, 6 custom google fonts, searchbar, avatar, sidebar image as icon or normal, 250/400/500/700px posts, up to 3 columns, 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

[nyctothemes]

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

[nyctothemes]

[ Theme #09: Vermilion ]

Live Preview + Static Preview + Code

A fansite theme with a built-in F.A.Q., navigation, and members sections. To learn how to customize the theme, please read the theme guide!

Features:

Day and night button that will stay in the selected mode until it is turned off. 

A dark mode option is also available for those who prefer a dark color scheme on their blogs instead of the default light color scheme. When you toggle the option on, the day and night mode button will change according to the scheme you are using.

Header image that can be full-screen or half the height of your screen.

Sidebar with five sections for your about me, current project, updates, schedule, statistics, and blog status. You can choose to show or hide each individual section, depending on what kind of content you want to display.

Semi-responsive. It is responsive across desktop screens, but not on mobile.

Like and reblog buttons

Supports most (if not all) NPF post types.

Searchbar

Keep reading