So this evening I've been working on a way to make it easier to add filters to blog pages without JS. This is mainly an alternative to isotope, commonly used in icon, media, downloads, and portfolio pages. CSS only solutions, especially like this, can be intimidating to look at even if you're not new to CSS.
I'm hoping this will take care of the bulk of the work/the more complicated parts so that you can make more complex custom pages without the user having to wait for permission to use JS.
Here's a simple example with just display: none added to the CSS
And on my preview page, I've used the same code and added multiple filter groups and some CSS animations.
If you are familiar enough with HTML and CSS, you can try out what I currently have, but keep in mind you will still need to write most of the HTML and CSS yourself. I want to make a more detailed guide so that it's easier to use soon!
This is a writer-friendly Tumblr theme, (it supports all post types, can easily be used with the writer features toggled off), with 2 sidebars and a Google font of your choosing. Two layouts available: boxed or minimal. Included: Optional dark mode and update tab, two optional progress boxes. Supports NPF posts.
A single-column tumblr theme with an option between a sidebar (left or right) or a header, with a google font of your choosing. Optional dark mode and update tab is included. Supports npf posts.
Lune — a responsive navigation/tag, custom page theme.
preview | download code (GitHub)
A choice between a header or a sidebar, and buttons or underlined tags. Some HTML/CSS knowledge is preferred if you’re going to be using this. Instructions are all in the code.
This is a single-column Tumblr theme with an option between a sidebar (left or right) or a header, with a Google font of your choosing, as well as a separate choice of font for the custom title. Optional dark mode and update tab is included. Supports NPF posts.
A simple custom page with a quote, description and link section alongside a 180px sidebar icon that has a hover effect. Dark mode integrated. pairs well with most of my themes!
Please note: Basic HTML/CSS knowledge is preferred if you’re going to be using this. Instructions are all in the code. Please read my terms before using.
A single-column tumblr theme with an option between a sidebar (left or right) or a header popup launcher, with a google font of your choosing. Optional dark mode and update tab (within the popup) is included. Supports npf posts.
3 different themes/styles included (instructions for that is in the code). Some HTML/CSS knowledge is highly preferred if you’re going to be using this. With dark mode and search bar. Instructions are all in the code.
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})
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).
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!
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
