{"id":149,"date":"2010-08-12T05:57:09","date_gmt":"2010-08-12T05:57:09","guid":{"rendered":"http:\/\/demo.woothemes.com\/canvas\/"},"modified":"2010-08-12T05:57:09","modified_gmt":"2010-08-12T05:57:09","slug":"shortcodes","status":"publish","type":"page","link":"http:\/\/gnomehouse.com\/?page_id=149","title":{"rendered":"Shortcodes"},"content":{"rendered":"<h3 id=\"intro\">Introduction<\/h3>\n<p>Included in the WooFramework is a few custom shortcodes that you can use in all our themes. Shortcodes work in posts, pages and even widgets. For extensive overview on all available shortcodes and usage you can check out the <a href=\"http:\/\/www.woothemes.com\/woocodex\/shortcodes\/\">WooCodex<\/a>.<\/p>\n<h3 id=\"buttons\">Buttons<\/h3>\n<p><em>These CSS3 buttons look amazing in all modern browsers, and although they won&#8217;t look as amazing, they will still work in older browsers.<\/em><\/p>\n<p><strong>Colored Buttons<\/strong><\/p>\n<a href=\"#\" class=\"woo-sc-button  custom\" style=\"background:;border-color:\"><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  red\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  orange\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  green\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  aqua\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  teal\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  purple\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  pink\" ><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-\">Button<\/span><\/a>\n<p><strong>Small and Large Buttons<\/strong><\/p>\n<a href=\"#\" class=\"woo-sc-button  custom small\" style=\"background:;border-color:\"><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  custom\" style=\"background:;border-color:\"><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  custom large\" style=\"background:;border-color:\"><span class=\"woo-\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  custom xl\" style=\"background:;border-color:\"><span class=\"woo-\">Button<\/span><\/a>\n<p><strong>Icons Buttons<\/strong><\/p>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-alert\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-tick\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-info\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-note\">Button<\/span><\/a>\n<a href=\"#\" class=\"woo-sc-button  silver\" ><span class=\"woo-download\">Button<\/span><\/a>\n<p><strong>Custom Button<\/strong><\/p>\n<a href=\"#\" class=\"woo-sc-button dark my-button custom\" style=\"background:#f0f0f0;border-color:#555\"><span class=\"woo-info\">Button<\/span><\/a>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"boxes\">Info Boxes<\/h3>\n<p><em>Info boxes are nice to use if you need to inform your site visitors of something in a more visual manner.<\/em><\/p>\n<div class=\"threecol-one\"><div class=\"woo-sc-box info   \">This is an info box<\/div><\/div>\n<div class=\"threecol-one\"><div class=\"woo-sc-box note   \">This is a note box<\/div><\/div>\n<div class=\"threecol-one last\"><div class=\"woo-sc-box tick  rounded full\">is is a tick box<\/div><\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"threecol-one\"><div class=\"woo-sc-box download   \">This is an download box<\/div><\/div>\n<div class=\"threecol-one\"><div class=\"woo-sc-box alert   \">This is an alert box<\/div><\/div>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"related\">Related Posts<\/h3>\n<p><em>With this shortcode you can easily show related posts by tag. This only works on posts which have tags that exist on other posts.<\/em><br \/>\n<br \/>\n<div class=\"woo-sc-divider\"><\/div><\/p>\n<h3 id=\"twitter\">Social Buttons<\/h3>\n<div class=\"sixcol-one\"><div class=\"woo-sc-twitter left\"><a href=\"http:\/\/twitter.com\/share\" class=\"twitter-share-button\">Tweet<\/a><script type=\"text\/javascript\" src=\"http:\/\/platform.twitter.com\/widgets.js\"><\/script><\/div><\/div>\n<div class=\"sixcol-one\"><script type=\"text\/javascript\">tweetmeme_url = 'http:\/\/gnomehouse.com\/?page_id=149';<\/script><div class=\"woo-tweetmeme left\"><script type=\"text\/javascript\" src=\"http:\/\/tweetmeme.com\/i\/scripts\/button.js\"><\/script><\/div><\/div>\n<div class=\"sixcol-one\">\r\n\t<script type=\"text\/javascript\">\r\n\t(function() {\r\n\tvar s = document.createElement( 'SCRIPT'), s1 = document.getElementsByTagName( 'SCRIPT')[0];\r\n\ts.type = 'text\/javascript';\r\n\ts.async = true;\r\n\ts.src = 'http:\/\/widgets.digg.com\/buttons.js';\r\n\ts1.parentNode.insertBefore(s, s1);\r\n\t})();\r\n\t<\/script>\r\n\t<div class=\"woo-digg none\"><a class=\"DiggThisButton DiggMedium\"http:\/\/gnomehouse.com\/?page_id=149><\/a><\/div><\/div>\n<div class=\"sixcol-three last\">\r\n<div class=\"woo-fblike none\">\r\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http:\/\/gnomehouse.com\/?page_id=149&#038;layout=standard&#038;show_faces=false&#038;width=450&#038;action=like&#038;colorscheme=light&#038;font=arial&#038;locale=en_US\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:auto; height:25px;\"><\/iframe>\r\n<\/div>\r\n\t<\/div>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"rule\">Horizontal Rule<\/h3>\n<p><em>You can easily break up your text on a page or post by adding either a horizontal rule or a divider (same as hr only no border).<\/em><br \/>\n<div class=\"woo-sc-hr\"><\/div><\/p>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"columns\">Columns<\/h3>\n<p><em>Columns are an easy way to style your post or page with multiple columns, from two columns to six columns. You can make columns span more one column to mix column widths also.<\/em><\/p>\n<div class=\"twocol-one\">\n<p><strong>Two columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"twocol-one last\">\n<p><strong>Two columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"threecol-one\">\n<p><strong>Three columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"threecol-one\">\n<p><strong>Three columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"threecol-one last\">\n<p><strong>Three columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"threecol-one\">\n<p><strong>Three columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"threecol-two last\">\n<p><strong>Three columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"fourcol-one last\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"twocol-one last\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider flat\"><\/div>\n<div class=\"fourcol-one\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"fourcol-three last\">\n<p><strong>Four columns<\/strong><br \/>\nPellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p>\n<\/div>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"quote\">Quote<\/h3>\n<p><em>Add a styled quote to your page or post and float it left or right with or without box.<\/em><\/p>\n<div class=\"woo-sc-quote\"><p>Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.<\/p><\/div>\n<div class=\"woo-sc-divider\"><\/div>\n<h3 id=\"quote\">Icon Link<\/h3>\n<p><em>Add a styled link with an icon<\/em><\/p>\n<p>You can go ahead and <span class=\"woo-sc-ilink\"><a class=\"download\" href=\"http:\/\/www.woothemes.com\">Download<\/a><\/span> <\/p>\n<div class=\"woo-sc-divider\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Included in the WooFramework is a few custom shortcodes that you can use in all our themes. Shortcodes work in posts, pages and even widgets. For extensive overview on all available shortcodes and usage you can check out the WooCodex. Buttons These CSS3 buttons look amazing in all modern browsers, and although they won&#8217;t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template-fullwidth.php","meta":{"footnotes":""},"class_list":["post-149","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/gnomehouse.com\/index.php?rest_route=\/wp\/v2\/pages\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gnomehouse.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/gnomehouse.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/gnomehouse.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gnomehouse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":0,"href":"http:\/\/gnomehouse.com\/index.php?rest_route=\/wp\/v2\/pages\/149\/revisions"}],"wp:attachment":[{"href":"http:\/\/gnomehouse.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}