MD Style Guide: How to format your posts with MD helper classes

Sure, you have the greatest idea in the world for your new blog and are ready to share your innovative thinking with everybody else — of course they’ll see you’re different than the rest.

Setting up a blog isn’t very difficult and you can go pickup any cheap, lousy theme to get started. And why not?

The design of your blog truly doesn’t matter much compared to what you’re actually writing about. After all, writing something real is why you’re here.


If you’re here to write, it doesn’t hurt to know a thing or two about formatting your posts.

The way you structure posts helps people better understand what you wrote and that will aways be more important than annoying popups and giant email forms.

By breaking ideas down into sections with headlines, images, quotes, bullet points and links, you help readers understand your writing and even find older posts.

Alongside all the shiny features of Marketers Delight I love to talk about, MD was ultimately made for just writing.

By combining your writing with basic HTML and custom HTML classes from Marketers Delight, you’ll have an easier time writing properly formatted blog posts.

Getting Started Tips

  1. Marketers Delight comes with an Visual Editor style but I prefer to disable it (Edit profile in your WP dashboard) and use the Text editor which gives you complete control over the formatting of your posts and won’t get the extra spacing the Visual Editor leaves in posts.
  2. You can use HTML in widgets, posts, custom templates.
  3. These HTML codes are useful to use to make your content fit perfectly into the responsive design—especially to avoid the sloppy horizontal scrollbar on mobile.
  4. If you already have a basic understanding of HTML and CSS I encourage you to go through the Marketers Delight theme style.css file and see the entire list of classes.
  5. Of course, adding your own styles and tweaks with child themes is highly encouraged to customize your design even further.
  6. If you want to know what HTML or CSS code is used on anything on this page, just use your browser’s Inspector tool to get it (usually right click > Inspect)

Let’s get started…

Warm-up: Text Photo Covers

Best known in MD as a widget called Content Spotlight, you can paste this little code snippet into your post editor to make one for yourself:

<div class="mb-mid"><a href="#link" class="image-overlay block-double text-center text-white caps no-border" style="background-image: url('');"><small class="display-block mb-half">Subtitle</small><span class="small-title">Title</span></a></div>

How to use the post editor in WordPress

a drawback of using some code in the post editor (not all code) is that it needs to be written on one line

…all you need to do is swap out the image URL and text. Pretty easy to figure out.

Look, I get it, that’s not the prettiest thing in the world to look at. But if you give it a chance you’ll actually like what you can achieve with little blocks of code like this.

If you find yourself confused and intrigued, browse through this post to learn more.

By the end of it you’ll have a better understanding of the different classes you can use to not only remake things like the Content Spotlight in posts, but create custom anywhere on your site.

Email Forms (and other forms)

One of the best features of Marketers Delight is the way it handles email forms, meaning you can place email forms all throughout your site without touching a line of code.

If you’ve ever used a service like MailChimp, ActiveCampaign, or AWeber then you know how horrid the codes they give you to work with are. Unfortunately if your service isn’t yet built into Marketers Delight you’ll have to stick with their form codes for now.

Email Form Shortcode

If you use the Marketers Delight Email Forms system all you have to do to place email forms in your posts is to use the convenient email form shortcode!

This is convenient whether you’re connected to an email service or use a custom code — any email form you create in Tools > Email Forms can be output with this simple shortcode:

There are even some extremely useful attributes you can apply to override values and customize your email forms further:

  • title=”” — Set the title attribute to adjust the headline that shows at the beginning of your form.
  • desc=”” — Use this to describe more about your newsletter here.
  • bg_color=”” — Set a background color using a color code.
  • bg_image=”” Set a background image to any URL.
  • attached=”” — If set to 1, the email fields and submit button will attach to each other. If set to 0, each field will show on its own line.
  • submit_text=”” Change the submit button text.
  • text_color=”” — Set to white for white text, set to dark for dark text. You can write your own CSS class for this as well if you want a custom text color. Any value you enter here will be prefixed as a CSS class like text-{text_color}.
  • classes=”” — Add any custom classes to the email form for more customization.

Here’s a working example:

Custom Email Form Code

