Sep 26, 2008

The Beautiful Typography


This is the typography that used by rockettheme.com and it has been implemented on this blog. It's exactly the same from the newest rockettheme templates.


Notice Styles

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the folllowing html: <span class="attention">....</span>This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="notice">....</span>This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="alert">....</span>This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="download">....</span>This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="approved">....</span>This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="media">....</span>This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="note">....</span>This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="cart">....</span>This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="camera">....</span>This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="doc">....</span>This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="alert-2">....</span>This is a sample of the 'info' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="info-2">....</span>This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="downlioad-2">....</span>This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="note-2">....</span>

This is a sample <pre>...</pre> tag:

body { margin:0; color:#7f7f7f; font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; font-size:small; }
a:link { color:#215670; text-decoration:none; }
a:visited { color:#215670; text-decoration:none; }
a:hover { color:#006699; text-decoration:none;}
a img { border-width:0; }




Blockquote Styles

This is a blockquote, you will want to use the following formatting: <blockquote>....</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="blue">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="red">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="green">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="purple">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="orange">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="brown">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
This is a blockquote, you will want to use the following formatting: <blockquote class="grey">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is blockquote, you will want to use the following formatting: <blockquote class="quotes"><p>...</p></blockquote>.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.




Important Emphasis Styles

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important"><span class="important-title">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-blue"><span class="important-title-blue">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-red"><span class="important-title-red">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-green"><span class="important-title-green">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-purple"><span class="important-title-purple">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-brown"><span class="important-title-brown">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-orange"><span class="important-title-orange">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-grey"><span class="important-title-grey">Sample Title</span>...some content...</div>


Later, I will show you how to implement these styles on your blog. It's easy. Stay tuned..

No comments: