Shortcodes

Gridiculous Pro is my first premium theme to include a whole new collection of shortcodes. Now it’s a whole lot easier for you to get some awesome looking elements onto your page. Since many people have been raving about all the great styles and components in Twitter Bootstrap, I decided to base many of the shortcode elements off of that.

Here are examples of how you can use them all.

Buttons

Alerts

This is the default alert box
This is the default alert box

Warning!

This is the error alert box

<h4>Warning!</h4>This is the error alert box

Success! This is the success alert box
<b>Success!</b> This is the success alert box

This is the information alert box
This is the information alert box

Labels

Default Default

Success Success

Warning Warning

Important Important

Info Info

Inverse Inverse

Badges

1 1

2 2

3 3

4 4

5 5

6 6

Hero unit

Unit Title

This is a simple hero unit, very similar to a sticky posts on the home page.

<h1>Unit Title</h1> <p>This is a simple hero unit, very similar to a sticky posts on the home page.</p>

Images

Note: In order for the circular image to work properly, your original image should be square. Otherwise, it will look like an oval.
Heads up! The rounded and circular image shortcode will not display correctly in IE7-8 due to the lack of border-radius support.

Author Box

c.bavota

c.bavota is a web developer from Montreal. He runs bavotasan.com and Themes by bavotasan.com. Every once in a while you will see him floating around cyberspace.

c.bavota

c.bavota is a web developer from Montreal. He runs bavotasan.com and Themes by bavotasan.com. Every once in a while you will see him floating around cyberspace.

Columns

Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.

Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.

Your text

Heads up! The columns shortcode will not display correctly in IE due to the lack of support.

Carousel


Note: If you’re not a fan of the slide effect in the carousel, just remove the slide="slide" parameter from the carousel shortcode.

Tooltip

Hover over me   Left Tooltip   Right Tooltip   Bottom Tooltip

Your text

Note: Placement options are top, bottom, left and right. The default is top.

Tabs

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
Nulla vitae elit libero, a pharetra augue.

   
   
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
Nulla vitae elit libero, a pharetra augue.

WideText

FULL WIDTH TEXT IS EASY TO ACHIEVE WITH THE WIDETEXT JQUERY PLUGIN

FULL WIDTH TEXT
IS EASY TO ACHIEVE
WITH THE WIDETEXT
JQUERY PLUGIN
Note: I surrounded the widetext shortcode with an H1 tag in order to style it.