Style Sheet

This is a reference for my own use. It contains font choices, color samples, various post elements, and code snippets. I have tried to represent every style element here. These are all currently defined in styles.css and custom.css in the current theme on my live site.

Fonts

I use Trebuchet MS for headlines (and an occasional caption, like under my photo). I use Georgia for the body text and Arial for captions.

Colors

Photos

Generally, I start with a single paragraph and then include an image (as I have done above). The image should be 570 pixels wide to completely fill out the main content well. It will be displayed in-line (rather than floating to the right or left). The WooTheme engine will then create the necessary thumbnails that are used in various widgets on the site.

Notice that the photo is also linked to a landing page that iStockPhoto created for me. It also has a caption with a reference to iStockPhoto and the photographer. This must be included with each photo I use from them. They provide me with free photos in exchange for this credit and link.

Post Title

WooThemes, which is the foundation of my current 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 an A-Level Subheads within a post—as I have done here. The shortcut key in ecto is Ctrl-⌘-1.

B-Level Subhead

If I want an additional level of organization, I use the <H4> tag to designate a B-Level Subhead. The shortcut key in ecto is Ctrl-⌘-2.

Pull Quote

When I want something to be a pull quote, all I have to do is highlight the text, then press Opt-⌘-P. This inserts <span class=”pullquote”> before the selection and creates a dynamic pull quote. There is no need to duplicate the text. This is being handled by Javascript in the header.php file.

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.

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 use the Ctrl-⌘-I shortcut key to invoke the list item enclosed tags. 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.

Also, note that there is a </span> tag right before the </ul>. This is needed to reset the spacing.

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 use the Ctrl-⌘-I shortcut key to invoke the list item enclosed tags. 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>. Use Ctrl-⌘-B to invoke it.

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.

Blockquote with Citation

If you want to use the <blockquote> with a citation, use the <div> 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.”

—Michael S. Hyatt
President & CEO
Thomas Nelson Publishers

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

Setoff

I use this tag for setting off a block of text—letters I receive, intros, text ads, etc. Use the shortcut key Ctrl-⌘-X to invoke it. This uses the <div class=”setoff”>

Extract

I use this tag for code samples, etc. Use the shortcut key Ctrl-⌘-X to invoke it. This uses the <div class=”extract”>

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.