Focus comes equipped with everything you need to produce a professional-grade website. I personally guarantee that you’ll be positively amazed by how easy it is to put your best foot forward with this product.

In this article, you’ll be able explore the styles at your disposal when using this Skin.

Lists

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! This Skin comes equipped with killer list styles¹, and your job is simply to choose the one that is best-suited to your particular needs₂. The first type of list is an unordered list, and it looks like this:

• List item 1
• List item 2 with a link to nowhere
• 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

Sub-Headlines

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 Skins, you can create similar sub-headlines without having to do any styling on-the-fly. All you have to do is wrap your sub-headline text in <h2> tags (or select “Heading 2” in the WYSIWYG editor), and BOOM, you’ll get results like you see here.

You can also use Heading 3 (<h3>) and Heading 4 (<h4>) for sub-sections as needed.

Sub-section Heading

The heading above is a third level heading, or <h3>. It’s not as significant as a sub-headline, but it is certainly useful for delineating a separate thought or idea.

Specialty Heading

Occasionally, you may need to differentiate between parts of an article sub-section. The fourth level heading, or <h4>, can be useful in these circumstances, but the most important thing here is simply the fact that your Skin supports this kind of text formatting.

Blockquotes

This is one area where our Skins have no peers…

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

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 Skin 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 Highlight Boxes

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

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

In most cases, the box class is useful outside of the content as well, so be sure to check your Skin’s documentation to see where you can use this handy formatting class.

Images

Finally, be sure to take a look at this Skin’s image styles.

Official Thesis Skins from DIYthemes use these tools to deliver Design and Content options that provide unparalleled control over your design.

Mathematically Precise Design Options

Whether you’re tweaking fonts, sizes, colors, or even your layout, you’ll benefit from the rigorous precision of Thesis Skin design options.

Finely-tuned Typography

For years, Thesis has been regarded as the standard when it comes to gorgeous typography and pixel-perfect design. And now Thesis Skins have cranked this legacy into overdrive.

With golden ratio typography baked right in, our Thesis Skins apply detailed tweaks to your entire layout whenever you change fonts or font sizes.

These precise mathematical adjustments ensure everything in your design perfectly accommodates your chosen customizations.

Powerfully Simple Color Controls

Thesis Skins come with easy-to-use color pickers that provide big power in a little package.

Thanks to these incredible font and color tools, you’ll be able to experiment like never before.

And in no time at all, you’ll be designing like a pro because Thesis will mathematically optimize your customizations to ensure that every change you make is a good one.

Content & Display Options: Show, Hide, and Edit Design Elements

Display Options make this stuff easy!

Our Thesis Skins have condensed this exercise down to a single click:

Instead of fiddling with code or waiting on a designer to make these changes, you now have the power to customize the display of your entire site within seconds.

Beyond this, some elements have settings and properties you might want to change. You can do this quickly and easily from the Content & Display Options.

For example, let’s say you don’t want to show the date your posts were first created; instead, you’d like to show the date your posts were last modified.

Post Date options

To achieve this, you can simply edit the Post Date options as shown above. And you can even change the text that displays before the date as well as the formatting of the date itself!

Nobody else offers Thesis Skins, WordPress themes, or child themes that score as high on Google Page Speed, rank as well in search engines, or boast such a small footprint in terms of both file size and number of HTTP requests per page.

In short, Thesis Skins not only make your site fast, but they also set you up to dominate the search engines by taking advantage of the latest technology.

For example…

Markup Schema

Here at DIYthemes, we compromise NOTHING when it comes to search engine rankings, and that’s why Thesis includes complete markup Schema support.

The following Schema are supported by default:

• Article
• BlogPosting
• CreativeWork
• Event
• NewsArticle
• Product
• Recipe
• Review
• WebPage

Need a different Schema? No problem—it’s easy to add any type you want to Thesis.

All official Thesis Skins from DIYthemes come with a default Schema like BlogPosting or Article.

But here’s the clincher—you can override this default setting by selecting a specific markup Schema on any post or page!

