Okay
  Print

Shortcodes

Another way of editing and adding content with shortcodes.

The theme includes shortcodes for a lot of its content to make it as simple as possible to add new content. Shortcodes for bootstrap elements, font awesome icons and some custom functions like number counters or h2 spacers are included. Following is a full list of all the shortcodes included in the theme.

When editing content this list is also provided bellow the editor in the text format dropdown.

  1. [tooltiptop title="Your tooltip text"]text[/tooltiptop] Inserts a tooltip at the top of an element, on hover with your custom text.
  2. [tooltipright title="Your tooltip text"]text[/tooltipright] Inserts a tooltip at the right of an element, on hover with your custom text.
  3. [tooltipbotttom title="Your tooltip text"]text[/tooltipbottom] Inserts a tooltip at the bottom of an element, on hover with your custom text.
  4. [tooltipleft title="Your tooltip text"]text[/tooltipleft] Inserts a tooltip at the left of an element, on hover with your custom text.
  5. [popovertop title="Your popover title" contents="This is the content for the popover-top"]Trigger[/popovertop] Inserts a popover at the top of an element, on hover with your custom text.
  6. [popoverright title="Your popover title" contents="This is the content for the popover-right"]Trigger[/popoverright]Inserts a popover to the right of an element, on hover with your custom text.
  7. [popoverbottom title="Your popover title" contents="This is the content for the popover-bottom"]Trigger[/popoverbottom] Inserts a popover to the bottom of an element, on hover with your custom text.
  8. [popoverleft title="Your popover title" contents="This is the content for the popover-left"]Trigger[/popoverleft] Inserts a popover to the left of an element, on hover with your custom text.
  9. [well]This is your normal well area, it has no settings[/well] Wraps content in a styled well.
  10. [well_large]This is your large well area, it has no settings[/well_large] Wraps content in a large styled well.
  11. [well_small]This is your small well area, it has no settings[/well_small] Wraps content in a small styled well.
  12. [glyphicons]See the icon?[/glyphicons] Prefixes content with an icon.
  13. [jumbotron]This is your normal jumbotron area, it has no settings[/jumbotron] Wraps content in a styled jumbotron.
  14. [blockquote]This is your normal blockquote area, it has no settings[/blockquote] Wraps content in a styled blockquote.
  15. [blockquote_reverse]This is your normal blockquote area, it has no settings[/blockquote_reverse] Wraps content in a styled blockquote.
  16. [abbreviation title="HyperText Markup Language"]HTML[/abbreviation] Wraps content as a styled abbreviation.
  17. [gridrow]This is a row, it has no settings[/gridrow] Wraps content in a grid row.
  18. [colhalf]This is a row, it has no settings[/colhalf] Wraps content in a grid row.
  19. [colthird]33% Column Width[/colthird] To display a 3rd width column.
  20. [colquarter]25% Column Width[/colquarter] To display a 25% width column.
  21. [helpers style="muted"]See the icon?[/helpers]. Available styles, muted, primary, info, success, danger, warning.Adds contextual colour to text.
  22. [helpersbg style="primary"]Has a blue background, see?[/helpersbg]. Available styles, primary, info, success, danger, warning. Adds contextual background colour to text.
  23. [inlinecode]See the icon?[/inlinecode] Adds code inline to text.
  24. [kbd]ESC[/kbd] Formats the content in keyboard style
  25. [pre]ESC[/pre] Provides a safe wrapper for single line code input
  26. [preblock]ESC[/preblock] Provides a safe wrapper for multi line code input
  27. [fontawesomeicon (name="font awesome icon name" | size="icon size | style="aditional style"")][/fontawesomeicon]Formats the text like as a font awesome icon. Additional style can be added by the style parameter.
  28. [highlighticon (class="additional class" | icon="icon class")]text[/highlighticon] Formats the text like as a highlight. Additional class names can be added by the class parameter.
  29. [counter (number="counting number")][/number] Formats the text like as a counter
  30. [spacer (icon="name of the icon to display in the spacer")][/spacer] Formats the text like as a spacer
  31. [quote (class="additional class" | author="author name")]text[/quote] Formats the text like as a quote. Additional class names can be added by the class parameter.
  32. [img scr="image.jpg" (class="additional class"|alt="alt text")/] Inserts an image based on the given image url.
  33. [highlight (class="additional class")]text[/highlight] Inserts span.highlight around the text. Additional class names can be added by the class parameter.
  34. [button path="path" (class="additional class")]text[/button] Inserts a link formatted like as a button. The path parameter provides the link target (the default is the front page). The title will be formatted as a link title (small tooltip over the link - helps for SEO). Additional class names can be added by the class parameter.
  35. [dropcap (class="additional class")]text[/dropcap] Makes dropcap from the text. Additional class names can be added by the class parameter.
  36. [item (class="additional class"|id=item id|type=div,d,span,s)]text[/item] Inserts an html item (div or span) around the given text.
  37. [clear (class="additional class"|id=item id|type=div,d,span,s)]text[/clear] Inserts a float-clearing html item (div or span) around the given text. Use the simple [clear /].
  38. [link path="the drupal path" (title="link title"|class="additional class"|id=item id|style=css style rules)]text[/link]Inserts an aliased drupal path around the text. You can omit the text and the closing [/link], you get back the url only.
  39. [random (length="8") /] Inserts a random text with the given length.
  40. [embed_content nid=nodeid (class="additional class")/] Embed a node by nid into the text. Additional class names can be added by the class parameter.
  41. [video]video url[/video] Embeds the video into the content text. With the width and height parameter you can specify the video size.
     

For YouTube videos you can specify the width with 420, 480, 640, 960 as the default videos sizes, then the height of the video will be added according to the default embed sizes. The default video size is 480x360px.