Documentation:UBC Content Management System/Shortcodes/Side-Note

From UBC Wiki
UBC CMS
Codex
Welcome to the support documentation for the
UBC CMS Service.
Contents

UBC Content Management System

UBC Collab Theme

UBC Collab Theme Overview
Theme Options Index
CLF Options
Layout Options
Frontpage
Navigation
Display Options
SEO
Export
Import
Global Theme Options

Dashboard Overview
Pages and Posts
Adding Users

Menus
Widgets
Plugins
Forms
Shortcodes
RSS Feeds
Going Live

Complete Topic Index
PDF Wiki Book Version


Side Note allows you to create shortcodes to add side notes to pages and posts.

A side note is an aside or parenthetical statement that goes into more detail about something related to the current topic (typically, it's expressed within parentheses). Side Note allows you to put these statements into well-defined sections to improve readability and flow:


Side Note.


If you have set a particular Side Note to 'collapsible,' users will be able to click on the icon on the left to expand or collapse it:


Collapsed Side Note.

Activation

To active Side Note in your CMS site:

  1. Navigate to Dashbord > Plugins.
  2. Select the "Activate" option.

The plugin will now be ready to use.

Use

To use Side Note in your CMS site:

  1. Make sure the plugin is activated.
  2. Navigate to the page or post to which you want to add a side note.
  3. Add the following text to your post where you want the side note to be:
    [side-note] [/side-note]
  4. Add your side note's text between the opening and closing tags - between '[side-note]' and '[/side-note].'
  5. Update your post or page.

The side note will now appear on the post or page.

Options

Side Note side notes can have the following attributes:

  • collapsible - this attribute allows users to collapse and expand a side note:
    [side-note] Example [/side-note]
  • collapsed - this attribute makes side notes collapsed when the page loads:
    [side-note collapsed] Example [/side-note]
  • icon - this attribute sets the side note's icon. Its values can be anything listed in the "Available Icons" section:
    [side-note icon='hot'] Example [/side-note]
  •  title - this attribute sets the side note's title. It can be anything, but longer titles may break the side note's formatting:
    [side-note title="Note Title"] Example [/side-note]
  • align - this attribute sets the side note's alignment. Its values can be "left" or "right":
    [side-note align="right"] Example [/side-note]

A side note can have multiple attributes.

Available Icons

Side Note allows the following icons: Add caption here