Style Shortcodes

Highlighted Texts:

[highlight][/highlight]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend scelerisque leo ac feugiat. Suspendisse tristique proin adipiscing porta malesuada. sem id est hendrerit blandit. Vivamus iaculis blandit ante, sit amet auctor lectus convallis vel. Maecenas tortor ligula, ornare eget placerat ac, tempor eu magna. In et congue nisi.

[highlight]content...[/highlight]
[highlight skin="black"]content...[/highlight]
[highlight text_color="#ba7400" bg_color="#bcd7e7"]content...[/highlight]

Blockquotes:

[blockquote][/blockquote]

Sed ut mauris at lectus tincidunt lobortis. Suspendisse elementum ligula ut felis egestas eu laoreet risus fringilla.

Sed ut mauris at lectus tincidunt lobortis. Suspendisse elementum ligula ut felis egestas eu laoreet risus fringilla. – John Smith

Sed ut mauris at lectus tincidunt lobortis. Suspendisse elementum ligula ut felis egestas eu laoreet risus fringilla.

[blockquote]content...[/blockquote]
[blockquote author="John Smith"]content...[/blockquote]
[blockquote bg_color="khaki" text_color="sienna" icon_color="orange"]
    content...
[/blockquote]

Totally Custom Blockquote

Sed ut mauris at lectus tincidunt lobortis. Suspendisse elementum ligula ut felis egestas eu laoreet risus fringilla.

Shortcode:

[blockquote class="myBlockquote"]content...[/blockquote]

CSS:

.myBlockquote {
	background-color: khaki;
	color: black;
	padding-left: 30px;
}

.myBlockquote:hover {
	background-color: yellow;
	color: sienna;
	padding-left: 40px;
}

.myBlockquote:before {
	font-size: 20px;
}

.myBlockquote:hover:before {
	font-size: 30px;
}

Pull quotes:

[pullquote][/pullquote]

Suspendisse pellentesque dapibus tellus eu fermentum. Proin tempus aliquam sapien feugiat faucibus. Pellentesque suscipit tincidunt tincidunt.

Aenean felis ante, congue a ultricies ut.

Vestibulum at diam. Donec blandit, sapien tempus mattis aliquam, leo lorem pharetra ipsum, nec adipiscing leo felis in augue. Donec leo libero, fermentum non elementum vitae, hendrerit sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vitae cursus metus. Morbi ac justo quam, et mattis mi. Aliquam quis elit id lorem viverra tristique.

Nulla arcu lacus, facilisis a dapibus non, malesuada eget metus.

Phasellus ut dui et tortor ultricies eleifend. Sed in enim risus. Nulla facilisi. Duis volutpat condimentum lacus non imperdiet. Mauris eleifend, sem non ultrices aliquet, diam felis faucibus tellus, eu fermentum dui tellus sed orci. Nunc nulla urna, porttitor aliquet posuere non, lacinia a orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed dui libero, eu gravida turpis. In sed tellus dolor. Etiam placerat tincidunt lacus, eget dignissim justo laoreet et.

Sed ut mauris at lectus tincidunt lobortis. Suspendisse elementum ligula ut felis egestas eu laoreet risus fringilla.

Proin tempus aliquam sapien feugiat faucibus.

Red skin aliquam sapien feugiat faucibus.

Custom background and text_color

[pullquote align="left"]content...[/pullquote]
[pullquote align="right" type="2" skin="green"]content...[/pullquote]
[pullquote type="3" skin="blue"]content...[/pullquote]
[pullquote type="4" skin="orange"]content...[/pullquote]
[pullquote bg_color="khaki" skin="dark_grey" text_color="sienna" ]
	content...
[/pullquote]

Drop Caps

[dropcap][/dropcap]

Simple (default)

Phasellus id tortor mi. Ut vel consequat felis. Aliquam in dui sit amet purus lacinia facilisis. Proin ultricies feugiat velit, luctus aliquam nunc auctor sed. Etiam euismod, nulla eleifend commodo ultrices hasellus id tortor mi. Ut vel consequat felis. Aliquam in dui sit amet purus lacinia facilisis. Proin ultricies feugiat velit, luctus aliquam nunc auctor sed. Etiam euismod, nulla eleifend commodo ultrices.

Square

Sed a justo turpis. Donec dignissim dui nec arcu gravida at dictum augue tempus. Phasellus ultrices, dolor nec eleifend dictum, tortor purus scelerisque justo, condimentum ornare lorem arcu posuere velit hasellus id tortor mi. Ut vel consequat felis. Aliquam in dui sit amet purus lacinia facilisis. Proin ultricies feugiat velit, luctus aliquam nunc auctor sed. Etiam euismod, nulla eleifend commodo ultrices.

Disc

Tonec ullamcorper lectus et nulla hendrerit a commodo turpis elementum. Nam gravida, mauris congue hendrerit facilisis, enim risus mollis lorem, non vulputate sapien urna nec eros. Maecenas mattis porttitor sem, eu lobortis sem luctus a. In odio sem, ullamcorper quis ultricies quis, tincidunt quis lectus.

Wonec ullamcorper lectus et nulla hendrerit a commodo turpis elementum. Nam gravida, mauris congue hendrerit facilisis, enim risus mollis lorem, non vulputate sapien urna nec eros. Maecenas mattis porttitor sem, eu lobortis sem luctus a. In odio sem, ullamcorper quis ultricies quis, tincidunt quis lectus.

Totally Custom Drop Cap