It turns out some 95% of the code email service providers give you is simply not needed to make your signup form work. If you’re even a little code-savvy you can strip out that excess and add a few helper classes into MD to style your own email forms.

Generally, a form is structured like:

  • A surrounding <form> tag
  • Name + email fields, and submit button
  • Some hidden input fields required for validation

Below is a barebones example of what an email form with MD helper classes looks like and what you should model your own custom codes after (also adds those neat little icons to the name and email fields). Are you in shock how little that code can actually be?

<form method="post" action="#formaction" class="email-form clear">
	<input type="name" name="name" class="form-input form-input-name" placeholder="Enter your name...">
	<input type="email" name="name" class="form-input form-input-email" placeholder="Enter your email…">
	<button class="email-form-submit form-submit">Join Now!</button>

	<!-- Hidden fields here -->

Marketers Delight outputs the leanest possible version of your form codes so your source code stays neat.

Different email service providers require different hidden fields, so be very carful not to remove any <input> tags that look important.

Always be sure to perform a test email signup with your own email after formatting your code!

Email Form Helper Classes

If you take note of some of the email forms around Kolakube, you’ll notice some forms display each field on their own line, and some forms (like in the footer) condense all fields into one vertical line. For example:

Apply any of these classes to the <form> tag to manipulate the fields in your email form:

  • form-fullEnsures all fields (inputs, buttons) are 100% full width are on their own line.
  • form-attachedIf you only have one input field, like forms that only ask for email, use this class to attach the input field and button together.
  • form-attached-2If you have 2 fields, such as the name and email field, use this class to attach the input fields and button together.

Gravity Forms

I’ve built in some styling for Gravity Forms (it’s not all perfect yet) and creating a basic Contact me form works out of the box.


You can create columns of content with a very basic and easily maintainable HTML structure. MD supports upto 5 columns and each column width is calculated based on the available space in the parent container using the columns-x class (x = 3 for 3 columns, etc.).

Column 1

A 3 column, responsive block right within my posts. No shortcodes!

Column 2

A 3 column, responsive block right within my posts. No shortcodes!

Column 3

A 3 column, responsive block right within my posts. No shortcodes!

Each column will align itself directly next to each other with no spacing by default. You can adjust the spacing that shows between each column by also applying a columns spacer class, such as columns-single or columns-double. See example below.

3 columns with 52px of space in between:

<div class="columns-3 columns-double">

    <div class="col col1 mb-mid">
        <h3>My Title</h3>
        <p>Some paragraph text</p>

    <div class="col col2 mb-mid">
        <h3>My Title</h3>
        <p>Some paragraph text</p>

    <div class="col col3 mb-mid">
        <h3>My Title</h3>
        <p>Some paragraph text</p>


2 columns with 26px of space in between:

<div class="columns-2 columns-double">

    <div class="col col1 mb-mid">
        <h3>My Title</h3>
        <p>Some paragraph text</p>

    <div class="col col2 mb-mid">
        <h3>My Title</h3>
        <p>Some paragraph text</p>


Formatting Text

Formatting classes style large text blocks and ensures proper spacing between headlines, paragraphs, lists, images, and other elements.

Marketers Delight has 2 different classes you can use for formatting text:

  1. format-text-main
  2. format-text-sec

For more wider-width elements like the content box in MD or any Page Lead, you’ll want to use format-text-main for larger font size and spacing.

format-text-sec is good for lesser-width content areas like a sidebar where you want smaller text for best readability.


Breaking apart different sections with headlines makes it easy to jump from one idea to the other. There are different sizes and different codes that should be used to create a proper hierarchy in your writing’s flow.

Wrap any headlines with the following headline tags:

  • <h1>generally do not use in blog posts
  • <h2>large titles
  • <h3>medium titles
  • <h4>small titles
  • <h5>extra small titles
  • <h6>nobody actually uses this one right?

You can get a sense for different headline sizes around this post.


You’re probably familiar with making lists in your posts. The HTML goes like this:

	<li>List item #1</li>
	<li>List item #2</li>
	<li>List item #3</li>

This creates a simple bulleted list. If you wanted to create an ordered list that counts each item, you’d use <ol> instead of <ul>

To style the list items with a checkmark icon before each bullet, apply the list-check class:

