Bootstrap Shortcodes

All of our Pro themes that use the Twitter Bootstrap (not Responsive nor Responsive Pro) have the following shortcodes available:

  1. Tabs
  2. Collapsible Tab
  3. Modal
  4. Tooltip
  5. Popover

 

1) Tabs
Here is an example of the Tabs shortcode:
CODE (Please note, that you must use spaces between lines with this shortcode):
Also, you can not have spaces in the tab name. By tab name we are referring to the actually names of each tab and not the tabs shortcode identifier. If you need a space, you will have to use HTML Entities for spaces. Please do not please any markup in the tabs identifier as that will keep the shortcode from working.
http://www.w3schools.com/html/html_entities.asp

[cc_tabs name="tabss"]

[cc_tab name="tab1"]<span style="color: #FF0000;">This is some text for tab1</span>[/cc_tab]

[cc_tab name="tab2"]<span style="color: #00FF00;">some more demo text</span>[/cc_tab]

[/cc_tabs]

 

2) Collapsible Tab
Here is an example of the Collapsible Tab shortcode:
CODE:

[cc_collapse name="collapsit"]
[cc_collapse_tab name="collapse-tab1" label="tab1"]<span style="color: #FF0000;">Some demo text</span>[/cc_collapse_tab]
[cc_collapse_tab name="collapse-tab2" label="tab2"]<span style="color: #00FF00;">some more demo text</span>[/cc_collapse_tab]
[/cc_collapse]

 

3) Modal
The Modal has 5 parameters:

  1. name
  2. launch_button_text
  3. header_text
  4. modal_body
  5. footer_button_text

Here is an example of a Modal:
CODE:

[cc_modal name="mymodal" launch_button_text="Click for Modal" header_text="This text will be displayed in the modal header" modal_body="This text will be displayed in the modal body" footer_button_text="Footer Button"][/cc_modal]

 

4) Tooltip
The Tooltip has 3 parameters:

  1. name
  2. title
  3. position (top, bottom, left, right)

Here is an example of the Tooltip shortcode:
CODE:

[cc_tooltip name="mytooltip" title="this is a tooltip" position="top"]tooltip text[/cc_tooltip]

 

5) Popover
The Popover has 4 parameters:

  1. name
  2. position (top, bottom, left, right)
  3. header
  4. text

Here is an example of the Popover shortcode:

CODE:

[cc_popover name="mypopover" position="right" header="Popover Header" text="This text will be displayed in the popover"]<span style="color: #00FF00;">Popover Button</span>[/cc_popover]

 

If you are looking for the default WordPress shortcodes, you can read more about those here:

WordPress Default Shortcodes
http://codex.wordpress.org/Shortcode

[audio][/audio]

http://codex.wordpress.org/Audio_Shortcode

[caption][/caption]

http://codex.wordpress.org/Caption_Shortcode

[embed][/embed]

http://codex.wordpress.org/Embed_Shortcode

[gallery][/gallery]

http://codex.wordpress.org/Gallery_Shortcode

[video][/video]

http://codex.wordpress.org/Video_Shortcode

 
 

Did this documentation not suffice? Have more questions? Please post a support topic in the forum. https://cyberchimps.com/forum/

Categories: