This page presents most of the typographical aspects of this website's template which you can use in your own articles, if you are a member who has article writing/editing access. You will need to edit in html mode rather than wysiwyg mode to use many of these elements. To do that use the [show/hide] link on the left and above the main editor window, or use the "Edit Code" button in the fourth row of the wysiwyg editor toolbar (hover the mouse over the buttons to see the name of each button).
Preformatted text
HTML Headings
This is an H1 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
This is an H2 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
This is an H3 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
This is an H4 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
This is an H5 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
This is an H6 Header
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
HTML pre tag & code class
Below is a sample of <pre> tag or code class:
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
Highlight
This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.
Blockquote
This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!
Dropcaps
This is a sample Drop Cap. The first letter in this paragraph is big. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!
01This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">01</span>Your content goes here!</p> to form a block dropcap!
02This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">02</span>Your content goes here!</p> to form a block dropcap!
03This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">03</span>Your content goes here!</p> to form a block dropcap!
AThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">A</span>Your content goes here!</p> to form a block dropcap!
BThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">B</span>Your content goes here!</p> to form a block dropcap!
CThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">C</span>Your content goes here!</p> to form a block dropcap!
aThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">a</span>Your content goes here!</p> to form a block dropcap!
bThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">b</span>Your content goes here!</p> to form a block dropcap!
cThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">c</span>Your content goes here!</p> to form a block dropcap!
Lists Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.
Ordered List
- This is a sample Ordered List.
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
Unordered List
- This is a sample Unordered List.
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
Definition List
- This is a sample Definition List.
- Condimentum quis.
- Congue Quisque augue elit dolor.
- Condimentum quis sapien.
- Congue Quisque augue elit dolor.
- Nunc cursus sem et pretium sapien eget.
- Condimentum quis sapien.
- Congue Quisque augue elit dolor.
- Nunc cursus sem et pretium sapien eget.
Unordered Lists with classes
- This is a sample Arrow list.
- Use <ul class="arrowlist"><li>List's content goes here!</li></ul>
- This is a sample Arrowlist.
- This is a sample Star list.
- Use <ul class="starlist"><li>List's content goes here!</li></ul>
- This is a sample Starlist.
- This is a sample Check list.
- Use <ul class="checklist"><li>List's content goes here!</li></ul>
- This is a sample Checklist.
- This is a sample Bullet list.
- Use <ul class="bulletlist"><li>List's content goes here!</li></ul>
- This is a sample Arrowlist.
- This is a sample Cross list.
- Use <ul class="crosslist"><li>List's content goes here!</li></ul>
- This is a sample Starlist.
- This is a sample Add list.
- Use <ul class="addlist"><li>List's content goes here!</li></ul>
- This is a sample Checklist.
Icon Styles
Use <p class="icon icon-error">Your message goes here!</p> to make this.
Use <p class="icon icon-tips">Your message goes here!</p> to make this.
Use <p class="icon icon-note">Your message goes here!</p> to make this.
Use <p class="icon icon-tag">Your message goes here!</p> to make this.
Use <p class="icon icon-rss">Your message goes here!</p> to make this.
Use <p class="icon icon-cart">Your message goes here!</p> to make this.
Use <p class="icon icon-page">Your message goes here!</p> to make this.
Use <p class="icon icon-demo">Your message goes here!</p> to make this.
Use <p class="icon icon-download">Your message goes here!</p> to make this.
Use <p class="icon icon-discussion">Your message goes here!</p> to make this.
Use <p class="icon icon-info">Your message goes here!</p> to make this.
Use <p class="icon icon-readmore">Your message goes here!</p> to make this.
Use <p class="icon icon-doc">Your message goes here!</p> to make this.
Use <p class="icon icon-signup">Your message goes here!</p> to make this.
Use <p class="icon icon-login">Your message goes here!</p> to make this.
Use <p class="icon icon-submit">Your message goes here!</p> to make this.
Use <p class="icon icon-extension">Your message goes here!</p> to make this.
- This is a sample User icon. class="icon icon-user"
- This is a sample Group icon. class="icon icon-group"
- This is a sample Key icon. class="icon icon-key"
- This is a sample Birthday icon. class="icon icon-birthday"
- This is a sample Photo icon. class="icon icon-photo"
- This is a sample Calendar icon. class="icon icon-calendar"
- This is a sample Address icon. class="icon icon-address"
- This is a sample Phone icon. class="icon icon-phone"
- This is a sample Mobi icon. class="icon icon-mobi"
- This is a sample Fax icon. class="icon icon-fax"
- This is a sample Email icon. class="icon icon-email"
- This is a sample Website icon. class="icon icon-website"
- This is a sample Yahoo icon. class="icon icon-yahoo"
- This is a sample Gmail icon. class="icon icon-gmail"
- This is a sample Skype icon. class="icon icon-skype"
- This is a sample MSN icon. class="icon icon-msn"
- This is a sample Facebook icon. class="icon icon-facebook"
- This is a sample Twitter icon. class="icon icon-twitter"
Button & Tags Style
Button Style
View source to see how these buttons above are created.
e.g. to make the "Read More" button above, except make it green:
<a class="button-img but-green" href="#"><span class="icon icon-readmore"> </span> <span>Read More</span></a>
e.g. or an orange button with no icon:
<a class="button-img but-orange" href="#"><span>Orange Button</span></a>
Button Colors
- but-white
- but-silver
- but-gray
- but-black
- but-blue
- but-red
- but-pink
- but-orange
- but-violet
- but-green
| Next > |
|---|