Testing the Styles » Criss Cross Text Formatting, Email Forms & Styles

Out-of-the-box Criss Cross 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 Criss Cross 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="cchr" /> 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:

Keep Readers Updated with an Email Form

Add email subscription forms anywhere on your website like this one.

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">Enter Your Title</h4>
 <p class="email_form_intro">Enter a Description Here.</p>
 <input class="thesis_email_form_name input_text" type="text" name="name" value="Enter Name" onfocus="if (this.value == 'Enter Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Name';}" />
 <input class="thesis_email_form_email input_email" type="email" name="email" value="Enter Email" onfocus="if (this.value == 'Enter Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Email';}" />
 <input class="thesis_email_form_submit input_submit" type="submit" name="submit" value="Submit »" />
 <input type="hidden" name="listname" value="webpagejourney" /><input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" />
 <input type="hidden" name="meta_redirect_onlist" value="" />
 <input type="hidden" name="meta_message" value="1" />
 <input type="hidden" name="meta_required" value="name,email" />
</form>

Blockquotes

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

Another great feature included with the Criss Cross 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.

Well there you have it, text formatting with the Criss Cross 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

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