<ul class="list-check">
	<li>List item #1</li>
	<li>List item #2</li>
	<li>List item #3</li>
  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3

To style the list items with a solid border, simply apply the list class:

<ul class="list">
	<li>List item #1</li>
	<li>List item #2</li>
	<li>List item #3</li>

…making your lists look a little something like this:

  • List item #1
  • List item #2
  • List item #3

You can also add the list-large class to add more spacing in between each list item. Yes, you can combine all of these classes together.

Note + Alert Boxes

This is what an alert box looks like in MD. You can use it in posts to highlight an important message.

Alert Box Code: <p class="alert">Alert Text Here...</p>

This is a note box. You can use it to highlight aside text, such as instructional messages or any side thoughts you have.

Note Box Code: <p class="note">Note Text Here...</p>

Intro Text and Drop Caps

As you see in this paragraph, the first letter has a nice style that makes your opening statements look more profound.

With the new drop class, you can make any letter or word a drop cap—just wrap your text with the new class. Here’s the above paragraph as it looks in the post editor:

<span class="drop">A</span>s you saw a few times throughout this post (and this very paragraph), the first letter had a nice style that makes your opening statements look more profound.

In addition to the drop cap, you may have also noticed the above paragraph has a larger font size than the rest of the text. This is another typographical improvement that can make your opening statement more bold, and all it takes is wrapping your paragraph of choice with the new intro class:

<p class="intro">In addition to the drop cap, you may have also noticed the above paragraph has a larger font size than the rest of the text.</p>

…now, these classes are useful on their own but chances are you’ll want to combine them in the same paragraph. Instead of writing separate markup to give a paragraph a drop cap and larger intro text, you can simply wrap a paragraph in the new text-intro class to apply both styles in one shot!

<p class="text-intro">Instead of writing separate markup to give a paragraph a drop cap and larger intro text, you can simply wrap a paragraph in the new text-intro class to apply both styles in one shot!</p>

Nothing takes somebody’s breath away more in a design than stunning text. Combine your stellar content with these new helper classes and you’re sure to make your text as beautiful as it is informative.


Using quotes in blog posts can enhance a point you’re trying to make and are commonly seen when listing customer testimonials. MD adds some basic styling to quoted text to make it obvious the text is quotes. If you have a block of text you want to quote, simply wrap it with the <blockquote> tag:

My quoted text here.


MD is absolutely fantastic, it seems like you’ve understood what small business owners need and how we want to work. – Cole Dano

…sometimes you may not want to disrupt the flow of your writing by giving up a few lines to a quote and would rather just have the quote float alongside your text.

A pullquote looks something like this and is formatted by MD right out of the box.

By creating a pullquote you can align quotes to the left or right of any paragraph text without disrupting your main text.

You may see these style of quotes used in magazines where the author pulls a more profound piece of text from their writing to really highlight the message they’re trying to get across. To make a pullquote, either align your <blockquote> to the left or right:

<blockquote class="alignright">
My quoted text here.

…and Marketers Delight will take care of the rest (to align it left, use alignleft).

Code Blocks

Throughout this post, I’ve placed any references to code in those nicely formatted yellow boxes. This is to distinguish the text as code. If you’re sharing some kind of embed codes, you may want to consider wrapping it with the <pre> tag to signify it’s a piece of code like so:

<iframe width="853" height="480" src="" frameborder="0" allowfullscreen></iframe>

…keep in mind that for any code you want people to be able to copy and paste, you must convert the bracket tags to a proper HTML entity to prevent the code from executing. Simply pasting a code into the <pre> tag isn’t enough.

  • < = &lt;
  • > = &gt;

(I usually cheat and only convert the opening bracket to &lt;)

Also, if you also want to highlight a few words within your paragraphs, as I did in the paragraph above, just wrap the word(s) with the <code> tag:

…This is all normal text and this is <code>code</code>.


My favorite HTML tag, the acronym tag is for those who care about the smaller details of their writing.

Simply put, wrap any acronym you use in your posts with the <acronym> tag to convey the full meaning of it to your readers. MD adds a small underline to the text, and when you hover your mouse over it, your cursor changes to a question mark.

Move your mouse over “HTML” in the above paragraph and see how to use the tag below:

