Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

[button target="_self" link="#"] Default icon="pencil" [/button]
[button type="primary" icon="comment" target="_self" link="#"] Primary [/button]   
[button type="info" icon="info-sign" target="_self" link="#"] Info [/button]   
[button type="success" icon="check" target="_self" link="#"] Success [/button]   
[button type="warning" icon="warning" target="_self" link="#"] warning [/button]   
[button type="danger" icon="refresh" target="_self" link="#"] Danger [/button]   
[button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button]   
[button type="link" icon="twitter" target="_self" link="#"] Link [/button]

Flat buttons

[button type="flat" target="_self" link="#"] Default Button [/button]
[button type="flat primary" target="_self" link="#"] Primary Button [/button]
[button type="flat success" target="_self" link="#"] Success Button [/button]
[button type="flat warning"  target="_self" link="#"] Warning Button [/button]
[button type="flat inverse" target="_self" link="#"] Inverse Button [/button]
[button type="flat info" target="_self" link="#"] Info Button [/button]
[button type="flat danger" target="_self" link="#"] Danger Button [/button]

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.

[button type="primary" size="lg" target="_self" link="#"] Large button [/button]
[button size="lg" target="_self" link="#"] Large button [/button]

[button type="primary" target="_self" link="#"] Default button [/button]
[button target="_self" link="#"] Default button [/button]

[button type="primary" size="sm" target="_self" link="#"] Small button [/button]
[button size="sm" target="_self" link="#"] Large Small [/button]

[button type="primary" size="xs" target="_self" link="#"] Mini button [/button]
[button size="xs" target="_self" link="#"] Mini button [/button]

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

[button type="primary" size="lg" full="block"] Block level button [/button]
[button size="lg" full="block"] Block level button [/button]

Disabled state

For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.

[button type="primary" size="lg" state="disabled"] Primary button [/button]
[button size="lg" state="disabled"] Button [/button]

Customization Options / Features

• type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
• icon : add any mini-icon (from the Icons section) here.
• size : available sizes ( xs, sm, default, lg)
• full : the full width of a parent
• target : link target (eg. target="_blank" will open link in a new window)
• state : disabled buttons, available ( true, disabled)

Unordered lists

A list of items in which the order does not explicitly matter.

[list type="disc"]
[list_item] ... [/list_item]
[/list]

[list type="circle"]
[list_item] ... [/list_item]
[/list]

[list type="square"]
[list_item] ... [/list_item]
[/list]

[list type="check"]
[list_item] ... [/list_item]
[/list]

[list type="arrow"]
[list_item] ... [/list_item]
[/list]

