SAD THEMES

unkei2 theme by snake | code (raw)

my windows 98 theme, remastered with actual buttons and a few other things. no rights reserved. features under the cut.

Ikonate

In part one of this series, I covered some simple changes like black/white and using hue-rotate to change the colors. With some extra steps, we can change way more than just that.

This is aimed at FAQ pages and anything else where you’re putting your own ask box somewhere, but I will make a tutorial for themes as well!

So first you’ll need 3 things:

A container

A wrapper for your iframe

The ask box iframe

This is how my HTML is set up:

<div class=“ask-container”> <div class=“ask-wrapper”>    <iframe frameborder=“0” scrolling=“no"height=“190” src=“https://www.tumblr.com/ask_form/{name}.tumblr.com” style=“background-color: transparent; overflow: hidden; height: 190px;” id=“ask_form” contenteditable=“true” data-text=“Enter text here”></iframe>    </div> </div>

Here’s the CSS:

.ask-container {    background:linear-gradient(to left, red, orange, goldenrod, green, blue, purple);    padding:2px; } .ask-wrapper {    mix-blend-mode:hard-light; }    

What I’m doing here is making our container have whatever background I want, then making the wrapper with the iframe inside of it essentially act as an overlay that picks up the color behind it. 

Here is the result:

Using some of the methods I covered in part one, we can also make semi-transparent ask boxes to go over images, like this:

I changed my background for my container to an image instead of a gradient and added some more padding.

Then for the iframe, I applied the filters like in part one:

#ask_form { filter: invert(84%); }

You can also do this with a white semi-transparent background by going for a lower percentage.

If you play around with mix-blend-mode, you get results like this too:

Tutorial: Tippy.JS Tooltips

A tutorial on how to implement Tippy.JS tooltips into your themes and pages.

The written tutorial starts after the cut, since there is a lot of text, and I don’t want to clog your dashboards! I hope you will find this tutorial somewhat helpful.

theme fourteen: camellia  — a Windows 11/Mac OS mashup grid theme with a slide-out sidebar. made for codingcabin’s opposites attract challenge!

previews: grid preview, one-column preview

install: pastebin, github

features and options:

slide-out sidebar with a 500px sidebar image, space for description, extra navigation links, and a search bar

footer with space for up to three custom links, weather status, local time and date.

optional updates tab. if you don’t turn this on through the customization panel, it won’t show up.

one, two, or three columns

post sizes: 300px, 350px, 400px, 450px, 500px, 540px

optional background image

hide or show captions and tags on index page

ten body font options, font sizes from 12px to 18px, and all colours customizable.

responsive for both desktop and mobile devices

notes:

Tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the toggle options on and off to get them to work properly.

the navigation section in the sidebar has space for up to five custom links and as many Tumblr page links as you want. however, to get them to show up, you need to make sure the “Menu Navigation Section” option is enabled in the customization panel. 

icons are from phosphoricons; to change the icons, go to the phosphoricons site, find the name of the new icon you want, and input the name of the new icon into the relevant text fields in the customization panel.

This tutorial will go into what a li is, post note specific lis, and how to customize/utilize these post note lis.

Iconsax icons by vuesax

ICONSAX is an abundant library consisting of over 900 SVG uicons with soft corners. I went through all of them and wrote a lightweight script that allows you to add any icon with just one line of HTML. I’ve also curated a complete icon cheatsheet so you can search for any icons you want to use, and preview them before adding them to your project.

400+ Free Line Icons by Ahmed Agrma

A library containing almost 500 icons in a cute, minimal style. I whipped up a script that allows you to add any icon to your project with just one line of HTML like an icon font, rather than the full SVG code. I’ve also created an accompanying icon cheatsheet so you can quickly preview/browse for anything specific before using it!

Azure Page 45

A responsive about page with a claymorphic design.

Preview | Code: here or here | Guide

Features: Responsive layout. Claymorphic design. Scroll to top button. Infinite space for text. Many custom features.

Resources:

How to create Claymorphism using CSS.

Claymorphism generator.

Remix Icon font.

Font Inconsolata.

Font Satoshi.

Tippy.js tooltips.

Remove tumblr app button on mobile.

Scroll to the top button.

I’ve been asked for a tutorial for like and reblog buttons many times, but I never saw the need to, as this stackoverflow answer does such a good job of explaining the most difficult parts. However, since it takes a bit of styling to make the buttons look the way they do in my themes, and I recently reached a follower goal, I decided to post the complete codes, ready to be copy and pasted into a theme. Enjoy!