Button Links
To create a button link like the ones seen below simply follow the examples given.
These buttons will automatically pick up the color of the theme you’ve selected, as well as stretch to fit any text you insert
// Just replace "#" with your link including http://
<a class="button_link" href="#"><span>Click Me</span></a>
// Just replace "#" with your link including http://
<a class="button_link" href="#"><span>Click Me</span></a>
Special List Styles
To create a checkmark or arrow list like the ones seen below, simply add class="check_list" or class="arrow_list" to the ul tag like the examples given.
Check List
- This is check mark list item #1
- This is check mark list item #1
- This is check mark list item #3
<ul class="check_list">
<li>Item #1</li>
<li>Item #1</li>
<li>Item #3</li>
</ul>
Arrow List
- This is arrow list item #1
- This is arrow list item #1
- This is arrow list item #3
<ul class="arrow_list">
<li>Item #1</li>
<li>Item #1</li>
<li>Item #3</li>
</ul>
Box Styles
inFocus comes with many easy to implement box styles as seen in the examples below.
<div class="download_box">
Insert your text here
</div>
<div class="warning_box">
Insert your text here
</div>
<div class="info_box">
Insert your text here
</div>
<div class="note_box">
Insert your text here
</div>
Dropcaps
inFocus comes with two native drop cap styles. Simply wrap the desired letter in a span tag with class="dropcap1" or class="dropcap2" as seen in the examples below.
Dropcap Style #1
Alla a est luctus sem scelerisque fringilla id scelerisque nunc. Morbi lobortis nulla ut turpis gravida ultricies pharetra lorem faucibus. Morbi eleifend quam sit amet augue tempor venenatis. Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
<span class="dropcap1">A</span>
Dropcap Style #2
Alla a est luctus sem scelerisque fringilla id scelerisque nunc. Morbi lobortis nulla ut turpis gravida ultricies pharetra lorem faucibus. Morbi eleifend quam sit amet augue tempor venenatis. Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
<span class="dropcap2">A</span>
Pullquotes
inFocus also comes with built in pull quote styles. Simply wrap the desired text in a span tag with class="pullquote_right" or class="pullquote_left" as seen below.
//pullquotes floated right
<span class="pullquote_right">Insert your text here...</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. This is a pullquote. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
//pullquotes floated left
<span class="pullquote_left">Insert your text here...</span>
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. This is class pullquote_left. Suspendisse dictum magna id purus tincidunt rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
JQuery Toggle Content Shortcodes
Also included are easy to implement, built-in, JQuery toggle content styles, great for FAQ's, code snippits, and much more. Just follow the basic structure outlined below.
This is the toggle title
This is the toggle title
This is the toggle title
<h3 class="toggle"><a href="#">This is the toggle title</a></h3>
<div class="toggle_content" style="display: none;">
<div class="block">
Insert your toggle content here...
</div>
</div>
Highlighting
InFocus comes with two highlight styles. Simple wrap the text you want highlighted in a span with class="highlight1" or class="highlight2".
Nullam dignissim convallis est. This is an example of Highlight 1. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. This is an example of Highlight 2. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
<span class="highlight1">This is an example of Highlight 1</span>
<span class="highlight2">This is an example of Highlight 2</span>
Image Frames
InFocus comes with built in frame styling for your images. Simple wrap the image url you want framed in the shortcodes below or select the appropriate frame from the Style tab in the InFocus WYSIWYG popup.
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. 
Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc
<span class="frame alignleft"><img src="#" /></span>
<span class="frame alignright"><img src="#" /></span>
Dividers
//The following creates a simple divider line like the one above
<div class="divider"></div>
//The following creates a divider line with a "top" link like the one above
<div class="divider top"><a href="#">Top</a></div>
Easy Column Classes
View examples of our easy to use column layouts here:
Easy Column Layouts