This is a small tutorial to get you started which the new features introduced with version 1.6 of the plugin. There are 3 major additions: Styling, cursor controls and links.

1. Styling

The style of the captions can now be personalized to better fit your blog. The styling rules apply to all ShowTime slide shows on your blog and cannot be overridden by a shortcode attribute. To get started, open the ShowTime Settings page in your WordPress administration panel:

Media > Showtime Slideshow

The html of the text block looks like this:

<p class=”spacer”>&nbsp;</p>
<p><h1>title text</h1></p>
<p class=”spacer”>&nbsp;</p>
<p class=”description“>caption text</p>
<p class=”spacer”>&nbsp;</p>

If you are familiar with html, you will have noticed that the paragraph class (p) defines settings for the entire text block. The plugin supports a subset of properties in the original CSS1 specification. [supported CSS properties] There is also a special property for vertical alignment: valign.

p {

marginLeft: 15; margin of 15 pixels from the left
marginRight: 15; margin of 15 pixels from the right
valign: bottom; align vertically. (top|middle|bottom)
textAlign: left; align horizontally (left|center|right)
color: #ffffff; text color (only hex values accepted)
font-family: _sans, Helvetica, Arial; font name(s) in order of preference
fontWeight: normal; (normal|bold)
kerning: true; adjust character spacing according to kerning information (true|false)
leading: 0; number of pixels between lines

}

.description { fontSize: 17; }

h1 { fontSize: 28; }

Adjust the fontSize value in the .spacer class to adjust vertical padding (in pixels):

.spacer { fontSize: 12; }

Set the color of the cursor and progress circles using .cursor and .circle classes respectively.

.cursor {color: #ffffff;}

.circle {color: #ffffff;}

The shadow class changes the appearance of cursor and text shadows. Accepted properties are color, strength and blur. To apply no shadow, set blur attribute to zero.

.shadow {

color: #000000;
strength: 0; (shadow intensity)
blur: 2; (shadow size in pixels)

}

2. Cursor controls

3. Links

Shortcode attributes: link and target

example:

[st link=image target=_blank controls=10004]