-
Notifications
You must be signed in to change notification settings - Fork 1
Shortcodes
Monolith is bundled with a number of useful shortcodes:
##Divider
Displays a horizontal <hr/> line with a CSS class hook
none
[divider]
##Icons Custom shortcode to render icons from the FontAwesome library, which comes bundled with monolith.
none
[icon class="icon-chevron-right"]
Renders the Bootstrap lead text class on any text that is wrapped by the shortcode
None
[intro]Lead text goes here[/intro]
## Buttons Renders a Bootstrap button.
You can specify several parameters – size, button type, text, URL (see example). The URL parameter can either be external (http://www.facebook.com) or an internal link. When inputing an internal link all you need is the page id number i.e. [button text="click here" url="13"] in this example the button will point to the page with the ID of 13.
- text: The text that you wish to have on the button (click here...etc)
- URL: Either an external URL (http://www.facebook.com) or an internal link to a page. When linking to an internal page you only need the page id number ie
[button url="13"] - type: The name of the type of button that you wish to render ie primary, success, warning etc
- size: The size of the button you wish to render: (xs, sm, lg). Leave blank for default.
[button text="Click Here" url="http://facebook.com" type="success" size="large"]
## Alerts Renders Bootsrap alerts
- type: The type of alert message you wish to render ie info, warning, success, error
- text: The text that you want to appear in the alert box
- close: Whether you wish to display the close X to allow users to dismiss the message. if you wish for the close option to appear you need to specify true (defaults to false) in the close parameter ie
[alert close="true"]
[alert text="This is a warning" type="error" close="true"]
## Block Quotes Renders a Bootstrap blockquote
- cite: The cite text that you wish to appear in the blockquote
- float: Whether you wish to float the blockquote left or right (defaults to left)
[blockquote cite="John Brooks" float="right"]This is a blockquote here[/blockquote]
[childpages layout="accordions"]
- accordions - Place the shortcode on a page and it will render a Bootstrap accordion of all the child pages.
- list - Place the shortcode on a page and it will render an unordered list of all the child pages.
- panels - Place the shortcode on a page and it will render Bootstrap panels of all the child pages.
- snippets - Place the shortcode on a page and it will render a list of all the child pages using the post-snippet part (found in parts/)
- tabs - Place the shortcode on a page and it will render a Bootstrap tabs of all the child pages.
- thumbnails - Place the shortcode on a page and it will render a Bootstrap thumbnails of all the child pages.
We have a shortcode for rendering a Boostrap Media layout of pages based on their ID's. The output will be featured image, title and excerpt. Useful for rendering pages that aren't a direct relative of the page you are viewing (if they were related you could use the childpages media shortcode)
None
[pages ids="14,65,89"]
Using CSS3 columns this shortcode will divide your content into two vertical columns
None
[columns]Content goes here[/columns]
As default the shortcode is set to render two columns. If you wish to render more columns you will need to alter the CSS rules for the shortcode found in reset.less and then recompile the file.
## Panels Renders Bootsrap panels
- style (optional): The style of panel you wish to display. For example primary for panel-primary, success for panel-success, etc. If no style is provided, panel-default will be used.
- header (optional): The text you would like to appear in the header panel. If nothing is provided, the header panel will not show.
- footer (optional): The text you would like to appear in the footer panel. If nothing is provided, the header panel will not show.
[panel type="primary" header="Header content" footer="Footer content"]Body content goes here[/panel]