<acronym title="HyperText Markup Language">HTML</acronym>


As per, WordPress coding standards, Marketers Delight includes a variety of useful classes you can use to align text, images, and any kind of media:

  • alignright
  • alignleft
  • aligncenter

The class names should be self-explanatory as to what they do, here’s how you’d use one to align an image to the right:

<img src="" alt="Image text" class="alignright" />


In conjunction with alignment classes you can also wrap content to the edges of the content box. This creates a neat design effect and looks particularly great when using the full-width display mode in MD (like this post).

For an example of what I mean, see the featured image at the top of this post, table of contents, and the Headline Photo Covers code block.

<div class="aligncenter wrap">
    <p>This box will be align to the center and touch the edges of the content box!</p>
<div class="alignright wrap">
    <p>This box will align to the right touch the edges of the content box!</p>


Block classes add padding to the element you apply them to. The main block classes you’ll probably use are, block-double, block-single, or block-half.

You’ll notice that each class is suffixed with a measurement. You’ll see these measurements used throughout different MD classes in relation to the 26px value set on the body tag.

A Block with 52px of spacing
A Block with 26px of spacing

26px is a single unit, whereas 52px would be double and 13px would be half.

There are other variations of the block classes including some useful ones like:

  • block-full (spaces full-width pages for ideal content width of 624 (26×24))
  • block-double-tb (adds 26×2 px of space to top/bottom)
  • block-single-tb (adds 26px of space to top/bottom)
  • block-single-lr (adds 26px of space to left/right)
  • block-mid (adds 26px + 13px space on all sides)
  • block-triple-double (adds 26×3 px of space to top/bottom, 26×2 to right/left)

Note: there are other available block combinations not listed here

Based on the measurements, the spacing values will be adjusted with media queries depending on the size of the screen. Generally, each measurement halves itself at a certain screen size, so the value of block-double would change to the range of block-single or block-mid to account for less screen real estate on phones and tablets.

This rule isn’t universal as I’ve noticed simply halving a value doesn’t always produce ideal spacing in all contexts. The best way to see how the spacing degrades is to search the style.css file for each instance and see when the spacing change takes place.

While 26px is a static value, the naming conventions of these classes will make sense for any value you change it to. Until I build a smarter spacing system into MD, you’d have to manually change the values in these classes to match the new baseline, if you care about that kind of detail:

<div class="block-double">
    <h3>My Title</h3>
    <p>Some paragraph text</p>


Just like Blocks, Spacers follow similar rules. Spacers are units of margin that add whitespace to the elements you apply them to to separate them from each other.

To keep the Spacers system simple and a consistent rhythm between the elements on your page, spacers add margin to the bottom of the element you apply them to. Spacer classes flow like this:

mb = margin-bottom

  • mb-double
  • mb-mid
  • mb-single
  • mb-half
  • mb-none

A useful thing to know about each Spacer is that if the element you apply it to is the last element in the parent container (see Example usage below), no spacing will be applied to the element, thus avoiding an extra gap on the bottom.

Each Spacer class is written with the :not() pseudo-selector to ensure the last child doesn’t receive additional spacing:

