Design Guide

This is a reference for my own use. It contains my logo, color palette, and font selections. I then apply those components to various post elements, and code snippets. I have tried to represent every style element here. These are all currently defined in styles.css in the Get Noticed! Theme.

Logo

This is my logo. I have two versions, logo only:

Mh-Compass-Logo-Blue

and logo plus text:

MH-Compass-Horizontal-Logo

Fonts

I use Adobe Text Pro for my body font, Bebas for the titles and subheads, and Helvetica Neue for the sidebar text.

Colors

Photos

Generally, the first paragraph uses a drop cap and a larger font (as I am doing here). This is designed to pull the reader into the content. Then I follow immediately with an image.

Photo courtesy of ©iStockphoto.com/RTimages

The image should be about 1200 pixels wide. My Get Noticed! Theme will then scale the photos to fill the width of the content well, depending on the device being used to display the post. It will be displayed in-line (rather than floating to the right or left). The theme will also create the necessary thumbnails that are used in various widgets on the site.

Note that the photo has a caption with a reference to iStockPhoto and the photographer. This must be included with each photo I use from them.

Post Title

Get Noticed! Theme uses the <H2> head as the single Post Title heading. Therefore, do not use it within the body of the post. Note that it has no space above it.

A-Level Subhead

I use the <H3> tag to designate A-Level Subheads within a post—as I have done here.

B-Level Subhead

If I want an additional level of organization, I use the <H4> tag to designate B-Level Subheads.

Bulleted List

In HTML this is called an unordered list. Thus it uses the <ul> tag.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can optionally put a line space between each line item. It won’t affect the appearance, but in longer items that wrap, it may make it more readable in the HTML code.

If you have a list of short items, I use the “singlespace” class with the <li> tag, like this: <li class=”singlespace”>. It looks like this:

  • Lorem ipsum dolor.
  • Ut enim ad minim veniam.
  • Duis aute irure dolor.

Numbered List

In HTML this is called an ordered list. Thus it uses the <ol> tag.

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Like the Bulleted List, you can optionally put a line space between each line item. It won’t affect the appearance, but in longer items that wrap, it may make it more readable in the HTML code.

If you have a list of short items, I use the “singlespace” class just as I do with a bulleted list. It looks like this:

  1. Lorem ipsum dolor.
  2. Ut enim ad minim veniam.
  3. Duis aute irure dolor.

This is back to body text.

Nested Lists

This is an example of a numbered list that has a bulleted list nested inside it. I often do this in my writing:

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote

This is a <blockquote>.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Note the lack of beginning quote and the actual ending open quote. The theme inserts a graphic opening quote.

Blockquote with Citation

If you want to use the <blockquote> with a citation, enclose the author name (including the em-dash before it) with <div> tags.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

—Michael S. Hyatt
New York Times Bestselling Author

Note that you can use the <br> tag to create separate lines in the citation.

Callout

I use the Callout shortcode for setting off a block of text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note also that this shortcode uses Helvetica Neue to differentiate it off from body text.

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A variant of the Callout shortcode is used for calling out Content Upgrades:

Words go here for the copy on the download. Get it here. We made this so you can do cool things and write on it or type in your answers.

Code

I use the <Pre><Code> HTML tag for code samples, etc. If you are using HTML, you can’t use the left and right angle brackets. You have to use the HTML greater-than and lesser-than tags.

<h3>Logo</h3>

This is my logo. I have two versions, logo only:

<img src="http://michaelhyatt.com/wp-content/uploads/2009/02/mh-logo-only-200-x-164.png" alt="MH Logo Only" width="200" height="164" class="alignnone size-full wp-image-23401" />

and logo plus text:

<img src="http://michaelhyatt.com/wp-content/uploads/2009/02/mh-logo-plus-text-500-x-68.png" alt="MH Logo Plus Text" width="500" height="68" class="alignnone size-full wp-image-23402" />

Endorsements

I can’t say enough good things about Michael Hyatt’s course Get Published. As a new author, it was one ‘ah ha’ moment after another. It was so helpful learning from someone who is inside the industry who could explain the whys behind the whats. Get Published answered all my questions and many that I didn’t even know to ask. I highly recommend this course to anyone who wants to be more successful in their efforts to get published.”S. Courtney Lawson
Wife, Mother, Blogger

Table

This is a table example. Note that you will have to adjust the columns and rows. But note the background color. This is the standard for tables.

StrengthsFinder 1.0 StrengthsFinder 2.0
1. Achiever 1. Achiever
2. Intellection 2. Intellection
3. Connectedness 3. Strategic
4. Strategic 4. Futuristic
5. Input 5. Relator

Tweetable Quotes


Newsletter Signup