New color styling options with [TH] Nodes

What is TH Nodes anyways?

If you're reading this post, then I think it's fairly likely that you are already using the awesome node styling options that come with the TH nodes add-on. Just in case you're not, here's a quick recap for you.

[TH] Nodes is an add-on that let's you define new layouts for your nodes, specifically in a grid layout, and add custom individual styling to each node (or children nodes) to really spice up and differentiate your content. And the best thing about it is that it is free with any ThemeHouse style, so if you are here, you probably already have access to it, even if you didn't know it. 😉

For those of you that don't already have it and want to learn more, you can do so here. Now, on to the good stuff.

Sounds great, so what's the problem?

So, assuming that you are already using Nodes or that you have just finished learning more about it, you know that it allows you to define custom background images as well as background and text colors. You can do it per node, which let's you really differentiate the styling for your content like we did in the image here.

However, what if you want to add more subtle styling to your nodes instead of a full background color? What if you want to change some text colors, such as titles, but leave the rest of the text alone? If you have had these questions yourself, you're not the only one. I have been running into the same issues when working on client projects, and wondering how we could make our lives easier when doing these unique customizations.

Get to the feature already!

Okay, okay - so I promised a new feature and it's time to deliver. Unfortunately, Nodes doesn't help us in this regard. Well, until now that is. With the help of my buddy Jon, also here at ThemeHouse, we came up with a solution that we love using the power of CSS variables to make developing these kinds of unique styling situations not only more do-able, but in a way that requires very little work for you to implement. The image here is of the new feature in action.

In the video below, I've explained our new feature that we've implemented to handle these situations, as well as a brief tutorial on how to get it running. So check out the video, download the update, and try it out on your site. And hey, if you come up with some really cool styling, feel free to share a picture of it in the comments section below. 🙂