{"id":66,"date":"2015-12-02T17:34:36","date_gmt":"2015-12-02T17:34:36","guid":{"rendered":"http:\/\/www.cssigniter.com\/preview\/roxima\/?page_id=57"},"modified":"2015-12-02T17:34:36","modified_gmt":"2015-12-02T17:34:36","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/www.modo-on.com\/?page_id=66","title":{"rendered":"Shortcodes"},"content":{"rendered":"<h2>Button shortcode: [[button][\/button]]<\/h2>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>url<\/strong> &#8211; Where the button links. Any valid link. Default &#8216;<em>#<\/em>&#8216;.<\/li>\n<li><strong>target<\/strong> &#8211; Where the link should open. Any one of: &#8216;<em>_blank<\/em>&#8216;, &#8216;<em>_self<\/em>&#8216;, &#8216;<em>_parent<\/em>&#8216;, &#8216;<em>_top<\/em>&#8216;. Default <em>empty<\/em>.<\/li>\n<li><strong>size<\/strong> &#8211; The size of the button. Any one of: &#8216;<em>small<\/em>&#8216;, &#8216;<em>medium<\/em>&#8216;, &#8216;<em>large<\/em>&#8216;. Default &#8216;<em>medium<\/em>&#8216;.<\/li>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the border&#8217;s corner. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a><\/li>\n<li><strong>icon<\/strong> &#8211; A <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">Font-Awesome icon<\/a> name. E.g. &#8216;<em>fa-download<\/em>&#8216;<\/li>\n<li><strong>spin_icon<\/strong> &#8211; Turn icon spinning on. See <a href=\"#spin_icon_attributes\">spin_icon<\/a>.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[button url=\u00bbhttp:\/\/www.cssigniter.com\u00bb size=\u00bblarge\u00bb]A button to CSSIgniter[\/button] [button url=\u00bbhttp:\/\/www.cssigniter.com\u00bb size=\u00bblarge\u00bb scheme=\u00bbred\u00bb]A button to CSSIgniter[\/button] [button url=\u00bbhttp:\/\/www.cssigniter.com\u00bb size=\u00bblarge\u00bb scheme=\u00bbyellow\u00bb]A button to CSSIgniter[\/button]<br \/>\n[demo][button url=\u00bbhttp:\/\/www.cssigniter.com\u00bb size=\u00bblarge\u00bb]A button to CSSIgniter[\/button][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[button url=\u00bbhttp:\/\/www.google.com\u00bb target=\u00bb_blank\u00bb]New window to Google[\/button] [button url=\u00bbhttp:\/\/www.google.com\u00bb target=\u00bb_blank\u00bb scheme=\u00bbred\u00bb]New window to Google[\/button] [button url=\u00bbhttp:\/\/www.google.com\u00bb target=\u00bb_blank\u00bb scheme=\u00bbyellow\u00bb]New window to Google[\/button]<br \/>\n[demo][button url=\u00bbhttp:\/\/www.google.com\u00bb target=\u00bb_blank\u00bb scheme=\u00bbred\u00bb]New window to Google[\/button][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[button size=\u00bbsmall\u00bb scheme=\u00bbpink\u00bb border_color=\u00bb#c9054f\u00bb border_width=\u00bb2px\u00bb icon=\u00bbfa-download\u00bb]Download now[\/button] [button size=\u00bbsmall\u00bb scheme=\u00bbyellow\u00bb border_color=\u00bb#e5d35b\u00bb border_width=\u00bb2px\u00bb icon=\u00bbfa-download\u00bb]Download now[\/button] [button size=\u00bbsmall\u00bb scheme=\u00bbblue\u00bb border_color=\u00bb#0e76b8&#8243; border_width=\u00bb2px\u00bb icon=\u00bbfa-download\u00bb]Download now[\/button]<br \/>\n[demo][button size=\u00bbsmall\u00bb scheme=\u00bbpink\u00bb border_color=\u00bb#c9054f\u00bb border_width=\u00bb2px\u00bb icon=\u00bbfa-download\u00bb]Download now[\/button][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[button scheme=\u00bbyellow\u00bb fg_color=\u00bbrgb(10, 20, 30)\u00bb icon=\u00bbfa-refresh\u00bb spin]Refresh[\/button] [button scheme=\u00bbgreen\u00bb fg_color=\u00bbrgb(10, 20, 30)\u00bb icon=\u00bbfa-refresh\u00bb spin]Refresh[\/button] [button scheme=\u00bbred\u00bb fg_color=\u00bbrgb(10, 20, 30)\u00bb icon=\u00bbfa-refresh\u00bb spin]Refresh[\/button]<br \/>\n[demo][button scheme=\u00bbgreen\u00bb fg_color=\u00bbrgb(10, 20, 30)\u00bb icon=\u00bbfa-refresh\u00bb spin]Refresh[\/button][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[button icon=\u00bbfa-spinner\u00bb corners=\u00bb5px\u00bb spin]Rounded[\/button] [button icon=\u00bbfa-spinner\u00bb corners=\u00bb5px\u00bb scheme=\u00bbred\u00bb spin]Rounded[\/button] [button icon=\u00bbfa-spinner\u00bb corners=\u00bb5px\u00bb scheme=\u00bbyellow\u00bb spin]Rounded[\/button]<br \/>\n[demo][button icon=\u00bbfa-spinner\u00bb corners=\u00bb5px\u00bb spin]Rounded[\/button][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>button<\/em> shortcode used to accept a <em>type<\/em> and <em>color<\/em> attributes that are now deprecated. Valid values for those attributes were:<\/p>\n<ul>\n<li><strong>type<\/strong> &#8211; Any one of: <em>download, check, envelope, cancel, cart<\/em>. Use of the <em>type<\/em> attributes is discouraged and unsupported. Existing shortcodes will get mapped to a similar <em>icon<\/em>.<\/li>\n<li><strong>color<\/strong> &#8211; Any one of: <em>grey, white, blue, yellow, green, red, black, purple<\/em>. Use of the <em>color<\/em> attributes is discouraged and unsupported. Existing shortcodes will get mapped to a similar <em>scheme<\/em>.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Box shortcode: [[box][\/box]]<\/h2>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the border&#8217;s corner. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a><\/li>\n<li><strong>icon<\/strong> &#8211; A <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">Font-Awesome icon<\/a> name. E.g. &#8216;<em>fa-download<\/em>&#8216;<\/li>\n<li><strong>spin_icon<\/strong> &#8211; Turn icon spinning on. See <a href=\"#spin_icon_attributes\">spin_icon<\/a>.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[box]Just a box with some content in it.[\/box][demo][box]Just a box with some content in it.[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box scheme=\u00bbred\u00bb]A red box[\/box][demo][box scheme=\u00bbred\u00bb]A red box[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box scheme=\u00bbred\u00bb border_color=\u00bb#000000&#8243; border_width=\u00bbthick\u00bb icon=\u00bbfa-download\u00bb]With a black border and icon[\/box][demo][box scheme=\u00bbred\u00bb border_color=\u00bb#000000&#8243; border_width=\u00bbthick\u00bb icon=\u00bbfa-download\u00bb]With a black border and icon[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box scheme=\u00bbgreen\u00bb fg_color=\u00bbrgb(255,255,255)\u00bb icon=\u00bbfa-refresh\u00bb spin]Custom foreground color[\/box][demo][box scheme=\u00bbgreen\u00bb fg_color=\u00bbrgb(255, 255, 255)\u00bb icon=\u00bbfa-refresh\u00bb spin]Custom foreground color[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box icon=\u00bbfa-spinner\u00bb corners=\u00bb3px\u00bb spin]Rounded corners on a spinning icon.[\/box][demo][box icon=\u00bbfa-spinner\u00bb corners=\u00bb20px\u00bb spin]Rounded corners on a spinning icon.[\/box][\/demo]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>box<\/em> shortcode used to accept a <em>type<\/em> attribute that is now deprecated. Valid values for this attribute were:<\/p>\n<ul>\n<li>type &#8211; Any one of: <em>normal, info, warning, download, error, success<\/em>. Use of the <em>type<\/em> attribute is discouraged and unsupported. Existing shortcodes will get mapped to a similar <em>icon<\/em>.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Grid shortcodes: [[row][\/row]], [[column][\/column]], [[col][\/col]]<\/h2>\n<p>You can divide you content in columns by using the <em>row<\/em>, <em>column<\/em> and <em>col<\/em> shortcodes. <em>col<\/em> is just an alias of the <em>column<\/em> shortcode, so you can use whichever feels right to you. You need to wrap a set of columns in a row. Each row takes up the full width of the content area and is divided in 12 columns. For each <em>column<\/em> you define, you need to specify how many columns it will span so they all add up to 12. For example, you can have one column spanning 12 columns, or two columns spanning 6 each, or two columns spanning 4 and 8, or 12 columns spanning 1.<\/p>\n<h4>row &#8211; Available attributes<\/h4>\n<ul>\n<li>none<\/li>\n<\/ul>\n<h4>column, col &#8211; Available attributes<\/h4>\n<ul>\n<li><strong>desktop<\/strong> &#8211; Number of columns for the medium breakpoint &#8216;<em>md<\/em>&#8216;.<\/li>\n<li><strong>tablet<\/strong> &#8211; Number of columns for the small breakpoint &#8216;<em>sm<\/em>&#8216;.<\/li>\n<li><strong>mobile<\/strong> &#8211; Number of columns for the extra small breakpoint &#8216;<em>xs<\/em>&#8216;. Default &#8216;<em>12<\/em>&#8216;<\/li>\n<li><strong>class<\/strong> &#8211; Additional classes for the generated wrapper. Useful for applying styles and\/or targeting in custom styles.<\/li>\n<li><strong>id<\/strong> &#8211; An optional HTML id value for the generated wrapper. Useful for targeting in custom styles.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<h5>Two equal rows<\/h5>\n<p>[row][col desktop=\u00bb6&#8243; tablet=\u00bb6&#8243;]Col #1 Content[\/col][col desktop=\u00bb6&#8243; tablet=\u00bb6&#8243;]Col #2 Content[\/col][\/row]<br \/>\n[demo][row][col desktop=\u00bb6&#8243; tablet=\u00bb6&#8243;]Col #1 Content[\/col][col desktop=\u00bb6&#8243; tablet=\u00bb6&#8243;]Col #2 Content[\/col][\/row][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h5>Three equal rows<\/h5>\n<p>[row][col desktop=\u00bb4&#8243;]Col #1 Content[\/col][col desktop=\u00bb4&#8243;]Col #2 Content[\/col][col desktop=\u00bb4&#8243;]Col #3 Content[\/col][\/row]<br \/>\n[demo][row][col desktop=\u00bb4&#8243;]Col #1 Content[\/col][col desktop=\u00bb4&#8243;]Col #2 Content[\/col][col desktop=\u00bb4&#8243;]Col #3 Content[\/col][\/row][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h5>Two unequal rows on deskop, equal on tablets.<\/h5>\n<p>[row][column desktop=\u00bb4&#8243;]Col #1 Content[\/column][column desktop=\u00bb8&#8243;]Col #2 Content[\/column][\/row]<br \/>\n[demo][row][column desktop=\u00bb4&#8243;]Col #1 Content[\/column][column desktop=\u00bb8&#8243;]Col #2 Content[\/column][\/row][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Nested columns<\/h4>\n<p>WordPress can&#8217;t handle nested shortcodes of the same name. So, you can&#8217;t really do:<\/p>\n<p>[demo][row][column] Blah blah [row][column] Blah [\/column][column] Blah [\/column][\/row][\/column][column] Blah [\/column][\/row][\/demo]<\/p>\n<p>We have made available, however, the same row and column shortcodes prefixed with one and two undescores, so for each nesting level (up to two) you just ads an underscore. E.g.:<\/p>\n<p>[demo][row][column] Blah blah [_row][_column] Blah [\/_column][_column] Blah [\/_column][\/_row][\/column][column] Blah [\/column][\/row][\/demo]<\/p>\n<p>The additionally available shortcodes are: <em>_row, __row, _column, __column, _col, __col<\/em><\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The older shortcodes <em>one_half, one_half_last, one_third, one_third_last, two_thirds, two_thirds_last<\/em> are now deprecated. Although they are mapped to the new <em>column<\/em> shortcode for compatibility, it&#8217;s not possible to automatically wrap them in a row. So, results will vary from installation to installation, and even from post to post. If you are having troubles with the layout of these old shortcodes, try wrapping them in a [[row][\/row]] shortcode.<br \/>\n[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Headings shortcodes: [[h][\/h]], [[h1][\/h1]], [[h2][\/h2]], [[h3][\/h3]], [[h4][\/h4]], [[h5][\/h5]], [[h6][\/h6]]<\/h2>\n<p>With the <em>h<\/em> shortcode, you can create styled headings for you content. The shortcodes <em>h1-h6<\/em> are just shorthand aliases to <em>h<\/em> with the <em>level<\/em> attribute already set.<\/p>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>level<\/strong> &#8211; The heading level. A number between <em>1-6<\/em>. Default &#8216;<em>2<\/em>&#8216; but can be changed through the plugin&#8217;s options.<\/li>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the border&#8217;s corner. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a><\/li>\n<li><strong>icon<\/strong> &#8211; A <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">Font-Awesome icon<\/a> name. E.g. &#8216;<em>fa-download<\/em>&#8216;<\/li>\n<li><strong>spin_icon<\/strong> &#8211; Turn icon spinning on. See <a href=\"#spin_icon_attributes\">spin_icon<\/a>.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[h scheme=\u00bbgreen\u00bb]This is set from the options to be H2[\/h][demo][h scheme=\u00bbgreen\u00bb]This is set from the options to be H2[\/h][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[h level=\u00bb3&#8243; icon=\u00bbfa-globe\u00bb fg_color=\u00bbmaroon\u00bb spin]A maroon H3 with globe[\/h][demo][h level=\u00bb3&#8243; icon=\u00bbfa-globe\u00bb fg_color=\u00bbmaroon\u00bb spin]A maroon H3 with globe[\/h][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[h4 icon=\u00bbfa-lemon-o\u00bb scheme=\u00bbyellow\u00bb]An H4 with a lemon[\/h4][demo][h4 icon=\u00bbfa-lemon-o\u00bb scheme=\u00bbyellow\u00bb]An H4 with a lemon[\/h4][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[h3 icon=\u00bbfa-globe\u00bb border_width=\u00bb0 0 4px 0&#8243; border_color=\u00bb#444444&#8243;]With a bottom border[\/h3][demo][h3 icon=\u00bbfa-globe\u00bb border_width=\u00bb0 0 4px 0&#8243; border_color=\u00bb#444444&#8243;]With a bottom border[\/h3][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<br \/>\n[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>List shortcode: [[list][\/list]]<\/h2>\n<p>You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (<em>ul<\/em>) list from within the WordPress editor, and wrap it in a [[list][\/list]] shortcode.<\/p>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>scheme<\/strong> &#8211; Color scheme. Only affects the icon. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>color<\/strong> &#8211; The color of the icon. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>icon<\/strong> &#8211; A <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">Font-Awesome icon<\/a> name. E.g. &#8216;<em>fa-download<\/em>&#8216;<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[row][col desktop=\u00bb4&#8243;][list scheme=\u00bbblue\u00bb]<\/p>\n<ul>\n<li>Item 1<\/li>\n<li>Item 2\n<ul>\n<li>Item 2-1<\/li>\n<\/ul>\n<\/li>\n<li>Item 3<\/li>\n<\/ul>\n<p>[\/list][\/col][col desktop=\u00bb4&#8243;][list scheme=\u00bbgreen\u00bb icon=\u00bbfa-check\u00bb]<\/p>\n<ul>\n<li>Item 1<\/li>\n<li>Item 2\n<ul>\n<li>Item 2-1<\/li>\n<\/ul>\n<\/li>\n<li>Item 3<\/li>\n<\/ul>\n<p>[\/list][\/col][col desktop=\u00bb4&#8243;][list color=\u00bbred\u00bb icon=\u00bbfa-close\u00bb]<\/p>\n<ul>\n<li>Item 1<\/li>\n<li>Item 2\n<ul>\n<li>Item 2-1<\/li>\n<\/ul>\n<\/li>\n<li>Item 3<\/li>\n<\/ul>\n<p>[\/list][\/col][\/row]<\/p>\n<p>[demo][list color=\u00bbred\u00bb icon=\u00bbfa-close\u00bb]<\/p>\n<ul>\n<li>Item 1<\/li>\n<li>Item 2\n<ul>\n<li>Item 2-1<\/li>\n<\/ul>\n<\/li>\n<li>Item 3<\/li>\n<\/ul>\n<p>[\/list][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>list<\/em> shortcode used to accept a <em>type<\/em> attribute that is now deprecated. Valid values for this attribute were:<\/p>\n<ul>\n<li><strong>type<\/strong> &#8211; Any one of: <em>check, cross<\/em>. Use of the <em>type<\/em> attribute is discouraged and unsupported. Existing shortcodes will get mapped to a similar <em>icon<\/em>.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Blockquote shortcode: [[quote][\/quote]]<\/h2>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>title<\/strong> &#8211; The citation text, i.e. who said what you&#8217;re quoting.<\/li>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the button. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the border&#8217;s corner. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a><\/li>\n<li><strong>icon<\/strong> &#8211; A <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/\" target=\"_blank\">Font-Awesome icon<\/a> name. Default &#8216;<em>fa-quote-left<\/em>&#8216;.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[quote title=\u00bbAlbert Einstein\u00bb]Try not to become a man of success, but rather try to become a man of value.[\/quote]<br \/>\n[demo][quote title=\u00bbAlbert Einstein\u00bb]Try not to become a man of success, but rather try to become a man of value.[\/quote][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[quote title=\u00bbAlbert Einstein\u00bb scheme=\u00bbgreen\u00bb fg_color=\u00bb#ffffff\u00bb]Try not to become a man of success, but rather try to become a man of value.[\/quote]<br \/>\n[demo][quote title=\u00bbAlbert Einstein\u00bb scheme=\u00bbgreen\u00bb fg_color=\u00bb#ffffff\u00bb]Try not to become a man of success, but rather try to become a man of value.[\/quote][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>quote<\/em> shortcode used to accept a <em>float<\/em> attribute that is now removed. Valid values for this attribute were:<\/p>\n<ul>\n<li>float &#8211; Any one of: <em>left, righ<\/em>. Use of the <em>float<\/em> attribute is not supported. Existing shortcodes will behave as if the attribute was omitted.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Separator shortcodes: separator , hr<\/h2>\n<p>Both shortcodes <em>separator<\/em> and <em>hr<\/em>, are just aliases of each other and behave exactly the same.<\/p>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>type<\/strong> &#8211; The type \/ styling of the separator. Any one value of: <em>solid, dotted, dashed, double, groove, ridge, inset, outset<\/em>. Default &#8216;<em>solid<\/em>&#8216;.<\/li>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>color<\/strong> &#8211; The color of the separator. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>height<\/strong> &#8211; The height of the separator (bottom border). <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>width<\/strong> &#8211; The width of the separator. <a href=\"#length_units\">Any valid CSS unit of length<\/a>.<\/li>\n<li><strong>center<\/strong> &#8211; Centered separator. Any one value of: <em>true, on<\/em>. Furthermore, a &#8216;<em>center<\/em>&#8216; value can be placed by itself as a shorthand, without the need for the attribute name.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[separator \/][demo][separator \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[hr type=\u00bbdotted\u00bb scheme=\u00bbred\u00bb width=\u00bb50%\u00bb center \/][demo][hr type=\u00bbdotted\u00bb scheme=\u00bbred\u00bb width=\u00bb50%\u00bb center \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[hr type=\u00bbdashed\u00bb scheme=\u00bbgreen\u00bb height=\u00bb10px\u00bb \/][demo][hr type=\u00bbdashed\u00bb scheme=\u00bbgreen\u00bb height=\u00bb10px\u00bb \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[hr type=\u00bbgroove\u00bb scheme=\u00bbblue\u00bb height=\u00bbthick\u00bb width=\u00bb80%\u00bb \/][demo][hr type=\u00bbgroove\u00bb scheme=\u00bbblue\u00bb height=\u00bbthick\u00bb width=\u00bb80%\u00bb \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[hr type=\u00bbridge\u00bb \/][demo][hr type=\u00bbridge\u00bb \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>separator<\/em> shortcode used to accept a <em>type<\/em> attribute that is now removed. Valid values for this attribute were:<\/p>\n<ul>\n<li>type &#8211; Any one of: <em>normal, lightning<\/em>. Use of the <em>type<\/em> attribute is not supported. Existing shortcodes will behave as if the attribute was omitted.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Tooltip shortcode: [[tooltip][\/tooltip]]<\/h2>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>tip<\/strong> &#8211; The content that appears as the tootip. Required.<\/li>\n<li><strong>position<\/strong> &#8211; The position of the tooltip relative to the hover-able text. Any one value of: <em>top, bottom, left, right<\/em>. If empty, the tooltip appears over the hover-able text.<\/li>\n<li><strong>always<\/strong> &#8211; Always show the tooltip. Any one value of: <em>on<\/em>. Furthermore, a &#8216;<em>alwayson<\/em>&#8216; value can be placed by itself as a shorthand, without the need for the attribute name.<\/li>\n<li><strong>color<\/strong> &#8211; The color scheme of the tooltip. Any one value of: <em>dark, light<\/em>. Default &#8216;<em>dark<\/em>&#8216;. Furthermore, a &#8216;<em>light<\/em>&#8216; value can be placed by itself as a shorthand, without the need for the attribute name.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>Do you know what a [tooltip tip=\u00bbCentral Processing Unit\u00bb]CPU[\/tooltip] is?<br \/>\n[demo][tooltip tip=\u00bbCentral Processing Unit\u00bb]CPU[\/tooltip][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>Just a tooltip [tooltip tip=\u00bbI&#8217;m on top!\u00bb position=\u00bbtop\u00bb]on the top.[\/tooltip]<br \/>\n[demo][tooltip tip=\u00bbI&#8217;m on top!\u00bb position=\u00bbtop\u00bb]on the top.[\/tooltip][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>How about an [tooltip tip=\u00bbCool!\u00bb position=\u00bbright\u00bb light alwayson]always on, right, tooltip?[\/tooltip]<br \/>\n[demo][tooltip tip=\u00bbCool!\u00bb position=\u00bbright\u00bb light alwayson]always on, right, tooltip?[\/tooltip][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>tooltip<\/em> shortcode used to accept a <em>contents and color<\/em> attributes that are now deprecated. Valid values for these attributes were:<\/p>\n<ul>\n<li><strong>contents<\/strong> &#8211; The content that appears as the tooltip. Use of the <em>contents<\/em> attribute is not supported. Existing shortcodes will map this attribute to the <em>tip<\/em> attribute.<\/li>\n<li><strong>color<\/strong> &#8211; The <em>color<\/em> attribute is still in use, however the older &#8216;<em>grey<\/em>&#8216; value is no longer support. Existing shortcodes using &#8216;<em>grey<\/em>&#8216; will get mapped to &#8216;<em>light<\/em>&#8216; instead.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Map shortcodes: [[map][\/map]] , [[googlemap][\/googlemap]]<\/h2>\n<h4>Available attributes<\/h4>\n<ul>\n<li><strong>lat<\/strong> &#8211; The latitude of a place in the map. Any decimal value between <em>-90 to 90<\/em>. Required.<\/li>\n<li><strong>lon<\/strong> &#8211; The longitude of a place in the map. Any decimal value between <em>-180 to 180<\/em>. Required.<\/li>\n<li><strong>zoom<\/strong> &#8211; Zoom level of the map. Any integer value between 0-21. Default &#8216;<em>8<\/em>&#8216;.<\/li>\n<li><strong>title<\/strong> &#8211; The text appearing when hovering over the map marker.<\/li>\n<li><strong>text<\/strong> &#8211; The text appearing when the map marker gets clicked.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[map lat=\u00bb40.7828649&#8243; lon=\u00bb-73.9653549&#8243; zoom=\u00bb16&#8243; \/][demo][map lat=\u00bb40.7828649&#8243; lon=\u00bb-73.9653549&#8243; zoom=\u00bb16&#8243; \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[map lat=\u00bb40.7828649&#8243; lon=\u00bb-73.9653549&#8243; title=\u00bbNew York\u00bb text=\u00bbCentral Park\u00bb \/][demo][map lat=\u00bb40.7828649&#8243; lon=\u00bb-73.9653549&#8243; title=\u00bbNew York\u00bb text=\u00bbCentral Park\u00bb \/][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h4>Compatibility with pre-v2.0 versions<\/h4>\n<p>The <em>googlemap<\/em> shortcode used to accept a <em>src<\/em> attribute that is now deprecated. Valid values for this attribute were:<\/p>\n<ul>\n<li>src &#8211; A google maps URL. Use of the <em>src<\/em> attribute is no longer supported. Existing shortcodes will extract and map this attribute to the appropriate <em>lat<\/em>, <em>lon<\/em> and <em>zoom<\/em> attributes.<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Tabs shortcodes: [[tabs][\/tabs]] , [[tab][\/tab]]<\/h2>\n<p>In order to create a set of tabs, you need to wrap one or more <em>[[tab][\/tab]]<\/em> shortcodes into a <em>[[tabs][\/tabs]]<\/em> shortcode.<\/p>\n<h4>tabs &#8211; Available attributes<\/h4>\n<ul>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the tabs&#8217; content. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the tabs&#8217; content. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>tab_bg_color<\/strong> &#8211; The background color of the inactive tabs. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>tab_fg_color<\/strong> &#8211; The foreground (text) color of the inactive tabs. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>active_bg_color<\/strong> &#8211; The background color of the active tab. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>active_fg_color<\/strong> &#8211; The foreground (text) color of the active tab. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the tab group. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the tab group&#8217;s border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the tabs&#8217; border corners. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a> <strong>Note:<\/strong> If you provide a single CSS unit value, it will only be applied to the to top-left and top-right corners of each tab. This is on purpose, to get the best result with minimal typing. If you need to affect all corners of the tabs, you&#8217;ll need to provide four values, e.g. <em>corners=\u00bb10px 10px 10px 10px\u00bb<\/em><\/li>\n<\/ul>\n<h4>tab &#8211; Available attributes<\/h4>\n<ul>\n<li><strong>title<\/strong> &#8211; The text that appears on the tab. Required.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[tabs][tab title=\u00bbTab 1&#8243;]Content 1[\/tab][tab title=\u00bbTab 2&#8243;]Content 2[\/tab][\/tabs][demo][tabs][tab title=\u00bbTab 1&#8243;]Content 1[\/tab][tab title=\u00bbTab 2&#8243;]Content 2[\/tab][\/tabs][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<br \/>\n[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Accordions shortcodes: [[accordion][\/accordion]], [[accordion_tab][\/accordion_tab]]<\/h2>\n<p>Accordions&#8217; syntax and attributes are exactly the same like the tabs shortcode. Only the actual names of the shortcode change. That way, you can easily swap from tabs to accordions and back, without touching any of the attributes.<\/p>\n<h4>accordion &#8211; Available attributes<\/h4>\n<ul>\n<li><strong>scheme<\/strong> &#8211; Color scheme. <a href=\"#scheme_attributes\">Any predefined color scheme name<\/a>.<\/li>\n<li><strong>bg_color<\/strong> &#8211; The background color of the accordion tabs&#8217; content. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>fg_color<\/strong> &#8211; The foreground (text) color of the accordion tabs&#8217; content. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>tab_bg_color<\/strong> &#8211; The background color of the inactive accordion tabs. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>tab_fg_color<\/strong> &#8211; The foreground (text) color of the inactive accordion tabs. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>active_bg_color<\/strong> &#8211; The background color of the active accordion tab. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>active_fg_color<\/strong> &#8211; The foreground (text) color of the accordion active tab. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_color<\/strong> &#8211; The border color of the accordion. <a href=\"#color_attributes\">Any valid CSS color<\/a>.<\/li>\n<li><strong>border_width<\/strong> &#8211; The width of the accordion&#8217;s border. <a href=\"#border_width_attributes\">Any valid CSS border-width: value<\/a>.<\/li>\n<li><strong>corners<\/strong> &#8211; The radius of the accordion tabs&#8217; border corners. <a href=\"#corners_attributes\">Any valid CSS border-radius: value.<\/a> <strong>Note:<\/strong> If you provide a single CSS unit value, it will only be applied to the to top-left and top-right corners of each accordion tab. This is on purpose, to get the best result with minimal typing. If you need to affect all corners of the accordion tabs, you&#8217;ll need to provide four values, e.g. <em>corners=\u00bb10px 10px 10px 10px\u00bb<\/em><\/li>\n<\/ul>\n<h4>accordion_tab &#8211; Available attributes<\/h4>\n<ul>\n<li><strong>title<\/strong> &#8211; The text that appears on the accordion tab. Required.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[accordion][accordion_tab title=\u00bbTab 1&#8243;]Content 1[\/accordion_tab][accordion_tab title=\u00bbTab 2&#8243;]Content 2[\/accordion_tab][\/accordion][demo][accordion][accordion_tab title=\u00bbTab 1&#8243;]Content 1[\/accordion_tab][accordion_tab title=\u00bbTab 2&#8243;]Content 2[\/accordion_tab][\/accordion][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<br \/>\n[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Common attributes.<\/h2>\n<h3 id=\"scheme_attributes\">Predefined color schemes.<\/h3>\n<p>Any shortcode that accepts an attribute named &#8216;<em>scheme<\/em>&#8216; can accept any one of the following values: <em>blue, red, yellow, orange, purple, pink, brown, green, grey, white, black<\/em>.<\/p>\n<h3 id=\"color_attributes\">color<\/h3>\n<p>All attributes in every shortcode that accept a CSS color value, usually named &#8216;<em>something<\/em>_color&#8217; can accept any of these color formats:<\/p>\n<ul>\n<li><strong>Hexadecimal<\/strong>: <em>#000000<\/em> to <em>#ffffff<\/em> upper-case or lower-case. Shorthand notation is <strong>not<\/strong> allowed, i.e. <em>#000<\/em> to <em>#fff<\/em><\/li>\n<li><strong>rgb()<\/strong>: <em>rgb($r, $g, $b)<\/em> &#8211; Where <em>$r<\/em> <em>$g<\/em> and <em>$b<\/em> is a number <em>0-255<\/em> or a percentage <em>0%-100%<\/em><\/li>\n<li><strong>rgba()<\/strong>: <em>rgba($r, $g, $b, $a)<\/em> &#8211; As above, and <em>$a<\/em> between <em>0-1<\/em>.<\/li>\n<li><strong>hsl()<\/strong>: <em>hsl($h, $s, $l)<\/em> &#8211; Where <em>$h<\/em> <em>0-360<\/em>, <em>$s<\/em> and <em>$l<\/em> <em>0%-100%<\/em>.<\/li>\n<li><strong>hsla()<\/strong>: <em>hsla($h, $s, $l, $a)<\/em> &#8211; As above, and <em>$a<\/em> between <em>0-1<\/em> (decimal values allowed).<\/li>\n<li>Any one of the following keywords: <em>transparent, initial, inherit, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua<\/em><\/li>\n<\/ul>\n<p>Please note that common names between the predefined colors above and the color schemes, doesn&#8217;t necessarily translate to the same color values.<\/p>\n<h3 id=\"spin_icon_attributes\">spin_icon<\/h3>\n<p>Where a spin_icon attribute is available, valid values are: &#8216;<em>true<\/em>&#8216;, &#8216;<em>spin<\/em>&#8216;.<br \/>\nFurthermore, a &#8216;<em>spin<\/em>&#8216; value can be placed by itself as a shorthand, without the need for the attribute name.<\/p>\n<h4>Examples<\/h4>\n<p>The following shortcodes are all identical:<\/p>\n<p>[demo][button icon=\u00bbfa-download\u00bb spin_icon=\u00bbspin\u00bb]Some text[\/button][\/demo]<br \/>\n[demo][button icon=\u00bbfa-download\u00bb spin_icon=\u00bbtrue\u00bb]Some text[\/button][\/demo]<br \/>\n[demo][button icon=\u00bbfa-download\u00bb spin]Some text[\/button][\/demo]<\/p>\n<p>They all produce:<\/p>\n<p>[button icon=\u00bbfa-download\u00bb spin]Some text[\/button]<\/p>\n<h3 id=\"border_width_attributes\">border_width<\/h3>\n<p>Shortcodes that have a <em>border_width<\/em> property, can accept any valid CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-width\" target=\"_blank\">shorthand <em>border-width<\/em><\/a> value:<\/p>\n<ul>\n<li>One to four <a href=\"#length_units\">CSS units of length<\/a>.<\/li>\n<li>Any one of the following keywords: <em>thin, medium, thick, initial, inherit<\/em><\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[box border_width=\u00bb2px\u00bb]Just box.[\/box][demo][box border_width=\u00bb2px\u00bb]Just box.[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box border_width=\u00bb1px 2em 8px 4rem\u00bb]Just a weird box.[\/box][demo][box border_width=\u00bb1px 2em 8px 4rem\u00bb]Just weird box.[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h3 id=\"corners_attributes\">corners<\/h3>\n<p>Shortcodes that have a corners property, can accept any valid CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-radius\" target=\"_blank\">shorthand <em>border-radius<\/em><\/a> value:<\/p>\n<ul>\n<li>One to four <a href=\"#length_units\">CSS units of length<\/a>, optionally followed by a forward slash &#8216;<em>\/<\/em>&#8216; and one to four CSS units of length.<\/li>\n<li>Any one of the following keywords: <em>initial, inherit<\/em><\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<p>[box corners=\u00bb10px\u00bb]A box with rounded corners.[\/box][demo][box corners=\u00bb10px\u00bb]A box with rounded corners.[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<p>[box corners=\u00bb20px 2em \/ 10px\u00bb]A box with strange rounded corners.[\/box][demo][box corners=\u00bb20px 2em \/ 10px\u00bb]A box with strange rounded corners.[\/box][\/demo][hr height=\u00bb1px\u00bb color=\u00bbrgba(0,0,0,0.2)\u00bb]<\/p>\n<h3 id=\"length_units\">Length Units<\/h3>\n<p>Any property that requires a CSS unit of length accepts <em>a number<\/em> immediately followed by one of the following units: <em>px, %, em, rem, ex, ch, vh, vw, vmin, vmax, mm, cm, in, pt, pc<\/em><\/p>\n<p>Decimal numbers expressed in pixels (px) may or may not work depending on each browser&#8217;s handling, they are however accepted by the plugin.<\/p>\n<h4>Examples<\/h4>\n<ul>\n<li>1px<\/li>\n<li>0.5em<\/li>\n<li>1.2rem<\/li>\n<\/ul>\n<p>[hr height=\u00bb5px\u00bb color=\u00bb#104864&#8243;]<\/p>\n<h2>Compatibility Mode<\/h2>\n<p>It&#8217;s quite common for users to have installed more than one shortcodes plugins, or for themes to provide their own shortcodes. When this happens, chances are that some shortcodes overlap, and more often than not, you end up having shortcodes that you can&#8217;t be sure where are they getting their styles and markup from.<\/p>\n<p>Just go into the plugin&#8217;s settings panel, check the <strong>Compatibility Mode<\/strong> checkbox and <em>Save Changes.<\/em> You&#8217;ve just future-proofed your posts! All shortcodes now require a prefix of <strong>&#8216;ci-&#8216;<\/strong> minimizing the risk of collision with other shortcode providers. For example, instead of [[button]Hello[\/button]] you should now write [[ci-button]Hello[\/button]]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Button shortcode: [[button][\/button]] Available attributes url &#8211; Where the button links. Any valid link. Default &#8216;#&#8216;. target &#8211; Where the link should open. Any one of: &#8216;_blank&#8216;, &#8216;_self&#8216;, &#8216;_parent&#8216;, &#8216;_top&#8216;. Default empty. size &#8211; The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-66","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.modo-on.com\/index.php?rest_route=\/wp\/v2\/pages\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.modo-on.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.modo-on.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.modo-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.modo-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=66"}],"version-history":[{"count":0,"href":"https:\/\/www.modo-on.com\/index.php?rest_route=\/wp\/v2\/pages\/66\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.modo-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}