.mb-double:not(:last-child) {
	margin-bottom: 52px;

Example usage:

<div class="parent-container">

    <div class="block-double mb-double">
        <h3>My Title</h3>
        <p>Some paragraph text</p>

    <-- Since the following div is the last in this list, no bottom margin will be applied-->

    <div class="block-double mb-double">
        <h3>My Title</h3>
        <p>Some paragraph text</p>



By default, buttons in Marketers Delight are green with a 3px solid border added to the bottom. You can output a button in HTML simply with:

<a href="#link" class="button">My button text</a>

As of writing this, MD also supports an orange button. Simply apply the orange class to the above HTML to change it:

<a href="#link" class="orange button">My button text</a>

Adding Your Own Colors

More button styles and colors will be available in future versions of Marketers Delight, but for now you can use this simple CSS logic in your Child Theme’s style.css to add different button colors: {
	background-color: blue;
} {
	background-color: darkblue;

…making your button HTML:

<a href="#link" class="blue button">My button text</a>

The border color will automatically adjust to a darker version of the color/hex code you input into your custom classes. Easy enough, no?

Badges New!

A cool detail that can make your messaging stand out even more is in a badge. These little badges can serve as status indicators next to headlines, text offers, or even prices.

You can read further into what you can do with this badge from the forums, and to use it around your site, simply apply the badge class to any line of text:

<span class="badge">New!</span>

If you notice your badges don’t vertically align with you text, you can quickly pull them up and down with this simple bit of inline CSS, and quickly change the colors:

<span class="badge" style="background-color: purple; top: -3px;">New!</span>

(see the forum thread for a more efficient way to work with custom styles)


There’s not much to styling links. By default, link colors in MD are red (#ae2525) with no underline. The various link classes in MD add different colors, hovers, and underlines where necessary. Here are the current link classes in MD:

  • links-main (used on main content elements, adds 1px bottom border to links)
  • links-sec (gray link color, use in conjunction with links-main to add a 1px bottom border)
  • links-dark (use on dark backgrounds, changes color to light gray with 1px bottom border)
  • links-white (changes link color to white with 1px white bottom dotted border)
  • links-side (used in sidebar, adds gray 1px bottom bored to links)

These classes may or not be useful to you but can serve as good starting points for styling your own links. Most of the class names are generic, so you can change the color codes without devaluing the name of the class.

Example usage:

<div class="links-main">
   <p>Text <a href="#">with a red link + border</a></p>

<div class="links-main links-sec">
   <p>Text <a href="#">with a gray link + border</a></p>

Utility Classes

How to center headlines & other text

Wrap headlines or other text with this class to center it:

<h3 class="text-center">My Headline Text</h3>
<p class="text-center">My paragraph text</p>

Secondary text color

One of my favorite little typographical tricks I use a lot around Kolakube (and in this guide) is styling secondary text to show as a gray color. It’s a nice way to create small aside text.

You can make any text gray, like this, with the simple text-sec class.

<span class="text-sec">Secondary text</span>

…or instead of using a <span> tag, replace it with <small> to shrink the text just a little bit.

A Final Note on Formatting

I’m always experimenting with new styles to integrate into the Marketers Delight stylesheet for you to use. I’m currently playing around with pure CSS popups and refining the existing styles.

This guide is by no means comprehensive and only skims the surface of what can be done with the built-in styles. Get creative and mix, match, and see how to combine different classes to do different things.

For the more adventurous out there, I highly encourage you to browse through the style.css file in Marketers Delight to see a more complete list of available styles.

Again, the benefit to using classes built-in to Marketers Delight is that you don’t need to rewrite your own CSS (which can add bloat to your child themes) and your content will stay consistent across all devices and not break, showing that ugly horizontal scrollbar on mobile.

As MD matures I’ll be updating this guide with more references so be sure to check back here if you’re ever curious about some of the hidden features of Marketers Delight!

If this guide was helpful, you'll love these

See What Else You Can Create With Marketers Delight

The key features you love about MD wouldn't be possible without the small details working behind the scenes. The more you know MD, the better your site will be:

Build With MD Part 1: An introduction

Read now

5 MD Features That Will Change the Way You Blog

Read now

Build With MD Part 2: Child Themes

Read now

23 comments add yours

  1. I’m really going to have to buckle down and play around with some of of these formatting tips, particularly Columns and Blockquote (alignright).

    • They certainly make your posts look and flow a whole lot better if you have en eye for it. And thanks, the Page Leads were my favorite part of formatting the whole page – I’m still amazed at how versatile they are.

  2. Thanks for this Alex, great tips to get even more out of MD. While it is really awesome as it is, I can’t wait to implement the new features you’re working on.

  3. Alex, great work here young man. Love the formatting guide. Was itching to get it without pouring through and testing ever line in style.css. Two questions about text formatting:

    1. golden ratio typography? I know this is an old Thesis thing but curious your take on it and if you’ve built in something similar to MD.

    2. The landscape view on mobile devices magnifies the text. Wondering if that’s on purpose and if there can be something built in to preclude that. The Pearsonified skin had a fix for this. No idea what tiny detail it was but made a world of difference when reading in landscape on mobile devices.

    Keep up the good stuff my man. The better it gets the more people I tell about MD.

    • Thanks so much Seth! I tried to make style.css as readable as possible, but there’s only so much you can do to make a file with 2,000+ lines of code interesting. This was the next best thing, really hope it helps!

      1) This is actually something writing this style guide got me thinking of. Thesis’ GRT absolutely smokes anything that’s out there because it’s dynamic and any font change adjusts everything else about the page (MD, and probably 99.9% of themes out there are also static).

      Right now if you were to change some of the default measurements in MD, the majority of the spacing would be “off”, even if it doesn’t look bad. This is something I want to address later down the line because these are the exact kind of problems I like to solve myself and I see an opportunity for some really powerful stuff.

      For now it’s good ol’ fashioned hand-coded CSS.

      2) Good call, never realized that was a bug. I looked around and found the code you’re talking about, though it doesn’t seem to take when I apply it. I’ll have to look more into this because this is definitely something I want to fix. Thanks for bringing it up!

      I appreciate any referrals you send my way! MD is always getting better so I hope you have plenty of friends to tell it to. 😉

  4. I didn’t know you had the column code MD. I was using a plugin for that, but now I can dump it for code inherently part of MD.

    I Love It!

    • Yes, there are tons of useful little classes in MD. The columns is definitely my favorite, amongst the blocks and spacers. Learning this stuff gives you the most control so study away.

  5. Hi Alex,

    Just started working on the email optin forms using MD. No matter how hard I tried, I wasn’t able to merge the email field with the CTA.

    Any help? 🙂

    You can check out (to see it live). Not promoting it all, just looking for ways to add beautiful forms.

  6. Hey Alex, what about
    – items that are the entire width of the content box
    – you’ve used images that are offset from the post content box, i.e sit half in the grey background on a post like this and half in the white background post content section. I’ve seen that in your sales pages.
    – I would love to see the layout for THIS page:

    • Hey Tim,

      1) You can make content span the full-width of the content box by wrapping it with this HTML:

      <div class="aligncenter wrap">

      If you want to add a slight bit of spacing, use this instead:

      <div class="aligncenter wrap block-double">

      2) If I understand correctly you can wrap your images with these classes to get similar image effects:

      <div class="alignright wrap-small">
          <img src="" />

      The wrap-small class will slightly push the image/content outside of the post box. Note that you can change the alignment to either alignleft or aligncenter as well.

      3) The homepage is a totally custom template — any specific element you’d like to see? I could make an MDTV episode about it!

      • Hi Alex, thanks! Re: images pulled outside content box…captions aren’t honoured?

        I tried this

        [caption id="" align="alignleft"]

        Yours truly, Self Guided Tour, Stage 16 2009[/caption]

        Re: the front page – a full video of all the elements? I love it all!

      • Cheers.

        On the image, do captions go inside the div?

        I tried this

        < div class=”alignleft wrap-small” >
        [caption id="" align="alignleft"]
        < img src=”” />
        Yours truly, Self Guided Tour, Stage 16 2009[/caption]

      • HI Alex do the caption shortcodes go inside the div or out? I tried inside but they’re not showing. Can you give an example?

  7. I really love all of the features of this theme – especially the page speeds. How much code would a person need to know in order to implement this theme? I work with a few customers that aren’t technically savvy, but they could really benefit from what this theme has to offer. How hard is it for someone to start?

    • Thanks Jen! In the next update, MD4.7, page speed will increase even more. Very exciting stuff!

      It all depends what you’re trying to accomplish with MD. The best way I’d explain this theme now is for people who want to write long form copy and add call-to-actions around that page. MD comes with writing tools like Footnotes, Page Leads, and point-and-click layout options that let you strip away unnecessary elements you may not need on a page-by-page basis.

      As MD continues to evolve, more design options and easier ways to build advanced content elements will be added. As of now, you will need to write code to change some of the design elements around, but I’m always around the support forums to assist with that (and oftentimes give you the code needed to copy and paste into your theme).

      • I think Alex that your theme is certainly not for noncoders like me. Although I really liked the MD.
        Is there any way that I can do all the styles without knowing how to code???

      • Thanks Alex!!
        After hearing that you will be helping with coding stuff for a non-coders like.
        The Bottom line is this: “You just got a new proud MD user”.

Leave a Comment