Button shortcode: [[button][/button]]

 

Available attributes

 

Examples

[button url=»https://www.cssigniter.com» size=»large»]A button to CSSIgniter[/button] [button url=»https://www.cssigniter.com» size=»large» scheme=»red»]A button to CSSIgniter[/button] [button url=»https://www.cssigniter.com» size=»large» scheme=»yellow»]A button to CSSIgniter[/button]
[demo][button url=»https://www.cssigniter.com» size=»large»]A button to CSSIgniter[/button][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[button url=»http://www.google.com» target=»_blank»]New window to Google[/button] [button url=»http://www.google.com» target=»_blank» scheme=»red»]New window to Google[/button] [button url=»http://www.google.com» target=»_blank» scheme=»yellow»]New window to Google[/button]
[demo][button url=»http://www.google.com» target=»_blank» scheme=»red»]New window to Google[/button][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[button size=»small» scheme=»pink» border_color=»#c9054f» border_width=»2px» icon=»fa-download»]Download now[/button] [button size=»small» scheme=»yellow» border_color=»#e5d35b» border_width=»2px» icon=»fa-download»]Download now[/button] [button size=»small» scheme=»blue» border_color=»#0e76b8″ border_width=»2px» icon=»fa-download»]Download now[/button]
[demo][button size=»small» scheme=»pink» border_color=»#c9054f» border_width=»2px» icon=»fa-download»]Download now[/button][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[button scheme=»yellow» fg_color=»rgb(10, 20, 30)» icon=»fa-refresh» spin]Refresh[/button] [button scheme=»green» fg_color=»rgb(10, 20, 30)» icon=»fa-refresh» spin]Refresh[/button] [button scheme=»red» fg_color=»rgb(10, 20, 30)» icon=»fa-refresh» spin]Refresh[/button]
[demo][button scheme=»green» fg_color=»rgb(10, 20, 30)» icon=»fa-refresh» spin]Refresh[/button][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[button icon=»fa-spinner» corners=»5px» spin]Rounded[/button] [button icon=»fa-spinner» corners=»5px» scheme=»red» spin]Rounded[/button] [button icon=»fa-spinner» corners=»5px» scheme=»yellow» spin]Rounded[/button]
[demo][button icon=»fa-spinner» corners=»5px» spin]Rounded[/button][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

Compatibility with pre-v2.0 versions

The button shortcode used to accept a type and color attributes that are now deprecated. Valid values for those attributes were:

[hr height=»5px» color=»#104864″]

Box shortcode: [[box][/box]]

 

Available attributes

 

Examples

[box]Just a box with some content in it.[/box][demo][box]Just a box with some content in it.[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box scheme=»red»]A red box[/box][demo][box scheme=»red»]A red box[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box scheme=»red» border_color=»#000000″ border_width=»thick» icon=»fa-download»]With a black border and icon[/box][demo][box scheme=»red» border_color=»#000000″ border_width=»thick» icon=»fa-download»]With a black border and icon[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box scheme=»green» fg_color=»rgb(255,255,255)» icon=»fa-refresh» spin]Custom foreground color[/box][demo][box scheme=»green» fg_color=»rgb(255, 255, 255)» icon=»fa-refresh» spin]Custom foreground color[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box icon=»fa-spinner» corners=»3px» spin]Rounded corners on a spinning icon.[/box][demo][box icon=»fa-spinner» corners=»20px» spin]Rounded corners on a spinning icon.[/box][/demo]

 

Compatibility with pre-v2.0 versions

The box shortcode used to accept a type attribute that is now deprecated. Valid values for this attribute were:

[hr height=»5px» color=»#104864″]

Grid shortcodes: [[row][/row]], [[column][/column]], [[col][/col]]

You can divide you content in columns by using the row, column and col shortcodes. col is just an alias of the column 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 column 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.

row – Available attributes

column, col – Available attributes

 

Examples

Two equal rows

[row][col desktop=»6″ tablet=»6″]Col #1 Content[/col][col desktop=»6″ tablet=»6″]Col #2 Content[/col][/row]
[demo][row][col desktop=»6″ tablet=»6″]Col #1 Content[/col][col desktop=»6″ tablet=»6″]Col #2 Content[/col][/row][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

Three equal rows

[row][col desktop=»4″]Col #1 Content[/col][col desktop=»4″]Col #2 Content[/col][col desktop=»4″]Col #3 Content[/col][/row]
[demo][row][col desktop=»4″]Col #1 Content[/col][col desktop=»4″]Col #2 Content[/col][col desktop=»4″]Col #3 Content[/col][/row][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

Two unequal rows on deskop, equal on tablets.

[row][column desktop=»4″]Col #1 Content[/column][column desktop=»8″]Col #2 Content[/column][/row]
[demo][row][column desktop=»4″]Col #1 Content[/column][column desktop=»8″]Col #2 Content[/column][/row][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Nested columns

WordPress can’t handle nested shortcodes of the same name. So, you can’t really do:

[demo][row][column] Blah blah [row][column] Blah [/column][column] Blah [/column][/row][/column][column] Blah [/column][/row][/demo]

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.:

[demo][row][column] Blah blah [_row][_column] Blah [/_column][_column] Blah [/_column][/_row][/column][column] Blah [/column][/row][/demo]

The additionally available shortcodes are: _row, __row, _column, __column, _col, __col

 

Compatibility with pre-v2.0 versions

The older shortcodes one_half, one_half_last, one_third, one_third_last, two_thirds, two_thirds_last are now deprecated. Although they are mapped to the new column shortcode for compatibility, it’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.
[hr height=»5px» color=»#104864″]

Headings shortcodes: [[h][/h]], [[h1][/h1]], [[h2][/h2]], [[h3][/h3]], [[h4][/h4]], [[h5][/h5]], [[h6][/h6]]

 

With the h shortcode, you can create styled headings for you content. The shortcodes h1-h6 are just shorthand aliases to h with the level attribute already set.

 

Available attributes

 

Examples

[h scheme=»green»]This is set from the options to be H2[/h][demo][h scheme=»green»]This is set from the options to be H2[/h][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[h level=»3″ icon=»fa-globe» fg_color=»maroon» spin]A maroon H3 with globe[/h][demo][h level=»3″ icon=»fa-globe» fg_color=»maroon» spin]A maroon H3 with globe[/h][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[h4 icon=»fa-lemon-o» scheme=»yellow»]An H4 with a lemon[/h4][demo][h4 icon=»fa-lemon-o» scheme=»yellow»]An H4 with a lemon[/h4][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[h3 icon=»fa-globe» border_width=»0 0 4px 0″ border_color=»#444444″]With a bottom border[/h3][demo][h3 icon=»fa-globe» border_width=»0 0 4px 0″ border_color=»#444444″]With a bottom border[/h3][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]
[hr height=»5px» color=»#104864″]

List shortcode: [[list][/list]]

You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (ul) list from within the WordPress editor, and wrap it in a [[list][/list]] shortcode.

 

Available attributes

 

Examples

[row][col desktop=»4″][list scheme=»blue»]

[/list][/col][col desktop=»4″][list scheme=»green» icon=»fa-check»]

[/list][/col][col desktop=»4″][list color=»red» icon=»fa-close»]

[/list][/col][/row]

[demo][list color=»red» icon=»fa-close»]

[/list][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Compatibility with pre-v2.0 versions

The list shortcode used to accept a type attribute that is now deprecated. Valid values for this attribute were:

[hr height=»5px» color=»#104864″]

Blockquote shortcode: [[quote][/quote]]

 

Available attributes

 

Examples

[quote title=»Albert Einstein»]Try not to become a man of success, but rather try to become a man of value.[/quote]
[demo][quote title=»Albert Einstein»]Try not to become a man of success, but rather try to become a man of value.[/quote][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[quote title=»Albert Einstein» scheme=»green» fg_color=»#ffffff»]Try not to become a man of success, but rather try to become a man of value.[/quote]
[demo][quote title=»Albert Einstein» scheme=»green» fg_color=»#ffffff»]Try not to become a man of success, but rather try to become a man of value.[/quote][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Compatibility with pre-v2.0 versions

The quote shortcode used to accept a float attribute that is now removed. Valid values for this attribute were:

[hr height=»5px» color=»#104864″]

Separator shortcodes: separator , hr

Both shortcodes separator and hr, are just aliases of each other and behave exactly the same.

Available attributes

 

Examples

[separator /][demo][separator /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[hr type=»dotted» scheme=»red» width=»50%» center /][demo][hr type=»dotted» scheme=»red» width=»50%» center /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[hr type=»dashed» scheme=»green» height=»10px» /][demo][hr type=»dashed» scheme=»green» height=»10px» /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[hr type=»groove» scheme=»blue» height=»thick» width=»80%» /][demo][hr type=»groove» scheme=»blue» height=»thick» width=»80%» /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[hr type=»ridge» /][demo][hr type=»ridge» /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Compatibility with pre-v2.0 versions

The separator shortcode used to accept a type attribute that is now removed. Valid values for this attribute were:

[hr height=»5px» color=»#104864″]

Tooltip shortcode: [[tooltip][/tooltip]]

Available attributes

 

Examples

Do you know what a [tooltip tip=»Central Processing Unit»]CPU[/tooltip] is?
[demo][tooltip tip=»Central Processing Unit»]CPU[/tooltip][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

Just a tooltip [tooltip tip=»I’m on top!» position=»top»]on the top.[/tooltip]
[demo][tooltip tip=»I’m on top!» position=»top»]on the top.[/tooltip][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

How about an [tooltip tip=»Cool!» position=»right» light alwayson]always on, right, tooltip?[/tooltip]
[demo][tooltip tip=»Cool!» position=»right» light alwayson]always on, right, tooltip?[/tooltip][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Compatibility with pre-v2.0 versions

The tooltip shortcode used to accept a contents and color attributes that are now deprecated. Valid values for these attributes were:

[hr height=»5px» color=»#104864″]

Map shortcodes: [[map][/map]] , [[googlemap][/googlemap]]

 

Available attributes

 

Examples

[map lat=»40.7828649″ lon=»-73.9653549″ zoom=»16″ /][demo][map lat=»40.7828649″ lon=»-73.9653549″ zoom=»16″ /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[map lat=»40.7828649″ lon=»-73.9653549″ title=»New York» text=»Central Park» /][demo][map lat=»40.7828649″ lon=»-73.9653549″ title=»New York» text=»Central Park» /][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Compatibility with pre-v2.0 versions

The googlemap shortcode used to accept a src attribute that is now deprecated. Valid values for this attribute were:

[hr height=»5px» color=»#104864″]

Tabs shortcodes: [[tabs][/tabs]] , [[tab][/tab]]

In order to create a set of tabs, you need to wrap one or more [[tab][/tab]] shortcodes into a [[tabs][/tabs]] shortcode.

 

tabs – Available attributes

 

tab – Available attributes

 

Examples

[tabs][tab title=»Tab 1″]Content 1[/tab][tab title=»Tab 2″]Content 2[/tab][/tabs][demo][tabs][tab title=»Tab 1″]Content 1[/tab][tab title=»Tab 2″]Content 2[/tab][/tabs][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]
[hr height=»5px» color=»#104864″]

Accordions shortcodes: [[accordion][/accordion]], [[accordion_tab][/accordion_tab]]

Accordions’ 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.

 

accordion – Available attributes

 

accordion_tab – Available attributes

 

Examples

[accordion][accordion_tab title=»Tab 1″]Content 1[/accordion_tab][accordion_tab title=»Tab 2″]Content 2[/accordion_tab][/accordion][demo][accordion][accordion_tab title=»Tab 1″]Content 1[/accordion_tab][accordion_tab title=»Tab 2″]Content 2[/accordion_tab][/accordion][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]
[hr height=»5px» color=»#104864″]

Common attributes.

 

Predefined color schemes.

Any shortcode that accepts an attribute named ‘scheme‘ can accept any one of the following values: blue, red, yellow, orange, purple, pink, brown, green, grey, white, black.

 

color

All attributes in every shortcode that accept a CSS color value, usually named ‘something_color’ can accept any of these color formats:

Please note that common names between the predefined colors above and the color schemes, doesn’t necessarily translate to the same color values.

 

spin_icon

Where a spin_icon attribute is available, valid values are: ‘true‘, ‘spin‘.
Furthermore, a ‘spin‘ value can be placed by itself as a shorthand, without the need for the attribute name.

 

Examples

The following shortcodes are all identical:

[demo][button icon=»fa-download» spin_icon=»spin»]Some text[/button][/demo]
[demo][button icon=»fa-download» spin_icon=»true»]Some text[/button][/demo]
[demo][button icon=»fa-download» spin]Some text[/button][/demo]

They all produce:

[button icon=»fa-download» spin]Some text[/button]

 

border_width

Shortcodes that have a border_width property, can accept any valid CSS shorthand border-width value:

 

Examples

[box border_width=»2px»]Just box.[/box][demo][box border_width=»2px»]Just box.[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box border_width=»1px 2em 8px 4rem»]Just a weird box.[/box][demo][box border_width=»1px 2em 8px 4rem»]Just weird box.[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

corners

Shortcodes that have a corners property, can accept any valid CSS shorthand border-radius value:

 

Examples

[box corners=»10px»]A box with rounded corners.[/box][demo][box corners=»10px»]A box with rounded corners.[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

[box corners=»20px 2em / 10px»]A box with strange rounded corners.[/box][demo][box corners=»20px 2em / 10px»]A box with strange rounded corners.[/box][/demo][hr height=»1px» color=»rgba(0,0,0,0.2)»]

 

Length Units

Any property that requires a CSS unit of length accepts a number immediately followed by one of the following units: px, %, em, rem, ex, ch, vh, vw, vmin, vmax, mm, cm, in, pt, pc

Decimal numbers expressed in pixels (px) may or may not work depending on each browser’s handling, they are however accepted by the plugin.

 

Examples

[hr height=»5px» color=»#104864″]

Compatibility Mode

It’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’t be sure where are they getting their styles and markup from.

Just go into the plugin’s settings panel, check the Compatibility Mode checkbox and Save Changes. You’ve just future-proofed your posts! All shortcodes now require a prefix of ‘ci-‘ minimizing the risk of collision with other shortcode providers. For example, instead of [[button]Hello[/button]] you should now write [[ci-button]Hello[/button]]

©2024 jorgiyo bideoklip.com