tumblr themes + resources

How to automatically change icons based on user input

Adding icons to custom links (whether through text options or using {block:HasPages}) can be tricky when you can’t guarantee what users will want their links to be.

Using some attribute selectors, we can change the icon based on the content in the href attribute.

I’m using Font Awesome for this tutorial, but any icon font that uses unicodes in pseudo elements (:before or :after) will work!

My HTML:

{block:HasPages}

<div class=“links”>

{Block:Pages}

<a href=“{URL}”><i class=“fa fa-link”></i> {Label}</a>

{/block:Pages}

</div>

{/block:HasPages}

By default, it will be the link icon. I can change this icon if a user is adding a tag as a link by selecting any link with “/tagged” in its url:

.links a[href*=“/tagged”] i:before {

content:’\f292’;

}

A breakdown of why/how this works and more examples:

Let’s start with the first part

.links a

This is selecting all of the anchor tags inside of our links container

.links a[href*=“/tagged”]

is selecting the href attribute that is inside of a link.

If I were to do

.links a[href=“/tagged”]

it would only select links with that exact match.

by adding the *, i’m selecting any link that contains /tagged somewhere in the link. this way we can select *all* tags, not just one tag at a time.

.links a[href*=“/tagged”] i

This is only selecting the i elements inside of links that contain /tagged. This is important because otherwise we would be selecting every i element, but we only want to change the tag links.

.links a[href*=“/tagged”] i:before

and lastly we are selecting the :before pseudo element that Font Awesome uses to add icons.

What else can I do with this?

You can do a lot with attribute selectors! You could repeat this process for other links like discord, twitch, about pages, faq, etc.

Here is how you would target external links:

a[href^=“https://”]:not([href*=“tumblr.com”])

or if you wanted to include the possibility of http:// you could do either of these:

:where(a[href^=“https://”], a[href^=“http://”]):not([href*=“tumblr.com”])

or

a[href*=“://”]:not([href*=“tumblr.com”])

You can read more about attribute selectors here!

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!

CSS scrollbar tutorial

as requested, here’s quick tutorial on how to make custom scrollbars.

So, a custom scrollbar is only available in webkit browsers (Chrome, Safari, and Opera). This means that any other browser will not display the scrollbar and will just use the default.

In your css, you’ll need, you’ll need to add the pseudo-element ::webkit-scollbar.

A pseudo element is used to style parts of an element. It essentially allows you to create a new type of element that you wouldn’t be able to use normally. this is different from a pseudo class, which adds styling to a specific conditions of an element (like :hover and :nth-child).

So, for a custom scrollbar, you’ll need to include ::webkit-scrollbar to set the width of the scrollbar you’re making. You can also set the height if you want to style a horizontal scrollbar.

 Please do not make your scrollbar tiny. While it’s a common aesthetic in some themes, this makes it very hard to use. You don’t want your users struggling to navigate your theme.

Then you can use ::webkit-track . the track is the background/area that your scrollbar can go up and down.

::webkit-thumb is the part of the scrollbar you click and drag.

With ::webkit-thumb, you can add pseudo classes to it to style it whenever someone hovers over it and/or selects it.

Examples under the cut!

Keep reading