By the way, in addition to the CSS only filters, I also have a CSS only carousel in the works. This one is less complicated than the filters so I don’t have a guide or generator for this one currently. Until then, feel free to look at the source code to see how I made it if you want to experiment with it.
As with the filters, this is an alternative to JS so you don’t have to wait for approval to use it in your custom blog pages. It has some limitations compared to carousel scripts, mainly a lack of “active” state for slides.
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!
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:
Hi! I think I'm asking too much here, but I'm going to try it anyway lol So, I've created this nice emblem to my book club, and I wanted to code a page where we could point the mouse over the elements of the emblem, and read information about that element, just like an interactive infographic. I tried to create an image map, and stylize the tooltip. BUT, I can't stylize the text inside the "title" in HTML (italics and etc). Do you have any suggestions on what I could do?
Do you know of any tutorials that cover tricks people have discovered for manipulating the tumblr controls? For example, I swear I saw one once that covered how change the color of the 'online dot' on the messaging bubble, but I cannot find it again. I've been trying to manipulate these things for days!
You can also just use css if you don’t want major changes. You can use any of the classes you find by inspecting the tumblr controls. I’ve used .tmblr-iframe and .iframe-controls-container before.
hi! thank you so much for answering my question about ids vs classes but i have a small follow-up: when/what should i use ids for? i've been using them for like containers and wrappers but i don't know if that's a good practice.
You can use an ID anywhere as long as you’re only using them once per page. There’s nothing really wrong with that, but I guess something to consider is why you’re using it.
If you’re using it to style it as a container and nothing else, then it doesn’t *have* to be an ID. It is functioning the same as it would a class, so you’re not doing anything different by giving it an ID. While it doesn’t serve a purpose here to use an ID over a class, it doesn’t necessarily break anything either.
It might be better to use semantic elements instead of IDs depending on what your code is. I prefer using <main> and <section> for my containers (and then <header>, <footer>, <aside>, and <article> for my other theme elements). It’s clear what they’re for without adding an extra class or ID in there for identifying them.
With that being said though, your code will still work fine if you keep IDs as long as they’re unique!
hi! I was reading your common mistakes made in themes and was wondering if you could explain a bit about using classes vs. ids?
Sure! So classes and IDs are used in very similar ways.
They are both used to identify elements instead of their tag name (like div, header, etc). Unlike some tags (like h1, a, or blockquote), IDs and classes don’t add any special styling by default, but you can use these selectors to add CSS to those specific elements.
The main difference is that an ID is unique and can only be used once per page. So if you have multiple blog articles, you *can’t* give them all the ID #post. But you can give them the class .post.
For a loose comparison, people can have the same name, but they can’t have the same fingerprints. A class is like an element’s name, which can be used to identify it, but it can also be found on other elements. An ID is like their fingerprint and will only identify that specific element.
So what happens if you use an ID more than once?
IDs being unique serves a purpose. If you want a link to take you to a specific element, you can link to the ID of that element. For example, if you have something with an ID of footer, add #footer to the end of your url.
This isn’t possible with classes, even if you only use a class once. This also won’t work if you use an ID more than once.
Otherwise, CSS treats IDs and classes the same, so this might make it seem like it’s not a huge deal. However, JavaScript does NOT treat them the same, and it can and will mess with your scripts.
When do you use them?
If you don’t need an ID for a link or script, it’s safer to use a class. As I mentioned above, classes work the same way as IDs do in CSS, so if you just need to style something, an ID isn’t necessary.
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!
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!
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.
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!
