tumblr themes + resources

Making a featured tags section

ALT

I’ve gotten a few questions about this, so I’m going to explain how I’m putting together the featured tags section on my (still in progress/yet to be released) dashboard inspired theme.

This uses JS with v1 of the API, the HasPages block in the theme HTML, and some CSS.

Instead of relying on text options for tags, this theme is grabbing pages based on if it is a tag url or not.

ALT

While I technically have 4 links here, /About is not a link to a tag, so it gets removed.

This uses the API similar to how @fukuo did featured posts, but with vanilla JS instead of jQuery.
How it works:

1. Select only the links in the featured tags container that include /tagged/ (using a CSS attribute selector for [href*=“/tagged”])
2. Grab the tag name from the url
3. Add that tag name to the API url
4. Use the returned data to add the text, total posts, and any images from the most recent result of that tag
5. Style/formatting with CSS

I have the JS and CSS here with some comments on what everything is doing so far. I will update this as I make more progress on the theme, so let me know if you run into anything that I need to update!

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:

1. A container
2. A wrapper for your iframe
3. 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!

How to change your ask box color

This idea was first mentioned by seraphymns several years ago, but they have since deleted their blog. Since it was hidden behind a read more, the tutorial is gone. 

I was able to find some pieces of what they did, so I’m going to share some variations and similar methods! Keep in mind this will also mess with the icon image, but I don’t think that takes away from the ask box function.

Black/white:

#ask_form {
    filter: grayscale(100%)!important;
}

result:

black:

#ask_form {
filter: invert(100%) grayscale(100%)!important;
}

result:

Other colors:

by using hue-rotate, you can edit the degrees here to create basically whatever color button you want. Here are some examples:

filter: hue-rotate(60deg); - turns it purple

hue-rotate(200deg)  - orange

Other methods:

You can also try mix-blend-mode for similar results. However, you will need to apply this to your container, not the ask box itself. This is trickier on regular themes, but can work well with FAQ pages or other pages where you’re making your own ask box.

mix-blend-mode: difference;

will give you this:

If I come up with any other examples I’ll make a part 2!

Common theme mistakes

When I was first starting, there were several things I missed and that impacted the functioning of my earlier themes. 

Using an ID for posts instead of classes

Why this is important: IDs can only be used once on a page. Adding the same IDs for posts could cause issues for your theme, though you can use something like {PostID} that generates a unique ID for each post. If you’re unsure, it’s safer to use a class.

Forgetting to add {block:Date} or {block:NoteCount} around your post info

Why this is important: these blocks have an important purpose. It makes sure that this info will only show if your post has a date or note count to display. If you don’t have these blocks, this info will (incorrectly) display on any extra page you on your blog, including your ask and submit pages. 

Keep reading