{"id":336,"date":"2013-05-22T10:58:04","date_gmt":"2013-05-22T14:58:04","guid":{"rendered":"http:\/\/demos.bavotasan.com\/magazine-premium\/?page_id=336"},"modified":"2018-09-03T14:49:05","modified_gmt":"2018-09-03T14:49:05","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/demos.bavotasan.com\/magazine-premium\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"<p>Gridiculous Pro is my first premium theme to include a whole new collection of shortcodes. Now it&#8217;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 <a href=\"http:\/\/twitter.github.com\/bootstrap\/index.html\">Twitter Bootstrap<\/a>, I decided to base many of the shortcode elements off of that.<\/p>\n<p>Here are examples of how you can use them all.<\/p>\n<h2>Buttons<\/h2>\n<button type=\"button\" class=\"btn btn-default\">Default<\/button> <code><button type=\"button\" class=\"btn btn-default\">Default<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-primary\">Primary<\/button> <code><button type=\"button\" class=\"btn btn-primary\">Primary<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-info\">Info<\/button> <code><button type=\"button\" class=\"btn btn-info\">Info<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-success\">Success<\/button> <code><button type=\"button\" class=\"btn btn-success\">Success<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-warning\">Warning<\/button> <code><button type=\"button\" class=\"btn btn-warning\">Warning<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-danger\">Danger<\/button> <code><button type=\"button\" class=\"btn btn-danger\">Danger<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-inverse\">Inverse<\/button> <code><button type=\"button\" class=\"btn btn-inverse\">Inverse<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-link\">Link<\/button> <code><button type=\"button\" class=\"btn btn-link\">Link<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-default btn-large\">Default<\/button> <code><button type=\"button\" class=\"btn btn-default btn-large\">Default<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-default btn-small\">Default<\/button> <code><button type=\"button\" class=\"btn btn-default btn-small\">Default<\/button><\/code><\/p>\n<button type=\"button\" class=\"btn btn-default btn-mini\">Default<\/button> <code><button type=\"button\" class=\"btn btn-default btn-mini\">Default<\/button><\/code><\/p>\n<h2>Alerts<\/h2>\n<div class=\"alert\">This is the default alert box<\/div> <code><div class=\"alert\">This is the default alert box<\/div><\/code><\/p>\n<div class=\"alert alert-error\"><h4>Warning!<\/h4>\n<p>This is the error alert box<\/div> <code><div class=\"alert alert-error\">&lt;h4&gt;Warning!&lt;\/h4&gt;This is the error alert box<\/div><\/code><\/p>\n<div class=\"alert alert-success\"><b>Success!<\/b> This is the success alert box<\/div> <code><div class=\"alert alert-success\">&lt;b&gt;Success!&lt;\/b&gt; This is the success alert box<\/div><\/code><\/p>\n<div class=\"alert alert-info\">This is the information alert box<\/div> <code><div class=\"alert alert-info\">This is the information alert box<\/div><\/code><\/p>\n<h2>Labels<\/h2>\n<span class=\"label\">Default<\/span> <code><span class=\"label\">Default<\/span><\/code><\/p>\n<span class=\"label label-success\">Success<\/span> <code><span class=\"label label-success\">Success<\/span><\/code><\/p>\n<span class=\"label label-warning\">Warning<\/span> <code><span class=\"label label-warning\">Warning<\/span><\/code><\/p>\n<span class=\"label label-important\">Important<\/span> <code><span class=\"label label-important\">Important<\/span><\/code><\/p>\n<span class=\"label label-info\">Info<\/span> <code><span class=\"label label-info\">Info<\/span><\/code><\/p>\n<span class=\"label label-inverse\">Inverse<\/span> <code><span class=\"label label-inverse\">Inverse<\/span><\/code><\/p>\n<h2>Badges<\/h2>\n<span class=\"badge\">1<\/span> <code><span class=\"badge\">1<\/span><\/code><\/p>\n<span class=\"badge badge-success\">2<\/span> <code><span class=\"badge badge-success\">2<\/span><\/code><\/p>\n<span class=\"badge badge-warning\">3<\/span> <code><span class=\"badge badge-warning\">3<\/span><\/code><\/p>\n<span class=\"badge badge-important\">4<\/span> <code><span class=\"badge badge-important\">4<\/span><\/code><\/p>\n<span class=\"badge badge-info\">5<\/span> <code><span class=\"badge badge-info\">5<\/span><\/code><\/p>\n<span class=\"badge badge-inverse\">6<\/span> <code><span class=\"badge badge-inverse\">6<\/span><\/code><\/p>\n<h2>Hero unit<\/h2>\n<div class=\"hero-unit\"><h1>Unit Title<\/h1>\n<p>This is a simple hero unit, very similar to a sticky posts on the home page.<\/p><\/div>\n<pre><div class=\"hero-unit\">&lt;h1&gt;Unit Title&lt;\/h1&gt;\r\n&lt;p&gt;This is a simple hero unit, very similar to a sticky posts on the home page.&lt;\/p&gt;<\/div>\r\n<\/pre>\n<h2>Images<\/h2>\n<img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903.jpeg\" alt=\"\" class=\"img-rounded\" \/>\n<pre><img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903_square.jpeg\" alt=\"\" class=\"img-rounded\" \/><\/pre>\n<img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903_square.jpeg\" alt=\"\" class=\"img-circle\" \/>\n<pre><img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903_square.jpeg\" alt=\"\" class=\"img-circle\" \/><\/pre>\n<div class=\"alert\"><strong>Note:<\/strong> In order for the circular image to work properly, your original image should be square. Otherwise, it will look like an oval.<\/div>\n<img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903.jpeg\" alt=\"\" class=\"img-polaroid\" \/>\n<pre><img decoding=\"async\" src=\"http:\/\/demos.bavotasan.com\/gridiculous-pro\/files\/2012\/09\/Pixmac000022074903.jpeg\" alt=\"\" class=\"img-polaroid\" \/><\/pre>\n<div class=\"alert alert-error\"><strong>Heads up!<\/strong> The rounded and circular image shortcode will not display correctly in IE7-8 due to the lack of <code>border-radius<\/code> support.<\/div>\n<h2>Author Box<\/h2>\n<div id=\"author-info\" class=\"hero-unit\"><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/a61defa750e7b7569b79b1b3e0480f335f34d9922adfa1c942392ecb439e8fbd?s=80&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/a61defa750e7b7569b79b1b3e0480f335f34d9922adfa1c942392ecb439e8fbd?s=160&#038;d=mm&#038;r=g 2x' class='avatar avatar-80 photo' height='80' width='80' \/><div class=\"author-text\"><h4>c.bavota<\/h4><p>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.<\/p><\/div><\/div>\n<code><div id=\"author-info\" class=\"hero-unit\"><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/a61defa750e7b7569b79b1b3e0480f335f34d9922adfa1c942392ecb439e8fbd?s=80&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/a61defa750e7b7569b79b1b3e0480f335f34d9922adfa1c942392ecb439e8fbd?s=160&#038;d=mm&#038;r=g 2x' class='avatar avatar-80 photo' height='80' width='80' \/><div class=\"author-text\"><h4>c.bavota<\/h4><p>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.<\/p><\/div><\/div><\/code><\/p>\n<h2>Columns<\/h2>\n<div class=\"columns\" style=\"-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-gap:20px;-webkit-column-gap:20px;column-gap:20px\">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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<br \/><\/div>\n<p><code><div class=\"columns\" style=\"-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-gap:20px;-webkit-column-gap:20px;column-gap:20px\">Your text<\/div><\/code><\/p>\n<div class=\"alert alert-error\"><strong>Heads up!<\/strong> The columns shortcode will not display correctly in IE due to the lack of support.<\/div>\n<h2>Carousel<\/h2>\n<div id=\"myCarousel\" data-interval=\"5000\" class=\"carousel slide\"><div class=\"carousel-inner\"><div class=\"item active\"><img decoding=\"async\" src=\"http:\/\/getbootstrap.com\/2.3.2\/assets\/img\/bootstrap-mdo-sfmoma-01.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>First Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div>\n<div class=\"item \"><img decoding=\"async\" src=\"http:\/\/getbootstrap.com\/2.3.2\/assets\/img\/bootstrap-mdo-sfmoma-02.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>Second Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div>\n<div class=\"item \"><img decoding=\"async\" src=\"http:\/\/getbootstrap.com\/2.3.2\/assets\/img\/bootstrap-mdo-sfmoma-03.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>Third Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div><\/div><a class=\"left carousel-control\" href=\"#myCarousel\" data-slide=\"prev\">&lsaquo;<\/a><a class=\"right carousel-control\" href=\"#myCarousel\" data-slide=\"next\">&rsaquo;<\/a><\/div>\n<pre><div id=\"myCarousel\" data-interval=\"5000\" class=\"carousel slide\"><div class=\"carousel-inner\"><div class=\"item active\"><img decoding=\"async\" src=\"http:\/\/twitter.github.com\/bootstrap\/assets\/img\/bootstrap-mdo-sfmoma-01.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>First Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div>\r\n   <div class=\"item \"><img decoding=\"async\" src=\"http:\/\/twitter.github.com\/bootstrap\/assets\/img\/bootstrap-mdo-sfmoma-02.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>Second Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div>\r\n   <div class=\"item \"><img decoding=\"async\" src=\"http:\/\/twitter.github.com\/bootstrap\/assets\/img\/bootstrap-mdo-sfmoma-03.jpg\" alt=\"\" \/><div class=\"carousel-caption\"><h4>Third Thumbnail label<\/h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/p><\/div><\/div><\/div><a class=\"left carousel-control\" href=\"#myCarousel\" data-slide=\"prev\">&lsaquo;<\/a><a class=\"right carousel-control\" href=\"#myCarousel\" data-slide=\"next\">&rsaquo;<\/a><\/div>\r\n<\/pre>\n<div class=\"alert\"><strong>Note:<\/strong> If you&#8217;re not a fan of the slide effect in the carousel, just remove the <code>slide=\"slide\"<\/code> parameter from the carousel shortcode.<\/div>\n<h2>Tooltip<\/h2>\n<a href=\"#\" rel=\"tooltip\" data-placement=\"top\" title=\"This is a tooltip\">Hover over me<\/a>\u00a0\u00a0\u00a0<a href=\"#\" rel=\"tooltip\" data-placement=\"left\" title=\"This is a tooltip\">Left Tooltip<\/a>\u00a0\u00a0\u00a0<a href=\"#\" rel=\"tooltip\" data-placement=\"right\" title=\"This is a tooltip\">Right Tooltip<\/a>\u00a0\u00a0\u00a0<a href=\"#\" rel=\"tooltip\" data-placement=\"bottom\" title=\"This is a tooltip\">Bottom Tooltip<\/a>\n<p><code><a href=\"#\" rel=\"tooltip\" data-placement=\"left\" title=\"This is a tooltip\">Your text<\/a><\/code><\/p>\n<div class=\"alert\"><strong>Note:<\/strong> Placement options are top, bottom, left and right. The default is top.<\/div>\n<h2>Tabs<\/h2>\n<ul class=\"nav nav-tabs\" id=\"myTab\"><li class=\"active\"><a href=\"#first\">First Tab<\/a><\/li>\n<li class=\"\"><a href=\"#second\">Second Tab<\/a><\/li>\n<li class=\"\"><a href=\"#third\">Third Tab<\/a><\/li><\/ul>\n<div class=\"tab-content\"><div class=\"tab-pane active\" id=\"first\">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.<\/div>\n<div class=\"tab-pane \" id=\"second\">Donec id elit non mi porta gravida at eget metus.<\/div>\n<div class=\"tab-pane \" id=\"third\">Nulla vitae elit libero, a pharetra augue.<\/div><\/div>\n<pre><ul class=\"nav nav-tabs\" id=\"myTab\"><li class=\"active\"><a href=\"#first\">First Tab<\/a><\/li>\r\n      <li class=\"\"><a href=\"#second\">Second Tab<\/a><\/li>\r\n      <li class=\"\"><a href=\"#third\">Third Tab<\/a><\/li><\/ul>\r\n   \r\n   <div class=\"tab-content\"><div class=\"tab-pane active\" id=\"first\">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.<\/div>\r\n       <div class=\"tab-pane \" id=\"second\">Donec id elit non mi porta gravida at eget metus.<\/div>\r\n       <div class=\"tab-pane \" id=\"third\">Nulla vitae elit libero, a pharetra augue.<\/div><\/div>\r\n<\/pre>\n<h2>WideText<\/h2>\n<h1><span class=\"widetext\">FULL WIDTH TEXT<\/span>\n<span class=\"widetext\">IS EASY TO ACHIEVE<\/span>\n<span class=\"widetext\">WITH THE WIDETEXT<\/span>\n<span class=\"widetext\">JQUERY PLUGIN<\/span><\/h1>\n<pre><span class=\"widetext\">FULL WIDTH TEXT<\/span>\r\n<span class=\"widetext\">IS EASY TO ACHIEVE<\/span>\r\n<span class=\"widetext\">WITH THE WIDETEXT<\/span>\r\n<span class=\"widetext\">JQUERY PLUGIN<\/span>\r\n<\/pre>\n<div class=\"alert\"><strong>Note:<\/strong> I surrounded the widetext shortcode with an H1 tag in order to style it.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gridiculous Pro is my first premium theme to include a whole new collection of shortcodes. Now it&#8217;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&hellip;<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"https:\/\/demos.bavotasan.com\/magazine-premium\/shortcodes\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-336","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/pages\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":0,"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/pages\/336\/revisions"}],"wp:attachment":[{"href":"https:\/\/demos.bavotasan.com\/magazine-premium\/wp-json\/wp\/v2\/media?parent=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}