Thyme - Available Custom Classes

How to use Custom Classes

The Thyme theme has some custom classes that you can add to block elements to do certain things.  

Here is an example:

You can add a class of is-style-offset-up to an image and it will make that image have a negative top margin to pull that image up on the page.  Here is what adding that class looks like inside of WordPress:

And here is how this will look on the live website:

What are the available custom classes?

light-text

If you're adding text over an element that is darker and your text is too dark, you can add a class to that text or even an entire container block to light-text and all the text inside of that block will be white.

narrow-content

If you have content that you don't want to be as wide as the space it's in, you can use the class of narrow-content and it will make it narrower.

is-style-offset-up

This class is great for images like I've shown in the example above.  You can also use it on a narrower container and pull that entire container up also using the is-style-offset-up class.

boxshadow

Would you like to put a boxshadow on images?  Add a class of boxshadow and it will automatically add a shadow around your images.  Will also work on containers.  You can see this live on the features page here.

subtitle

If you'd like to simplify some of your headings and make them smaller understated text, you can use the subtitle class.  Here is what this looks like:

(where is says Owner/CEO)

border

You can add a gray border around any block with the class border.

no-margin

If you have a heading that needs the margin removed, you can add the class no-margin and it will remove that for you.

smaller-title

This class will make your post titles a bit smaller if you need them to be.

is-style-overlay

This class is used for the green background for post titles on the AB Post Grid.  You can remove this or add this in any of these blocks.

Can I combine classes?

Absolutely!  Just seperate each one with a space.