Style Shortcodes

Buttons Styles

To create a button link, download link, email link, or fancy link like the ones below all you need to do is select “Button”, “Fancy Link”, “Email Link”, or “Download Link” from the Styles Shortcodes tab in the Awake WYSIWYG popup. Then enter a link in the place of the “#” and the text for your button/link title as seen below.

By default the buttons and fancy links will automatically pick up the color of the theme you’ve selected.

Basic Usage

Button Links

Small Button
A Large Button

Download Links

Click Me Or how about a really long download link description title

Email Links

Click Me themesupport(at)mysitemyway.com

Fancy Links

Click Me Or how about a really long fancy link description title

// Just replace "#" with your link including http://
	[button link="#"]Your Link Text Here[/button]
	[button link="#" size="large"]Your Link Text Here[/button]
	[download_link link="#"]Your Link Text Here[/download_link]
	[email_link link="#"]Your Link Text Here[/email_link]
	[fancy_link link="#"]Your Link Text Here[/fancy_link]

Additional Attributes

If you would prefer to use the buttons/link styles from a color scheme variation other than the one you have activated, you can do so easily by simply adding our variation attribute. See the examples below

TealTeal Download Link Email Me Fancy Link

Hot PinkHot Pink Download Link Email Me Fancy Link

Glossy Blue Glossy BlueDownload Link Email Me Fancy Link

These are just a few examples, click the link below to see all button and link variations and get the exact code snippets.

Click here to see all available button & link variations and example usage.

	[button link="#" variation="teal"]Your Text Here[/button]
	[button link="#" variation="hot_pink"]Your Text Here[/button]
	[button link="#" variation="glossy_blue"]Your Text Here[/button]

Standard Box Styles

In addition to column layouts, you can also mix in some built-in box styles to separate your content. Copy/Paste the code snippets below or use the Awake WYSIWYG popup to insert the appropriate shortcode.

[fancy_box]
	Insert your text here
[/fancy_box]

[simple_box]
	Insert your text here
[/simple_box]

[fancy_titled_box title="Your Title"]
	Insert your text here
[/fancy_titled_box]

Color Scheme Box Styles

To create a color box like the ones below all you need to do is select “Color Box” from the “Styles Shortcodes” tab in the Awake WYSIWYG popup. Then enter a title and your content.

These color scheme boxes match the buttons of each skin, and by default pick up the color of the skin you’ve selected as you can see in the example below.

Standard Usage

[color_box title="Your Title"]Your Text[/color_box]

Additional Attributes

If you would prefer to use the color box style from another color scheme, you can do so easily by simply adding our variation attribute. See the examples below

These are just a few examples, click the link below to see all color scheme box variations and get the exact code snippets.
Click here to see all available color scheme box variations and example usage.

[color_box title="Your Title" variation="glossy_red"]Your Text[/color_box]
[color_box title="Your Title" variation="glossy_black"]Your Text[/color_box]
[color_box title="Your Title" variation="frosted_glass"]Your Text[/color_box]

Fancy Headers

This is a fancy header

	[fancy_header]This is a fancy header[/fancy_header]

This is an H5 tag which should match the color scheme

Dropcaps

To create a dropcaps like the ones below all you need to do is select the appropriate dropcap from the “Styles Shortcodes” tab in the Awake WYSIWYG popup. Then enter a letter/number.

These dropcaps by default pick up the color of the skin you’ve selected as you can see in the example below.

Standard Usage

// Just replace "A" with the letter/number of your choosing
[dropcap1]A[/dropcap1]
[dropcap2]A[/dropcap2]
[dropcap3]A[/dropcap3]
[dropcap4]A[/dropcap4]

Additional Attributes

If you would prefer to use the dropcap style from another color scheme, you can do so easily by simply adding our variation attribute. See the examples below

variation=”hot_pink”

variation=”earthy_green”

[dropcap1 variation="hot_pink"]A[/dropcap1]
[dropcap3 variation="hot_pink"]B[/dropcap3]
[dropcap4 variation="hot_pink"]C[/dropcap4]
[dropcap1 variation="earthy_green"]A[/dropcap1]
[dropcap3 variation="earthy_green"]B[/dropcap3]
[dropcap4 variation="earthy_green"]C[/dropcap4]

These are just a few examples, click the link below to see all dropcapvariations and get the exact code snippets.

Click here to see all available Dropcap variations and example usage.

Special List Styles

List Style Variations

If you would prefer to use the lists styles from another color scheme, you can do so easily by simply adding our variation attribute.

Click here for code snippets of all variations

Alert Box Styles

To create a button link like the one below all you need to do is select “Button” from the Style tab in the Awake WYSIWYG popup. Then enter a link and the text for your button as seen below.

[download_box]
	Insert your text here
[/download_box]

[warning_box]
	Insert your text here
[/warning_box]

[info_box]
	Insert your text here
[/info_box]

[note_box]
	Insert your text here
[/note_box]

Pullquotes & Blockquotes

To create a pullquotes like the one below all you need to do is select “Pullquote Right” or “Pullquote Left” from the Style tab in the Awake WYSIWYG popup.

//pullquotes floated right
	[pullquote_right]Insert your text here[/pullquote_right]

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
	[pullquote_left]Insert your text here[/pullquote_left]

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.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem, scelerisque aliquet odio lorem non orci. - Anonymous

Highlighting

InFocus comes with two highlight styles. Simple wrap the text you want highlighted in the shortcodes below or choose “Highlight 1″ or “Highlight 2″ from the Style tab in the Awake WYSIWYG popup.

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.

	[highlight1]Insert your text here[/highlight1]
	[highlight2]Insert your text here[/highlight2]

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 Awake WYSIWYG popup.

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

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. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

	[frame_left]Insert the full URL path to your image[/frame_left]
	[frame_right]Insert the full URL path to your image[/frame_right]
	[frame_center]Insert the full URL path to your image[/frame_center]

Dividers

Awake comes with the following useful dividers

	[clearboth]
	[divider]
	[divider_padding]
	[divider_top]