Quick Style Sampler

Just a test headline

Along with a bunch of test content that will be used to fill up space and make it look like there are some paragraphs here.

And then once that’s done, we’ll add another paragraph with a more detailed explanation of what this page is about. For example, I might add more descriptive text and even bold it so it grabs your attention. Pretty cool, huh?

Focus WordPress Theme

By presenting information inside a Focus Card, you can grab a visitor’s attention and direct it precisely where you want it to go.

Any content you add will be formatted like a regular Post or Page; you can even include a list for maximum impact!

  • Bullet 1
  • Bullet 2
  • Bullet 3
Thesis Theme System
Modular templates and design for WordPress

Cards are a perfect format for displaying products, courses, books, downloads, opt-ins, or any other “thing” you’d like to advertise on your website.

And thanks to different linking and formatting options, you’ll be able to create Cards that look and behave exactly how you want!

Focus Cards rely on Thesis Theme System technology.

Check out Thesis →

So many cool things about the YT Perf Plugin…where do I even start?

It’s G—like, really G.

Just get it. And get faster.

This theme comes equipped with everything you need to produce a professional-grade website. You don’t get an ID before you publish the damn thing! You actually have to have some content before you can have a shortcode for that content… I personally guarantee you’ll be positively amazed by how easy it is to put your best foot forward with this product.

Find out all the styles you’ll have at your disposal by choosing a theme from the sidebar, and then check out how the styles affect the content of this article.

How about a cascade of headings?

Heading Size 1

Heading Size 2

Heading Size 3

Heading Size 4

This is my primary Modular Content.

What if I have a second paragraph and test’n apostrophes?

  • Does this work
  • With list markup
  • Or will this throw it off?

And how about a final paragraph?


What if we have an element inside a bar? Can we make it sticky?

Lists are easy for readers to digest, and because of that, most people love ’em. With that in mind, you oughta start using more lists in your posts!

Cupcake face!

This theme comes equipped with three killer list styles1, and your job is simply to choose the one that is best-suited to your particular needs2. The first type of list is an unordered list, and it looks like this:

  • List item 1
  • List item 2 with a link
  • List item 3
    • Nested list item 1
    • Nested list item 2
  • List item 4

The second type of list is an ordered list, and it looks like this:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

The third and final type of list is called a definition list. Although they are less common, they can be useful for presenting meanings, relationships, or simply for clarification. Check it out:

Just kidding—we’re not going to test those because normal humans aren’t going to use them.


Cupcake face!

Sub-headlines have already been used twice in this post…did you spot them? The first one says “Lists,” and the second one says “Sub-Headlines.” Thanks to the flexibility of our themes, you can create similar headlines without having to do any styling on-the-fly.

All you have to do is wrap your headline text in <h2> tags, and BOOM, you’ll get results like you see here.

Oh, and guys? We need some centered text on this one, too.

If you’re using the Rich Visual Text Editor (which I absolutely do not recommend), you need to switch to the HTML viewer and enter your text between <h2> tags. When you’re done, click on the Update button, and you can continue writing your entry.

Super sub-heading

If you’re using the regular old text-based editor (cheers if you are!), then you could write a line that looks something like this: <h3>Blockquotes</h3>, and you’ll end up with something that looks like this…


This is one area where my themes have no peers…

Every theme worth its weight in bandwidth comes with some sort of pre-defined blockquote styling, but how many themes do you know of that come with three different blockquote styles? This is one area where my themes have no peers, and you can use these blockquote styles to your advantage as you liven up your posts for your readers.

Really quickly—we gotta drop a caption in here.

What happens if we break out a div for some serious pop?

Will the widths work? The max width will probably be too large on huge screens, but for most use cases, it might be just right. Let’s find out!

The quote above is what is referred to as a “pullquote,” and you can create two types of these in your posts—one will be aligned to the right, and the other to the left. Use the following structure to make it happen: <blockquote class="x">, where x is replaced by either “left” or “right,” depending on which side of the text you want your pullquote to display.

Standard Blockquote

And naturally, no theme would be complete without the standard old blockquote, which comes out looking like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.

To use these, simply wrap your quoted text in <blockquote> tags.

Alerts, Notes, and Content Boxes

Every great Skin should come with savvy alert and note classes for maximum content pwnage.

Sometimes, you may even want to include more than one paragraph, so the really cool Skins will be sure to account for both.

But sometimes, you only need a single paragraph to get the job done, and you can see that in action right here.

Once again, we explore the styles included with this Skin and find that we have a versatile note class.

Perhaps you’ll be able to get away with whatever markup you like in here…or perhaps you won’t.

One thing is for sure—these notes won’t go unnoticed.

Content Boxes are super pro.They can even include more than one paragraph, and they’ll still look boss.

Input Styles

And then what do we do about this?


Link Button

Content Extensions

This is a basic content extension. It mainly exists for testing purposes; namely, to see how basic extensions and breakout behavior work in different Content Presentation Modes.

Of course, we can’t really test without a few paragraphs, so some of this text is going to drag on in a boring manner.

Will I make it out to disc golf today? Rhetorical. I’m testing software updates right now, but only for the next 45 minutes or so. After that, it’s off to the course!

Image Styles

This should be alt text

Try out these simple captions, and you’ll never go back!

Just a regular left-aligned image with some generic caption text that follows:

This should not be centered, fam.

How about an extended image test? Here’s one with no frame:

Olympic sculture in front of the Georgia Dome in Atlanta

How far can we extend this caption text? Can we add some contextual CSS to pwn it in various settings? Let’s have a look…

And here’s one with a frame:

Olympic sculture in front of the Georgia Dome in Atlanta

And here’s a captioned WP post image:

Olympic sculture in front of the Georgia Dome in Atlanta

Epic toe pointing is epic. Are links epic, too?

Next, a smaller captioned WP post image:

F’n caption, duuuude!

Image Extension Test Area

Empathy Map
Empathy Map

That’s it—just keep typing, and pretty soon, we’ll have enough stuff to make this a reliable test page.

Let’s add some content.

I’m going to combine some of this stuff, and we’ll see if these Editor controls work.

Keyboard Styles

Does your Theme support styles for the <kbd> element? If so, they’ll appear below.

Thesis CSS Editor shortcuts:

Save CSS

  • Mac: command + s
  • Win: ctrl + s


  • Mac: command + f
  • Win: ctrl + f


  • Mac: command + option + f
  • Win: ctrl + shift + f

Find next

  • Mac: command + g
  • Win: ctrl + g

Find previous

  • Mac: command + shift + g
  • Win: ctrl + shift + g

1 This is the first footnote.

2 How about a second footnote? This explains a lot, doesn’t it? Now, how do you get back to the main text once you’ve arrived at this footnote?

3 This is the third and final footnote. Where’s your styling now, mister?

You don’t get an ID before you publish the damn thing! You actually have to have some content before you can have a shortcode for that content…