{"id":199,"date":"2013-03-12T10:49:47","date_gmt":"2013-03-12T10:49:47","guid":{"rendered":"http:\/\/www.thatblognetwork.com\/_zero\/?page_id=199"},"modified":"2013-03-30T22:19:55","modified_gmt":"2013-03-30T22:19:55","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/www.bonfirethemes.com\/_brave\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"<p style=\"font-size:15px;color:#777;line-height:20px\">*Not a fan of shortcodes? That&#8217;s perfectly fine. All of this theme&#8217;s shortcodes come in a plugin, so it&#8217;s completely up to you whether or not you want to use any of them.<\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\">COLUMN SHORTCODES<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;\"><\/div>\n<p style=\"text-align: center;\">Column shortcodes allow you to easily present content in multiple columns. That includes text and images (either separately or together), as well as videos. 2-5 columns are supported. A few examples below.<\/p>\n<p>&nbsp;<\/p>\n<h6 style=\"text-align: center; color: #777;\">Images + text<\/h6>\n<div class=\"bonfire-columns-wrapper\"><div class=\"bonfire-3-columns\"><p><img loading=\"lazy\" src=\"http:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg\" alt=\"Machine girl\" width=\"480\" height=\"379\" class=\"size-full wp-image-480\" srcset=\"https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg 480w, https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03-300x236.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/>Images and text placed into three columns.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg\" alt=\"Machine girl\" width=\"480\" height=\"379\" class=\"size-full wp-image-480\" srcset=\"https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg 480w, https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03-300x236.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/>Images and text placed into three columns.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg\" alt=\"Machine girl\" width=\"480\" height=\"379\" class=\"size-full wp-image-480\" srcset=\"https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03.jpg 480w, https:\/\/www.bonfirethemes.com\/_brave\/wp-content\/uploads\/2013\/03\/portfolio-03-300x236.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/>Images and text placed into three columns.<br \/>\n<\/p><\/div><\/div>\n<p>&nbsp;<\/p>\n<h6 style=\"text-align: center; color: #777;\">Videos<\/h6>\n<div class=\"bonfire-columns-wrapper\"><div class=\"bonfire-2-columns\"><p>\n<div class=\"video-container\"><iframe src=\"https:\/\/player.vimeo.com\/video\/50522981\"><\/iframe><\/div>\n<div class=\"video-container\"><iframe src=\"https:\/\/player.vimeo.com\/video\/18011143\"><\/iframe><\/div>\n<p><\/p><\/div><\/div><br \/>\n<hr class=\"solid1\" style=\"max-width:\"><br \/>\n&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Buttons<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Buttons are great for highlighting that special and all-important link.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"text-align: center;\"><a href=\"#\"><span class=\"button\" style=\"border-radius:1px;font-size:14px;display:inline-block;\">Button<\/span><\/a><a href=\"#\"><span class=\"buttonblue\" style=\"border-radius:1px;font-size:14px;display:inline-block;\">Button<\/span><\/a><a href=\"#\"><span class=\"buttonteal\" style=\"border-radius:1px;font-size:14px;display:inline-block;\">Button<\/span><\/a><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>&nbsp;<\/p>\n<h6>What you can customize:<\/h6>\n<ul>\n<li>color (white, red, blue, green, magenta, teal, purple, orange, pink)<\/li>\n<li>text size<\/li>\n<li>corner radius<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<hr class=\"solid1\" style=\"max-width:\"><\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Dividers<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Giving content room to breathe is important, we can all agree. Hence this healthy selection of dividers that can be used to split and spice up content.<\/p>\n<p>&nbsp;<\/p>\n<hr class=\"solid1\" style=\"max-width:\">\n<hr class=\"solid2\" style=\"max-width:\">\n<hr class=\"solid3\" style=\"max-width:\">\n<hr class=\"double1\" style=\"max-width:\">\n<hr class=\"double2\" style=\"max-width:\">\n<hr class=\"double3\" style=\"max-width:\">\n<hr class=\"double4\" style=\"max-width:\">\n<hr class=\"dotted1\" style=\"max-width:\">\n<hr class=\"dotted2\" style=\"max-width:\">\n<hr class=\"dotted3\" style=\"max-width:\">\n<hr class=\"dotted4\" style=\"max-width:\">\n<hr class=\"dotted5\" style=\"max-width:\">\n<hr class=\"dashed1\" style=\"max-width:\">\n<hr class=\"dashed2\" style=\"max-width:\">\n<hr class=\"dashed3\" style=\"max-width:\">\n<hr class=\"shadowdown1\" style=\"max-width:\">\n<hr class=\"shadowup1\" style=\"max-width:\">\n<hr class=\"shadowdown2\" style=\"max-width:\">\n<hr class=\"shadowup2\" style=\"max-width:\">\n<h6>What you can customize:<\/h6>\n<ul>\n<li>divider style<\/li>\n<li>color (grey, red, blue, green, magenta, teal, purple, orange, pink)<\/li>\n<li>width<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<hr class=\"solid1\" style=\"max-width:\"><br \/>\n&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Alerts<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Alert boxes are a fantastic way to quickly and easily give the visitor important information.<\/p>\n<p>&nbsp;<br \/>\n\n\t\t<div id=\"alert\" class=\"alert\" style=\"max-width:;float:;border-radius:2px;text-align:;font-size:14px;\">\n\t\t<div id=\"alert-button\"><\/div>\n\t\t<div class=\"alert-inner\">The default alert<\/div>\n\t\t<\/div>\n\t\t\n\t\t<div id=\"alert1\" class=\"alertblue\" style=\"max-width:;float:;border-radius:2px;text-align:center;font-size:14px;\">\n\t\t<div id=\"alert-button1\"><\/div>\n\t\t<div class=\"alert-inner\">Blue alert, centered text<\/div>\n\t\t<\/div>\n\t\t\n\t\t<div id=\"alert2\" class=\"alertmagenta\" style=\"max-width:;float:;border-radius:2px;text-align:;font-size:14px;\">\n\t\t<div id=\"alert-button2\"><\/div>\n\t\t<div class=\"alert-inner\">A magenta alert with a bunch of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\n\t\t<\/div>\n\t\t<\/p>\n<h6>What you can customize:<\/h6>\n<ul>\n<li>color (white, red, blue, green, magenta, teal, purple, orange, pink)<\/li>\n<li>width<\/li>\n<li>height<\/li>\n<li>position<\/li>\n<li>corner radius<\/li>\n<li>text size<\/li>\n<li>text align<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<hr class=\"solid1\" style=\"max-width:\"><\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Boxes<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Placing content in simple colored boxes is a proven way to make sure your visitor doesn&#8217;t miss something vital.<\/p>\n<p>&nbsp;<br \/>\n<div class=\"box\" style=\"max-width:;height:;float:;border-radius:2px;text-align:;box-shadow: inset 0 0 10px 1px rgba(255,255,255,0.02), 1px 1px 0px rgba(0, 0, 0, 0.05);font-size:14px;\">The default box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/div><div class=\"boxpink\" style=\"max-width:;height:;float:;border-radius:4px;text-align:center;box-shadow: inset 0 0 10px 1px rgba(255,255,255,0.02), 1px 1px 0px rgba(0, 0, 0, 0.05);font-size:14px;\">Orange box, slightly rounded corners. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/div><\/p>\n<h6>What you can customize:<\/h6>\n<ul>\n<li>color (default, red, blue, green, magenta, teal, purple, orange, pink)<\/li>\n<li>width<\/li>\n<li>height<\/li>\n<li>position<\/li>\n<li>corner radius<\/li>\n<li>text size<\/li>\n<li>text align<\/li>\n<li>inner shadow<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<hr class=\"solid1\" style=\"max-width:\"><\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Toggle boxes<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Toggle boxes suit the situations when you want the user to interact with some specific bit of content.<\/p>\n<p>&nbsp;<br \/>\n\n\t\t<div class=\"toggleboxpurple\" style=\"max-width:;float:;border-radius:2px;text-align:;font-size:14px;\">\n\t\t<div id=\"toggleopen-button\"><\/div>\n\t\t<div id=\"boxopentoggle\">Open on page load<\/div>\n\t\t<div id=\"boxopen\" style=\"border-radius:2px;\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/div>\n\t\t<\/div>\n\t\t\n\t\t<div class=\"toggleboxteal\" style=\"max-width:;float:;border-radius:2px;text-align:;font-size:14px;\">\n\t\t<div id=\"toggleclosed-button\"><\/div>\n\t\t<div id=\"boxclosedtoggle\">Closed on page load<\/div>\n\t\t<div id=\"boxclosed\" style=\"border-radius:2px;\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/div>\n\t\t<\/div>\n\t\t<\/p>\n<h6>What you can customize:<\/h6>\n<ul>\n<li>color (default, red, blue, green, magenta, teal, purple, orange, pink)<\/li>\n<li>title<\/li>\n<li>width<\/li>\n<li>position<\/li>\n<li>corner radius<\/li>\n<li>text align<\/li>\n<li>text size<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<hr class=\"solid1\" style=\"max-width:\"><br \/>\n&nbsp;<\/p>\n<h1 style=\"text-align: center;\">Creativity<\/h1>\n<div class=\"mini-divider\" style=\"margin: 10px auto 18px auto !important;;\"><\/div>\n<p style=\"text-align: center;\">Our shortcodes can be wrapped around any content, including text, galleries, videos and even other shortcodes. So if you want to go there, you can come up with pretty interesting ways to present your content, especially given the customization options each shortcode offers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>*Not a fan of shortcodes? That&#8217;s perfectly fine. All of this theme&#8217;s shortcodes come in a plugin, so it&#8217;s completely up to you whether or not you want to use any of them. &nbsp; COLUMN SHORTCODES Column shortcodes allow you to easily present content in multiple columns. That includes text and images (either separately or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-no-title.php","meta":[],"_links":{"self":[{"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/pages\/199"}],"collection":[{"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/comments?post=199"}],"version-history":[{"count":1,"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/pages\/199\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/pages\/199\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/www.bonfirethemes.com\/_brave\/wp-json\/wp\/v2\/media?parent=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}