Setup

1. After installation, drag and drop a Twit stack into your page.
2. In the settings panel on the right, enter the username of the Twitter feed. Optionally you can also adjust the number of tweets to display (the maximum is 25).
3. Optionally you can add a follow link at the bottom of the feed. To do this, add a text stack with the wording you want. Highlight the owrding and then add a link, setting the link URL to http://twitter.com/your-username

Important: You should only use one Twit stack per page. This is not a limatation of the Twit stack itself, but a limiation in releation to how Twitter handles Javascript calls for each instance of the embed code. Some web browser extensions like Incognito will block the Twitter feed and prevent the Twit stack from working correctly.

Styling With CSS Code

On its own, the Twit stack looks rather plain and boring. Because the feed is displayed in the form of a basic HTML unordered list, you can use custom CSS code code to target the unordered list wrapper and list items. The above example Twitter feed was styled using the following CSS code:

.tweet {
	list-type: none;
	background: #f5f5f5;
	border: 1px solid #eaeaea;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 5px;
	display: block;
	-webkit-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

.tweet:hover {
	-webkit-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	border: 1px solid #999999;
	background: #f9f9f9;
}

Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme).

This CSS code shown above will apply a background, border, margin and padding on each tweet. The CSS transition property creates an attractive rollover effect, and is supported by all newer web browsers (a much faster and lighter alternative to Javascript).