[dropcap]P[/dropcap]
[dropcap type="square"]S[/dropcap]
[dropcap type="disc" skin="orange"]T[/dropcap]
[dropcap type="disc" skin="red"]Wo[/dropcap]
[dropcap type="disc" style="background-color: khaki; 
          color: blue; font-size: 24px"]To[/dropcap]

Lists

[list][/list]

Arrow:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Circle:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Disc:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Rect:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Square:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Check:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Hyphen:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Short Dash:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Star:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

Triangle:

Morbi molestie ligula.
Cras ullamcorper diam.
Aenean laoreet, mi eg.

[list icon="arrow-right-2"]
<ul>
	<li>Morbi molestie ligula.</li>
	<li>Cras ullamcorper diam.</li>
	<li>Aenean laoreet, mi eg.</li>
</ul>
[/list]

[list icon="arrow-right-3" icon_color="green"]
content..
[/list]

[list icon="circle"]
content..
[/list]

[list icon="disc" icon_color="#0000ff"]
content..
[/list]

Frames

[frame][/frame]

Suspendisse pellentesque dapibus tellus eu fermentum. Proin tempus aliquam sapien feugiat faucibus. Pellentesque suscipit tincidunt tincidunt.

content...
[frame align="left"]image[/frame]
content...
[frame align="right"]image[/frame]
content...

Image Frames

[image_frame][/image_frame]

Suspendisse pellentesque dapibus tellus eu fermentum. Proin tempus aliquam sapien feugiat faucibus. Pellentesque suscipit tincidunt tincidunt.

content...
[image_frame align="left"]image[/image_frame]
content...
[image_frame align="right"]image[/image_frame]
content...

Clear

[clear /]

Suspendisse pellentesque dapibus tellus eu fermentum. Proin tempus aliquam sapien feugiat faucibus. Pellentesque suscipit tincidunt tincidunt.

Maecenas ut aliquet leo. Nunc massa mi, imperdiet in dignissim a, vehicula in tellus. Aenean pellentesque accumsan nulla ullamcorper condimentum. Vivamus gravida egestas ligula, vel accumsan libero tincidunt nec. Cras ut mauris diam, ut euismod leo. Curabitur pellentesque urna sit amet turpis tempus scelerisque. Praesent sem erat, vestibulum ac semper id, egestas sed nisi.

Donec pellentesque, mauris eget blandit tempus, dolor mauris iaculis erat, in ullamcorper enim lectus fermentum quam. Suspendisse dignissim vulputate enim, vehicula eleifend felis rhoncus sed. Proin augue lectus, eleifend mattis consectetur in, accumsan et ante.

content...
[frame align="left"]image[/frame]
content...
[clear]
content...

Icons

[icon /]

      

[icon icon="user" /]
[icon icon="user" size="20px" /]
[icon icon="user" size="30px" color="red" /]
[icon icon="star" size="30px" color="green" /]
[icon icon="tweet" size="30px" color="blue" /]
[icon icon="cog" size="30px" color="orange" /]
[icon icon="phone-5" size="30px" color="#008040" 
    style="background-color: yellow; border: 1px dashed brown" /]

Buttons:

[button][/button]

Sample Button Blue Button Medium Button Large Green Button

[button href="#"]content...[/button]
[button href="#" skin="blue"]content...[/button]
[button href="#" size="medium"]content...[/button]
[button href="#" size="large" skin="green"]content...[/button]

Icons in Buttons

Settings Users Email 

[button href="#" skin="sand" size="medium"]
    [icon icon="cog" /]Settings
[/button]
[button href="#" skin="sand" size="medium"]
    [icon icon="users" /]Users
[/button]
[button href="#" skin="sand" size="medium"]
    Email[icon icon="email" style="padding:0 0 0 0.35em" /]
[/button]
[button href="#" skin="olive" style="font-size: 40px; line-height: 1.5em"]
    [icon icon="phone" color="#d7f8a1" style="padding:0" /]
[/button]

Links:

[link][/link]

Arrow

arrow link --- arrow link

Settings

settings link --- settings link

email link --- email link

[link href="#" icon="arrow-right-2"]arrow link[/link] ---
    [link href="#" icon_after="arrow-right-2"]arrow link[/link]
[link href="#" icon="cog"]settings link[/link] ---
    [link href="#" icon_after="cog"]settings link[/link]
[link href="#" icon="email-2"]email link[/link] ---
    [link href="#" icon_after="email-2"]email link[/link]

Line Break

[br /]

[br /]

Dividers

[divider /], [divider_top /]

Top

Top (slower)

Bottom

Divider with title

[divider /]
[divider_top /]
[divider link_text="Top (slower)" scroll_duration="3000" /]
[divider link_text="Bottom" link_target="footer" 
	scroll_duration="2000" scroll_easing="bounce" /]
[divider title="Divider with title" /]
[divider color="#ff0000" width="3" type="dashed" /]

Animated scrolling

[top /], [scroll_to][/scroll_to]

Top

Scroll to bottom

Bouncing scroll

[top /]

[scroll_to to="footer"]Scroll to bottom[/scroll_to]

[scroll_to to="footer" duration="2000" easing="bounce"]Bouncing scroll[/scroll_to]

FAQ

[faq], [question][/question], [answer][/answer][/faq]

Q: This is a question?
A: And this is the answer for the question. Phasellus ut dui et tortor ultricies eleifend. Sed in enim risus. Nulla facilisi. Duis volutpat condimentum lacus non imperdiet.

Q: This is a question?
A: And this is the answer for the question. Phasellus ut dui et tortor ultricies eleifend. Sed in enim risus. Nulla facilisi. Duis volutpat condimentum lacus non imperdiet.

[faq]
    [question type="square"]the question...[/question]
    [answer type="square"]the answer...[/answer]
[/faq]

[faq type="disc"]
    [question skin="blue"]the question...[/question]
    [answer skin="red"]the answer...[/answer]
[/faq]