☰ Menu
Text Formatting Styles

Testing the Styles → EDDIY Text Formatting, Email Forms & Examples

Out-of-the-box EDDIY includes a many post formatting features. Golden Ratio Typography ensures your content looks great on all devices and things like block-quotes and colored buttons are available for further styling.

This post will cover all the different styling features you can include within your WordPress content & throughout the EDDIY skin.

A Large H2 Tag Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A Smaller H3 Tag Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Even Smaller H4 Tag Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

But Smaller H5 Tag Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Finally A H6 Tag Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lists

The two main types of list appear as you see below. These are unordered lists and ordered lists. The first type of list is an unordered list, below you can see a list with nested items:

  • List item 1
  • List item 2
    • Inner list item 1
    • Inner list item 2
  • List item 3

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

Buttons & Horizontal Rule

By adding a little bit of code to your HTML you can create colored buttons and a styled horizontal separator. The code for creating button links is simply ccs-button followed by color-xxxx where the x’s are replaced with the color of your choice.

Sample buttons can be seen below:

Button Link Button Link Button Link  Button Link Button Link  Button Link

To create a styled horizontal separator, use the <hr class="tlhr" /> code in your post or page HTML. The horizontal rule displays like this:


Email Forms

You can easily add email forms to your posts and pages using the thesis_email_form class. You can see what an email form looks like in the example below:

Mailchimp Email Form Example:

To create a form like the one above, use the following code with your own information:

<form class="thesis_email_form" action="YOUR-MAILCHIMP-URL-HERE" method="post">
    <h4 class="email_form_title">This is a Headline for a Mailchimp Form</h4>
    <p class="email_form_intro">This is a description area for your Mailchimp email form.</p>
    <div>
        <input class="thesis_email_form_name input_text" name="MERGE1" type="text" placeholder="Enter Your Name" /><input class="thesis_email_form_email input_text" name="MERGE0" type="email" placeholder="Enter Your Email" /><input class="thesis_email_form_submit tl-button input_submit" name="submit" type="submit" value="Submit »" />
    </div>
</form>

Aweber Email Form Example:

To create a form like the one above, use the following code with your own information:

<form class="thesis_email_form" action="http://www.aweber.com/scripts/addlead.pl" method="post">
    <h4 class="email_form_title">This is a Healine for your Aweber Form</h4>
    <p class="email_form_intro">This is a description area for your Aweber email form.</p>
        <input class="thesis_email_form_name input_text" name="name" type="text" placeholder="Enter Your Name" /><input class="thesis_email_form_email input_email" name="email" type="email" placeholder="Enter Your Email" /><input class="thesis_email_form_submit input_submit tl-button" name="submit" type="submit" value="Submit »" /><input name="listname" type="hidden" value="YOUR-WEB-FORM-ID" /><input name="redirect" type="hidden" value="http://www.aweber.com/thankyou-coi.htm?m=text" /><input name="meta_redirect_onlist" type="hidden" value="" /><input name="meta_message" type="hidden" value="1" /><input name="meta_required" type="hidden" value="name,email" />
</form>

Tables

Employee Salary
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Blockquotes

This is a right-aligned blockquote. Appears the same aligned-left. Cool!

Another great feature included with the EDDIY skin is the ability to style blockquotes in three different ways. Right & left aligned quotes appear as you see in this paragraph. You can create these types of blockquotes using the <blockquote class="..."> structure and replace the ... with either left or right. Unlike the right & left aligned blockquotes, standard quotes are displayed using a secondary font color and a nice looking border to the left to help them pop-out compared to regular text. A standard blockquote, using the <blockquote> tag can be seen below:

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.

Notes, Alerts & Pre-formatted Text

Using notes, alerts, & pre-formatted text is very common in blogging & web design. The problem is, to achieve these features often requires installing an additional plugin to handle shortcodes within WordPress, but not with the Thesis Framework. To create pre-formatted text, wrap lines with the <pre> tag in your HTML. Pre-formatted text looks like this:

Check out this awesome code displayed with pre-formatted text.

To create these notes & alerts, simply add the appropriate class to your paragraphs <p> tags. For example, to turn some text into a note, use the <p class="note"> code when wrapping your text. Here is an example of a note box:

This is a really cool note that people should read because it is just so awesome! Gotta love the Thesis Framework because it makes notes just so cool.

Here is an example of an alert box:

This is a really cool alert that people should read because it is just so awesome! Gotta love the Thesis Framework because it makes alerts just so cool.

Here is an example of an info box:

This is really cool info that people should read because it is just so awesome! Gotta love the Thesis Framework because it makes info boxes just so cool.

Well there you have it, text formatting with the EDDIY skin is both simple and highly impressionable. No need to install a plugin to handle this, already taken care of for you!


Further Reading…

Image Styling

EDDIY also offers some pretty neat image styles that can be used within your WordPress posts & pages.

Categories: Articles Child Category 01 Child Category 02 Parent Category

• Meet the Author ➞ Thomas


My name is Thomas Soler, I'm the creator here. This is a demo site for the EDDIY Thesis Skin. EDDIY is completely integrated with the Easy Digital Downloads plugin and a very powerful, all-around theme!


3 comments… add one
  • This is a test comment to show how comments are displayed in the EDDIY Skin.

    Reply
    • This is a nested comment or a comment reply to show how the formatting will show up when someone adds onto your comment stream.

      Reply
  • This is another comment test.

    This comment has multiple lines to show how formatting works in the comment section.

    Reply

Don’t Be Shy » Leave a Comment!