Evolve Hack:
Refine Media Grid Text

In this article, I’ll describe a particular issue I often needed to solve in Evolve Authoring and provide code that you can copy and paste to solve it too.

To apply the code, you’ll need to refer to my article Applying Your Hacks, and for full context of why hacks are necessary, you can refer to Hacking Evolve Authoring.

I once needed to use the Media Grid Text component in Evolve Authoring but I found that while you could input both a heading and a body for each grid item, it wouldn’t particularly style them differently. So I made this hack to make the hierarchy a little clearer.

Add a Media Grid Text component

The code below is extremely simple. All it does is restyle each grid item’s title to be different from the body text. Feel free to tweak it further if you need – there’s not much there to break!

Add this styling code according to my articles Hacking Evolve Authoring and Applying Your Hacks.

/* Adjust Media Grid Text */
/* Updated: 04/08/2020 */
.ev-media-grid-item-title {
  font-size: 1.3em !important;
  margin-bottom: 0.3em;
}

That’s it!

While that worked for me, that doesn’t mean it will still work for you. Evolve updates often, so always be sure to test the code before you use it and any time you export. Evolve may have even improved this feature such that it’s no longer necessary by the time you read this article.

However, if you’re trying to apply it and it doesn’t work, let me know if you modify the code to work and I’ll update this article.

I’d love to know if any of these articles helped you.
Share what you’re building or ask me a question on Threads or somewhere else.

Here are some other things you might like

• Extracting the extension from a filename string
• Register a new file type in Obsidian
• Transparent React Native iFrames/WebViews