sadthemes

[sadthemes]

Can’t answer messages so sorry! Electricity is faulty.

Haha 2024 and my home’s electrical wiring is poopoo so i haven’t been on my pc bc of constant power trips. But hello everyone!

[sadthemes]

Thank you for making these themes!!!!!!!!!!!!!!

im crying ty <3 i promise to make mo

[sadthemes]

rndm by @sadthemes | preview - code

this is my first npf-esque theme. it's weird to edit. i'm sorry. i wanted this theme to be simple AF. basically background colors are random. more info in code.

[sadthemes]

hi i used to use one of your themes, but it suddenly stopped working. like when i went to the customize theme page, it would just be a white screen. and my blog page itself wouldn't open, it just got redirected to like the mobile version if you understand. it was the 私は退屈だ theme. anything i can do to fix it? i really loved that theme i don't wanna change it haha<3

its possible you did not enable custom themes in your settings

[sadthemes]

how do i use the themes? as in, how do i input them on my tumblr prof?

tumblr.com/customize

the top of the sidebar will say "custom theme: edit html"

delete current code, and paste the theme code you want to use in that whole area.

if you don't see that option, you're gonna have to go to your blog settings and enable custom themes there!

[sadthemes]

paper by sadthemes | preview + code

inspiration from stationary things! the aesthetic was to go for a crafty look, with sticky-note like links, and posts. photos look like printed pics, caption usernames look like stickers. asks are on grid paper, and your icon looks like torn paper. there are tons of options to customize. additional theme info in code.

[sadthemes]

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.

Keep reading

[sadthemes]

Ikonate

Fully customisable and accessible vector icons. All free and open-source.

[sadthemes]

How to change your ask box colors part 2

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:

Please let me know if you have any questions or if you want me to add anything to this tutorial series!

[sadthemes]

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.

Weiterlesen

[sadthemes]

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.

full list of credits here.

[sadthemes]

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

Keep reading

[sadthemes]

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.

👉🏼 Installation / Usage / Customization 👈🏼

[sadthemes]

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!

👉🏼 Installation / Usage / Customization 👈🏼

[sadthemes]

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.

Smooth scrolling.

[sadthemes]

Custom like and reblog buttons

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!

Keep reading