Bottom line: You can employ any kind of Schema you want—there are no limits!

Thesis is the easiest, most comprehensive, and most reliable way to implement markup Schema on your website.

On top of that, typography has significant subconscious effects on your site’s visitors. For example, the fonts you choose convey both an attitude and an aura about your site and what you have to offer.

Perhaps even more important, the size and spacing of your typography are directly responsible for the feeling your visitors will have as they dig in to read your content.

In the same way that a clean, open floor plan in a house produces “zen-like” feelings in its inhabitants, properly sized and spaced typography can produce those same feelings in your site’s visitors.

With this in mind, the question becomes:

Does your typography produce positive emotions in your users and invite them to dig into your content, or is it holding you back and preventing you from resonating more strongly with your audience?

How Does Your Theme Handle Typography?

Thanks to a trend Thesis started way back in 2008, many premium themes now come with font options that give you some measure of control over your site’s typography.

But there’s a HUGE catch here.

Generally speaking, most themes ship with default typography settings that are at least semi acceptable.

However, if you change fonts or font sizes anywhere in your design, then you must also change associated line heights and spacing in order to maintain a precise mathematical balance.

This mathematical balance is responsible for producing the “zen-like” feeling (or its negative counterparts) in your site’s visitors.

No other theme makes these critical adjustments when you change fonts or font sizes away from the default settings.

Thesis, on the other hand, will adjust the typography and spacing of your entire layout whenever you change fonts or sizes, thereby ensuring a positive subconscious response in your visitors.

With Thesis, you needn’t fear any negative consequences when you experiment with different typographical settings on your site.

We know you want to experiment with your design and find a unique combination that reflects you or your business. With Thesis, you can do it!

Better still, all of our Thesis Skins are equipped with comprehensive golden ratio typography integration, so you’ll be able to tweak your Skin design with superior precision.

You can create, experiment, and have fun, and Thesis will ensure that your customizations are as mathematically precise as the default settings that shipped with your Skin.

How awesome is that?

This is a WordPress featured image with a caption.

This is a WordPress featured image with a caption.

This is a WordPress featured image with a caption.

This is a WordPress featured image with a caption.

This is a WordPress featured image with a caption.

This is a WordPress featured image with a caption.

The image above is a WordPress featured image for this post. By default, it will be aligned flush left with no text wrap, but you can select any alignment you like in your WordPress media gallery.

In addition to WordPress featured image support, Focus comes with 4 default image alignments:

• flush left with no text wrap (typically the default)
• centered
• left with text wrap
• right with text wrap

Here’s a flush left image with an inline caption:

Check out this cool caption style, which is built into Focus!

To add this nifty caption style to your post, simply switch to the text editor, and then wrap your caption text like so:

<p class="caption">Your caption text here.</p>

And here’s the same image from above with a default WordPress caption:

This image also has a caption that’s defined in the WordPress media gallery.

And this next image is centered (also note that text does not/should not wrap around centered images):

You can also add a frame to any of your images; here’s that last image—still centered—but with a frame:

Adding frames is easy, too. When editing your post, switch to the text editor, and then add a frame class to the image you want to frame:

<img class="aligncenter frame" src="your_image_url" alt="your image alt" />

This paragraph is here to show you how text will wrap around an image that is aligned to the left. Notice how the image is surrounded by whitespace to avoid any unsightly collisions between the text and the image.

Of course, you also need to see what a right-aligned image looks like. The text will wrap around this image at a safe distance to ensure easy reading.

It is a constant battle to ensure that elements will render correctly, and even when you think you’ve gotten everything worked out perfectly, you may find that Safari, for instance, doesn’t know what to do with an unordered list of encoded text:

• Safari
• may not
• render this
• worth a damn

And even when you’ve gotten all that figured out, you still have to ensure that the <pre> tag is styled properly and renders consistently across a wide range of modern browsers.

code {
	font-family: Consolas, Monaco, Courier, sans-serif;
	font-size: 14px;
	line-height: 1em;
	color: #050;
}