{ saved posts portal }

Hinata Shouyou

every pixel background i’ve made for my blogs

If it wasn’t obvious enough, I’m personally a huge fan of header themes. However, the header aesthetic could be annoying when it comes to browsing on your blog. You might be going down 20 pages trying to find a post on your blog and still gotta scroll past the huge ass header first.

You might think of Tumblr’s {block:IndexPage} or {block:HomePage} variables. However, they will still display the item on /page/2 etc, then it will come back to the problem I mentioned above. So here’s what you can do to display a certain item on the FIRST page of your blog only.

For example, this is the homepage of my upcoming theme:

And it will be really bothering to scroll past this full-screen header when browsing through my blog. Here’s what you can do:

First, you only need to add simple CSS like this:

And there’s what the HTML part looks like:

So when you’re not on the first page of the blog, the header is not going to show.

or when you’re on a separate page (ask, submit, custom pages, etc.) the header is not going to show up either.

just in case this blog disappears, know that I did not leave on purpose. I wouldn't abandon ship.

[ Theme #05: Rose Wood ]

Preview 1 + Preview 2 + Code

An archive-inspired theme!

Features: 

Responsive

Grid layout (two or three columns)

Full post will be shown when clicked on!

Day and night mode (will stay in night mode until you turn it off)

Like and reblog buttons

One photo photosets

Supports page links

Updates tab

Options:

Infinite scroll, manual load or pagination

Updates tab icon choices (notification, megaphone, bell, and more!)

Rounded corners

Show or hide the full post for chat, audio and/or text posts on the index page

Dropdown menu (4 custom links)

Show or hide random link

Show or hide tags

Dotted squares seamless backgrounds.

Before you read this, please be aware that I will not be answering questions asking me how to apply this to your particular theme. Some basic understanding of theme structure will help you a long way. 

COLOR PALETTE MASTERPOST by forbiddenforest

So today I felt like sharing some useful websites that provide pre-made color palettes (left side), as well as sites that allow you to create custom ones (right side). They can be used for graphic design, themes, art, interior design, or just something pretty to look at.

Adobe Kuler (Explore)

Chromaa

Color-Collective

Just Jaimee Daily Color Inspiration

Design Seeds

Adobe Kuler (Create)

Color Scheme Designer

Color Palette Generator (paste the URL of an image and it will automatically generate a pallet that matches the image)

Color Hunter (upload an image and it will automatically generate a pallet that matches the image)

Colllor

hey yall its me the Art Mom™ to help you shade pretty

rule 1: DO NOT SHADE WITH BLACK. EVER. IT NEVER LOOKS GOOD. 

red- shade with a slightly darker shade of purple

orange- slightly darker and more saturated shade of red

yellow- i think like..a peach could work but make it a really light peach

green- shade with darker and less saturated shade of blue or teal

blue- shade with purple

purple- a shade thats darker than the purple you’re using and maybe a little pink (MAYBE blue)

pink- darker shade of red

white- a really light lavender or blue..or i guess any really light colour??

black- okay listen dont use pure black to colour anything unless you want to leave it with flat colours because you cant really shade black lol

grey- a slightly darker shade of purple or blue (less saturated)

brown- slightly darker and less saturated shade of purple or red

I made some Balls of Colour to go with Art Mom™’s post:

After the success of my first font pairing post, I decided to make another one! I hope you guys like this one too and that it’s just as useful.

download links:

Ocean Twelve + Candara

Josephin Sans + KG the Fighter

Autumn in November + Montserrat

Mission Script + Geo Sans Light

Black Diamond + Calibri

DK Lemon Yellow + Soymilk

Chasing Embers + Baskerville

Buttercup + Source Sans

Midnight + Clear Sans

　✦✧✦　⋯　Green and Pink Dividers.

　Made By Me⠀⠀〜　⠀Free2U.

　🐚𓃉⠀⠀Can recolor.　⠀Don't repost.

⠀⠀﹕⠀⠀⠀Rotate 180 degrees when necessary.

Honeybee Icon Font by ThemeHive

Free icon font. Released on July 24th, 2018.

details.

1130 unique icons.

Outlined and filled icons.

Externally hosted for automatic updating.

Start using Honeybee!

notes.

I’d like to thank @annasthms for the amazing script and for saving me weeks of manually adding each icon to the page. This release would have been postponed for a very long time if it wasn’t for you. ❤️

SaturnIcons - a custom font by Saturn Themes

One week later and after many, many hours spent on this every day, it’s finally done and it was worth it.

about this font:

551 icons you can use on your themes!

2 in 1 - Linear & Filled icons

food, animals, regular UI icons, there’s a bit of everything!

get started: Installation, Usage & Icons’ List

What is Cappuccicons?

Cappuccicons is a merge of my previous two fonts, Honeybee and SaturnIcons. It came to replace these fonts with new and upgraded icons, and it has most icons from both fonts (except repeated ones, of course).

Using Honeybee or Saturnicons? Both fonts will remain working, though the icons lists will be gone. You can use Cappuccicons’ list for reference, as most icon names have remained the same.

Download and Install

www.cappuccicons.com

All instructions are available on the page.

Available for graphic design!

You can now download all 1078 icons in PNG and SVG formats.

Download links are available on the page.

Font information

LAST UPDATED: 02/20/2019

Hi guys, so you may have noticed Tumblr has a brand new audio player and I, personally, am very happy with the color it has, especially when it just doesn’t match with the theme’s color scheme.

So, this is what your audio player originally looks like:

First, you have to install jQuery to your theme. If you haven’t already, add this snippet before the </head> tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Then, all you need to do is add this code before the </body> tag: (remember to change color hex to whatever color you want!)

<script> $(document).ready(function() { // audio player var $audio = $('iframe.tumblr_audio_player'); $audio.load(function() { $(this).contents().find('head').append('<style type="text/css">' + '.audio-player { background: #bdc2e8; color: #fff !important; }' + '.audio-player .audio-info .track-artist { color: #fff !important; }' + '</style>'); }); }); </script>

and here’s the result:

By the way, if there appears to have a huge gap under your audio player, all you need to do is add a css style to your audio player like this:

iframe.tumblr_audio_player { height: 85px; }

Hopefully this could give your blog better audio posts!

For theme makers who use static previews for their themes:

The script only works when your site’s domain is the same as the iframe’s domain. That means, if the blog url of your static preview page is different from the blog url where you copy your code from, it’s not gonna work on your static preview page. So how do we fix this?

First, create a demo audio post on your preview blog (where your static preview page is located). You can make it a private post if you want.

Then, go to the post’s permalink, and copy the post ID number:

Finally, go to your static preview page’s code. Find your audio post in the code, change the url in your audio post to your preview blog’s url, and change the post ID number to the one you just copied.