Expressive – Documentation

Following features come with the fresh installation of the Expressive Skin for Thesis 2. You are always free to add more elements, and even customize the current ones by editing the source files of the skin. All the codes below work anywhere within your site, including the posts, pages, sidebars, footer, header and also any custom area (through the skin editor). Let’s begin with the basic ones – buttons.

Expressive Buttons

This skin comes with 8+ buttons, all of different colors. Creating a button is very simple. It’s just a matter of adding the links in the WP Post Editor. However, a small addition will convert the links into buttons. The following code has to be in the ‘Text Editor’ (unlike the ‘visual editor’).

<a href=”#” class=”button orange”>Your Button Text</a>

Notice the class that says “button orange“. That’s all you need to create a button. Changing the color is nothing else but writing the color name, and replacing the ‘orange‘ with the desired color. By default, following are the colors you can use.

Following are the color names (classes) that you can use i.e. replace with ‘orange‘ in the above code.

black, red, blue, orange, green, yellow, brown, purple, gray, magenta, pink, rosy, cyan or gold.

Expressive Boxes

Using the boxes is as easy as using the buttons. Just adding the class to the paragraph gives you a box! Here’s the easiest way to add a box. Make sure the following line of code appears in the ‘Text Editor’ and not the ‘Visual Editor’.

Your Text That Will Appear Inside The Box To Be Here

Following is the list of boxes available with the default installation of the skin.

yellow-box, red-box, blue-box, green-box or download-box (Adds the ‘Download’ icon in the box).

Demo

To check the demo of the boxes, you can visit the demo post titled Testing The Boxes…

Using The Icons In Menu And Other Places

Expressive comes with a huge (and outstanding!) collection of in-built icons that can be used anywhere within the skin! All you need to know is where to use them. You would also like to know that Expressive’s exclusive boxes have advanced options of using the icons. You don’t have to mess with any code – as promised! Let’s get started with the usage of the beautiful icons. Also, find all the icons by hitting the button below!

Expressive Icons Directory

Using The Icons In Menus

Want a navigation menu like that one above? Well, it’s seconds away from you. To use icons in your navigation menu, follow these steps –

1) Expand the individual menu items, and add the following line of HTML before/after the navigation label. Here’s an example.

Category 1

The icon-name should be select from the Expressive Icons Directory (the button’s up there!).

Using The Icons Elsewhere

‘Elsewhere’ includes anywhere where you don’t have an option for the icon. Simply use the following line of HTML code and insert an icon anywhere within the site. Needless to say that it has to be within the ‘Text Editor’ and not the ‘Visual Editor’

That’s pretty much it. Feel free to continue writing your normal text ahead. It will align itself with the text.

Those were a few brief tutorials about using the different elements in the Expressive skin. Don’t hesitate to post at the forum if you have any queries.