Focus Text Formatting and Content Styles

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 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 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

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.

If the Skin you’re viewing supports the box callout class, this paragraph will have a special background color that makes it stand out from the rest of the content on this page.

Bonus: You can control the colors of your callouts in the Design Options.

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.

1 If this Skin supports footnote styling, this will appear as 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?

71 comments… add one
  • Matt Aug 20, 2013 @ 13:20

    What an awesome site full of pertinent information! I’m afraid to read too much more as my head may implode with the abundance of knowledge!

    • Chris Pearson Aug 20, 2013 @ 13:41

      You know what we need more of around here? Sarcasm.

      • Godhammer Aug 20, 2013 @ 18:12

        And snark! Very dry, with olives—a lot of olives.

        Like, at least three olives.

  • Derek Aug 20, 2013 @ 14:34

    You got pull quote action. WHAT?

    • Chris Pearson Aug 22, 2013 @ 8:36

      Little known fact: Thesis has included pullquote styles since it was first released in 2008.

      • jaced Aug 26, 2013 @ 8:52

        Pullquotes and alert styles may even predate the Thesis name, no? Late 2007 or so?

        I’d love to hear how many people here know what Nitro is. ;D

        • Chris Pearson Aug 26, 2013 @ 9:14

          Well…I’m not even sure what Nitro is 😀

          But I do know that I first introduced pullquotes back in September 2006 with the Cutline theme (which, by Q2 2007 became the most popular theme EVER on WordPress.com).

          Every theme I’ve introduced since has included pullquotes in some form or fashion.

        • Mike Feb 26, 2014 @ 9:56

          “Nitro’ isn’t it a button on a fast motorbike that injects ‘Nitrous-Oxide’ into the fuel-injection system to blast-off?? As my Buell was a rocket in any case I didn’t bother

  • Sybille Aug 24, 2013 @ 2:10

    Matt, it’s “abundance of information” which only turns into knowledge once you have processed it :-))

  • Danielle Parsons Aug 26, 2013 @ 16:51

    Looking forward to being able to integrate the GVO autoresponders into Social Triggers. I have a list built with that hosting and marketing tools company that is based in the San Antonio, Texas area. Really like what I see and am going to use this skin from now on!

    • Chris Pearson Aug 26, 2013 @ 16:59

      Very cool, Danielle!

      The Social Triggers Skin is set up in such a way that you can mix in email forms from just about any provider and easily integrate them into the design.

      Simply add a class, thesis_email_form, to your <form>, and then add a different class, input_submit, to your submit button, and boom—100% integrated styles!

  • Simon James Oct 25, 2013 @ 6:10

    Several things are missing when I look at the site on my Samsung Galaxy S2:
    – Promo bar
    – Header profile icons
    – all of the sidebar boxes

    … or is this just a different skin showing up on my mobile (it says Classic Responsive Skin at the bottom).

    • Chris Pearson Oct 25, 2013 @ 7:57

      Simon, you are viewing the Classic Responsive Skin. You can switch the Skin with the yellow dropdown selector at the top of the page.

      • Lee Oct 28, 2013 @ 22:07

        I found you by way of Derek… and am very interested in Thesis. I am not finding as much information that I would like though, in determining whether or not I should buy. I’ve looked high and low, but no where do I find any sort of ‘contact’ or support address… How can I email someone with questions?
        thanks, in advance 🙂

        • Chris Pearson Oct 29, 2013 @ 8:00

          Hi Lee. On our pricing page, we include contact information in the FAQ section (located below the pricing table).

          Feel free to email us at diythemes@gmail.com with any questions you may have.

          • Anne Wayman Feb 25, 2014 @ 10:34

            over time I’ve found diy support to be excellent… just sayin’

  • halim Nov 1, 2013 @ 13:21

    Can I know whether this theme support article in arabic font?

    • Chris Pearson Nov 1, 2013 @ 14:47

      Halim, you can use any fonts you want in any of our Skins, and I’m sure your Arabic text will never have looked better 😀

  • Carlo Nov 7, 2013 @ 4:19

    Hey Chris

    Would this be a great starting theme when i would like to accomplish a layout like the DIY homepage with all the full width background colors, large headings etc.?

    But in contrast to the DIY homepage it will be responsive 🙂

    Thanks

    • Chris Pearson Nov 7, 2013 @ 8:24

      Carlo, I have no way of knowing which Skin you were viewing at the time you left your comment, but I’d recommend the Classic Responsive Skin (and its 1-column layout option) for this purpose.

      In the future, we’ll release an add-on Skin that will look more like the DIYthemes.com layout, but for now, Classic Responsive is a solid place to start.

  • Ken Nov 25, 2013 @ 15:28

    Skinned alive!!

  • New Guy Nov 26, 2013 @ 4:43

    I know Thesis is great! I’m beginner wordpress developer, so I don’t know how to install or configure thesis themes. Please anybody give me a link for some lesson or tutorials.

    Thanks in advance!

  • Ember Feb 25, 2014 @ 8:51

    What does preformatted text look like (stuff in <pre> tags)?

    • Chris Pearson Feb 25, 2014 @ 10:37

      Ember, check out this page to see any Skin’s styles for handling <pre> and <code> elements.

  • Ray Mar 3, 2014 @ 10:45

    Chris, Can I use the Pearsonified image spot to put a free ebook opt in page type thing?

    • Chris Pearson Mar 3, 2014 @ 12:58

      Ray, the Pearsonified Featured Item spot only accepts images or videos, so if you want to include custom code (like an email signup form), you’ll have to go another route.

      This is easy with the Pearsonified Skin (or any of our other Skins, really), as you can simply hook your custom content into the page in that exact location.

      For specific help on this, please visit our Customer Support Center.

  • Mark Davis Mar 25, 2014 @ 4:59

    Beautiful. So last night, I fell into the looking glass and converted to this skin. Very nice!

  • Jim Driver Apr 23, 2014 @ 2:57

    It’s a great step forward but I’m missing a couple of things. For example, is it possible to change the sidebar to the left on the Classic skin? If so, how?

    • Chris Pearson Apr 24, 2014 @ 10:06

      Jim, yes, you can easily change the layout of the Classic Responsive Skin by using the design options (specifically, the layout and dimensions settings). Check out this video for a quick look at some of the things you can do with the Classic Responsive design options.

  • Faizan Asad May 25, 2014 @ 9:06

    the best framework i ever used

  • Richard May 30, 2014 @ 21:14

    I am just looking and getting ideas to switch my current web page and blog to a thesis blog. I appears you have a lot of happy customers and a fine product. I like that…. Don’t know if this makes any sense, but which skin is the best suited for real estate?

  • Chris Pearson Jun 12, 2014 @ 8:31

    Ronnie, you can use CSS to target elements in your footer and position/align them however you want. Visit our members-only forums, and then check out the CSS Customizations area where you’ll be able to interact with Thesis experts who do this kind of thing all the time.

  • simplydolicious Aug 19, 2014 @ 20:47

    Will we be able to use other Google fonts aside from the ones that come with it? I saw some cool font combinations that I want to try.

    • Chris Pearson Nov 14, 2017 @ 8:36

      Yes! All official Thesis Skins from DIYthemes include the best Google Fonts implementation in the business (engineered for optimum performance).

      As of Thesis 2.5, you can choose from 100 default Google Fonts. If you don’t see the font you want in the default list, have no fear! Thesis makes it easy to add any other font you want.

  • Umar Aug 25, 2014 @ 10:28

    I love thesis framework. awesome fonts style.

  • Sam Sep 5, 2014 @ 5:31

    Hi Chris,

    Thank you so much for the Pearsonified Skin! It’s totally awesome and I love every bit of it 🙂

  • Vern Lovic Oct 13, 2014 @ 18:35

    I have the regular Thesis theme and looking to grab this social triggers skin. Is the image in the feature box area customizeable for size, or is it locked into those dimensions that you have as the sample above? I want this for my aimforawesome (.com) Hawaii site and as you can see, I use a wide image for it. Would like to keep that image if possible! Cheers man…

    • Chris Pearson Dec 29, 2014 @ 9:26

      Vern, you can include any size image you want in the Social Triggers Feature Box. The image you see here on the demo site is simply an image I included in my Feature Box post (and also aligned to the right).

  • Benjamin Price Oct 15, 2014 @ 20:00

    This looks much better than the free theme I’ve been using. Once I see how this months traffic and affiliate stats look, I hope to take the plunge and update to thesis running promo.

    • Chris Pearson Nov 14, 2017 @ 8:38

      You won’t regret it.

      Thesis Skins are as refined on the inside as they are on the outside, and that’s why they’re the best-performing WordPress themes available today.

  • Ashutosh Jha Oct 21, 2014 @ 10:14

    Where can i buy this ??

  • Jalaja Bonheim Nov 26, 2014 @ 14:24

    Hi, I run a small non-profit and we need a new website. Would Thesis be suitable for that purpose? It seems more blog-oriented. Thanks.

    • Chris Pearson Dec 29, 2014 @ 9:31

      Great question, Jalala. Thesis is suitable for any kind of website, not just blogs.

      In fact, thanks to included custom templates, Thesis Skins are probably better for non-blog sites (and especially business sites!) than just about any other WordPress theme.

  • Datj Vid Dec 13, 2014 @ 7:43

    Its just incredible…!
    Thesis has brought revolutionary wave in webdev.
    Thanx Chris and thanx to ur team, too.

  • Ed Przybylski Jan 6, 2015 @ 20:02

    Thesis is an absolutely awesome theme!!

  • Ed Przybylski Jan 6, 2015 @ 20:04

    By the way I was just trying to figure out how all these posters got their pic to show up here –is that through gravatar?

    • Chris Pearson Jan 8, 2015 @ 11:20

      Hi Ed, the images are indeed placed through Gravatar.

  • John Feb 9, 2015 @ 12:08

    Hi Chris,

    Thank you so much for the Pearsonified Skin! It’s totally awesome and I love every bit of it

    • Chris Pearson Nov 14, 2017 @ 8:39

      My pleasure, John. Oh, and here’s a little bonus—as of version 1.3, the Pearsonified Skin includes full WooCommerce style support!

  • Eshwar Feb 23, 2015 @ 9:34

    I would definitely like to try this.

  • Michael C. May 12, 2015 @ 11:49

    I have been using Thesis for clients websites as well as my own for the last year or so, and what impresses me most is the flexibility of the framework so that I can deliver a website that clients will be proud of.

    • Chris Pearson Nov 14, 2017 @ 8:43

      Great point about the flexibility of Thesis Skins, Michael.

      We design all of our Skins in a way that makes them suitable as standalone designs or as the basis for highly customized designs.

      It takes a lot of careful thought and dedicated effort to craft a CSS framework that is easy to modify, but we’ve been doing this for over a decade and have gotten pretty good at it 😀

  • Bilal Ahmad Dec 11, 2015 @ 6:26

    Wow this is so beautiful and clean skin. Just loving its simplicity.

  • Wojtek Dec 16, 2015 @ 15:30

    Really nice.

  • Paul Dec 19, 2015 @ 14:13

    Hey Chris – just watching your tutorial videos on BYOBwebsite. Very helpful.
    Are you able to use Leadpages Leadbox code in the Effectus Action Box?

    • Chris Pearson Nov 14, 2017 @ 8:06

      Yes! You can drop code like this into the Action Box or into any Text Box (which you can place anywhere you want in your design!).

  • Max Dec 30, 2015 @ 5:23

    Hey there,

    I am about to start my first “serious” website. Now I finally got to know where all these neat looking websites come from … most of them seem to be built on this theme. Can’t wait to get started!

    Best,
    Max

    • Chris Pearson Nov 14, 2017 @ 8:44

      I may be biased, but it sure seems like all the best sites run Thesis 😛

  • Gururaj Feb 28, 2016 @ 8:07

    Thesis is an absolutely awesome theme. I love every bit of it. Thanks to chris and his team for bringing this out. I am definitely thinking now to change my website theme to this!

  • jettero Mar 29, 2016 @ 22:32

    It is possible to put a vertical menu on left or right column?

    • Chris Pearson Nov 14, 2017 @ 8:14

      Yes, you can add menus a variety of ways (via Widgets, custom code, etc), and each of these ways is compatible with Thesis Skins.

      Most people simply use the WP Menu widget to do what you’ve described here.

  • Jayleen Apr 17, 2016 @ 12:05

    Does Flex include all of the same functions as Effectus? I’m interested in the capabilities of Flex but don’t want to lose what I have with Effectus!

    • Chris Pearson Nov 14, 2017 @ 8:17

      Jayleen, each Skin offers different functionality, so not everything that’s in Effectus is available in Flex.

      In your case, the functionality you like may indeed be offered in both Skins, but since I don’t know precisely what you like about Effectus, I can’t say for sure.

  • Hajar Oct 9, 2016 @ 4:34

    What an awesome framework. So fast loading even though I am in the the country with the worst internet connection. Wish to have one.

  • Ahmad Apr 4, 2017 @ 12:44

    This is a very wonderful theme, all the published article will be double cool on this theme.

  • Lisa Aug 24, 2017 @ 3:11

    I have a question – are all the skins and websites mobile iPad responsive?

    • Chris Pearson Nov 14, 2017 @ 8:28

      Yes! All official Thesis Skins from DIYthemes feature responsive designs that have been optimized for speed.

      Most designs are crafted around aesthetics alone; our designs are crafted around performance, good looks, and easy customizability!

Leave a Reply

Your email address will not be published. Required fields are marked *