[list type="star"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

[list type="arrow" color="#6B82A2"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

Ordered lists

A list of items in which the order does explicitly matter.

[list type="roman"]
[list_item] ... [/list_item]
[/list]

[list type="decimal"]
[list_item] ... [/list_item]
[/list]

[list type="alpha"]
[list_item] ... [/list_item]
[/list]

Number Block

A list of items in which the order does explicitly matter.

[list type="numblocks1"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks2"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber1"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber2"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber4"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber6"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber5"]
[list_item] ... [/list_item]
[/list]

Customization Options / Features

• type (optional) – more optional type list (disc, circle, square, check, arrow, star, roman, decimal, alpha, numblocks1...)
• color (optional) – changes color of type list (disc, circle, square, check, arrow, star, roman, decimal, alpha)

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

[quote width="auto" align="none" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Blockquote options

Style and content changes for simple variations on a standard blockquote.

[quote width="45%" align="left" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote width="45%" align="right" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote align="none" border="#468847" color="#468847" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#F89406" color="#F89406" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#B24745" color="#B24745" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#3A87AD" color="#3A87AD" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Customization Options / Features

• Width : Select number unit (px, %, em...)
• Align : Select position align (left, right, none)
• Border : Changes border color Blockquote
• Color : Changes text color Blockquote
• Title : Someone famous in Source Title

Add dismiss functionality to all alert messages with this plugin.

[message_box type="error"   close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="info"    close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="warning" close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="success" close="Yes"] ADD_CONTENT_HERE [/message_box]

[message_box title='MESSAGE_TITLE' type="error" close="Yes"] ADD_CONTENT_HERE [/message_box]

Get base styles and flexible support for collapsible components like accordions and navigation.

   
ITEM_TITLE
 ADD_CONTENT_HERE 
   
ITEM_TITLE
 ADD_CONTENT_HERE 
   
ITEM_TITLE
 ADD_CONTENT_HERE 
   
ITEM_TITLE
 ADD_CONTENT_HERE 

Customization Options / Features

• Item title (optional) – Item Accordion title

• Collapsible Group Item #1

  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

  Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

• Collapsible Group Item #2

  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

• Collapsible Group Item #3

  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

• Collapsible Group Item #4

  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. a

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas libero odio, fringilla a elementum nec, iaculis a tortor. Praesent eget tortor leo. Cras bibendum mauris ut metus lacinia cursus. Aenean posuere diam quis quam aliquet nec dignissim orci convallis. Mauris molestie tincidunt convallis. Curabitur vestibulum vehicula erat eget placerat.Donec mattis, sapien id ornare interdum, orci nibh egestas nulla, at consectetur nunc libero eget nunc. Sed dignissim nisl at diam

Kus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus alique.Ty fames pede elit nibh at risus tempus.

Splitting a long Article into multiple linked pages

Splitting up long articles into sections is a helpful way of presenting content. Joomla! can be used to split Articles into multiple pages which are linked using Previous and Next page navigation and also a Table of Contents section which is displayed as part of the Article.

• Enter the Page Title and Table of Contents Alias as required:
  • Page Title: Allows you to enter a sub title for the page displayed after the Article title. If left blank the main Article title will be used.
  • Table of Contents Alias: Used to give a shortened name for the Table of Contents which is displayed as part of multiple page Articles. If left blank the link will be displayed as Page #.
• Click the Insert Pagebreak button. The screen will close and a horizontal rule will be inserted to show the location of the Pagebreak.
  • To close the Insert Pagebreak screen without inserting a Pagebreak click the X close button.
• Repeat steps 2-5 for each Pagebreak required.
  • To remove a Pagebreak delete the horizontal rule using the delete or backspace keys.

It is not possible to edit the Page Title and Table of Contents Alias using the content editor once it has been inserted. To modify the Pagebreak you can do one of the following:

• Delete and re-insert the pagebreak using the process described above.
• Edit the raw HTML of the Article using the editor and modify the title and alt attributes of the relevant <hr> HTML tag.

Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Curabitur luctus tortor non quam gravida ultrices. In erat urna, tincidunt nec pulvinar ac, laoreet ut orci. Duis vestibulum, mi id malesuada pulvinar, arcu nibh facilisis augue, ut accumsan urna orci sagittis justo. Donec ut metus eros.

Nulla at tortor et mauris accumsan adipiscing. Morbi pellentesque, dui ut blandit vehicula, lectus ligula aliquam nulla, sed mollis nunc odio at ipsum. Mauris scelerisque metus a justo facilisis ut semper ligula eleifend. Phasellus non odio nibh. Curabitur at tincidunt neque. Nunc euismod malesuada massa ac luctus. Pellentesque sed bibendum velit. Vivamus dictum pulvinar ipsum, vitae vestibulum eros ornare sit amet. Donec ut felis at sem auctor iaculis. Nullam hendrerit tempus tellus, ut fringilla diam vehicula quis. Nulla facilisi. Morbi at eros et leo pulvinar molestie at rutrum orci.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat justo sit amet dui sollicitudin eget interdum nibh gravida. Cras nec placerat libero. Cras id risus sem. Maecenas sit amet ligula turpis, malesuada convallis dui. Ut ligula lorem, vestibulum sit amet fringilla lobortis, posuere at odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer egestas lectus egestas erat convallis et eleifend sapien tempor. Nulla aliquam nisi sed lorem rhoncus ut adipiscing leo semper. Vestibulum sit amet libero ante, a porta augue. Morbi ornare, leo a tristique rutrum, arcu nulla ornare purus, et pharetra tortor lectus at lectus. Cras congue rhoncus eros et facilisis. Maecenas vehicula pretium turpis, in volutpat mauris imperdiet vel. Nulla facilisi. Sed at justo sem, at iaculis ligula. Phasellus ligula tortor, porttitor in imperdiet et, dignissim in metus. Etiam vitae lorem at felis porta auctor. Nullam semper pharetra gravida.