{"id":1135,"date":"2016-05-03T01:41:15","date_gmt":"2016-05-03T01:41:15","guid":{"rendered":"http:\/\/www.cssigniter.com\/preview\/neuton\/?page_id=1135"},"modified":"2016-05-03T01:41:15","modified_gmt":"2016-05-03T01:41:15","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/goodyearep.com.br\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"

[box icon=”fa-info”]Download the CSSIgniter Shortcodes<\/a> plugin from the WordPress plugin repository. Read the full documentation<\/strong> here<\/a>.[\/box]<\/p>\n

Button shortcode: [[button][\/button]]<\/h2>\n

[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]
\n[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)”]<\/p>\n

[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]
\n[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)”]<\/p>\n

[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]
\n[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)”]<\/p>\n

[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]
\n[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)”]<\/p>\n

[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]
\n[demo][button icon=”fa-spinner” corners=”5px” spin]Rounded[\/button][\/demo]
\n[hr height=”5px” color=”#104864″]<\/p>\n

Box shortcode: [[box][\/box]]<\/h2>\n

[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)”]<\/p>\n

[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)”]<\/p>\n

[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)”]<\/p>\n

[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)”]<\/p>\n

[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]
\n[hr height=”5px” color=”#104864″]<\/p>\n

Grid shortcodes: [[row][\/row]], [[column][\/column]], [[col][\/col]]<\/h2>\n

Two equal rows<\/h5>\n

[row][col desktop=”6″ tablet=”6″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/col][col desktop=”6″ tablet=”6″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/col][\/row]
\n[demo][row][col desktop=”6″ tablet=”6″]Content[\/col][col desktop=”6″ tablet=”6″]Content[\/col][\/row][\/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]<\/p>\n

Three equal rows<\/h5>\n

[row][col desktop=”4″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/col][col desktop=”4″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/col][col desktop=”4″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/col][\/row]
\n[demo][row][col desktop=”4″]Content[\/col][col desktop=”4″]Content[\/col][col desktop=”4″]Content[\/col][\/row][\/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]<\/p>\n

Two unequal rows on deskop, equal on tablets.<\/h5>\n

[row][column desktop=”4″ tablet=”6″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/column][column desktop=”8″ tablet=”6″]<\/p>\n

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.<\/p>\n

[\/column][\/row]
\n[demo][row][column desktop=”4″]Content[\/column][column desktop=”8″]Content[\/column][\/row][\/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]<\/p>\n

[hr height=”5px” color=”#104864″]<\/p>\n

Headings shortcodes: [[h][\/h]], [[h1][\/h1]], [[h2][\/h2]], [[h3][\/h3]], [[h4][\/h4]], [[h5][\/h5]], [[h6][\/h6]]<\/h2>\n

[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)”]<\/p>\n

[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)”]<\/p>\n

[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)”]<\/p>\n

[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]
\n[hr height=”5px” color=”#104864″]<\/p>\n

List shortcode: [[list][\/list]]<\/h2>\n

You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (ul<\/em>) list from within the WordPress editor, and wrap it in a [[list][\/list]] shortcode.
\n[row][col desktop=”4″][list scheme=”blue”]<\/p>\n