CSS classes

Added automatically to the body in protected mode. Can be used to tailor options offered to user.

When added to an <a> tag or <form> tag, shows the retrieved page in a popup.

Once in a popup, all <a> links and <form> responses continue to be shown in a popup.

Redirects are shown in the popup, unless:

• The request parameter inpopup is set to true, or
• The query string on the redirect includes popup=false

The request parameter inpopup is automatically set on forms in popups, so they always close the popup.

Redirects can be retained inside popups by setting popup=retain in the redirect query string.

The class nopopup can be added to an <a> tag so that, if the link is rendered in a popup, the retrieved page won't be shown in a popup.

The popped-up page does not show the header, title or footer, though the page title is shown as the title of the popup. The class popup-breadcrumb-off can be used to also turn off the breadcrumb trail.

The popup box will be shown with a close button in the top right. This allows the popup to be closed without refreshing the underlying page. If you do want to refresh the underlying page, include the class popup-close-reload as well as popup.

Formats a number in a display or input field. The format to show is given immediately after the number class. Supported formats are:

The number is always passed and returned in general format.

The class can be applied to any <input>, <span> or <td> element. It can also be used as a section class to format the member scale.

Formats a date in a display or input field, and provides a date picker for date input. The format to show is given immediately after the date class. Supported formats are:

The date is always passed and returned in iso-extended format.

The class can be applied to any <input>, <span>, <td> or <div> element. It can also be applied as a value class to format the member value.

Formats a table, optionally adding filter, sorting and pagination.

The table should have a <thead> with table headings in it, and a <tbody>.

The maTable class needs to be associated with one further class to control table formatting:

Provides a popup information block when the user hovers over some content. Because it relies on hover functionality, this is now deprecated because it is not considered mobile-friendly. New solutions should use the Bootstrap collapse component.

There are two ways of using maPopup:

• Use an information icon.
• Use a popup definition.

Information icon

<div class="maPopup">
  <div class="popup-content">
    Here is some further information.
  </div>
</div>

The classes popup-right, popup-below and popup-left can be used to alter the position of the popup relative to the icon.

Popup definition

In a popup definition, the icon is replaced with a word or short phrase.

<div class="maPopup popup-definition">
  NATO
  <div class="popup-content">
    North Atlantic Treaty Organization
  </div>
</div>

The position classes can also be used.

Bootstrap collapse

The Bootstrap collapse classes can be used to create a more touch-friendly popup, as in the following example.

<div style="display:inline-block;position:relative;" data-toggle="collapse" data-target="#mycollapse">
  <span style="color:green;border-bottom:1px dashed green;cursor:pointer;">
    NATO
  </span>
  <div id="mycollapse" class="collapse panel panel-default" style="position:absolute;top:20px;left:0px;width:20em;">
    <div class="panel-body">
      North Atlantic Treaty Organization
    </div>
  </div>
</div>

Used to control visibility of content within a summary.

• summary-hidden hides a block of content when it appears within a summary.
• summary-show hides a block of content unless it appears within a of summary.

Summaries are identified by the class summary.

Rearranges the page into a series of panels, and inserts the element into the given panel.

The panel format is:

By default, all content is placed in the center panel. The top, left, right and bottom panels are empty, the left and right panels have zero width, and the center panel fills the entire content area.

Elements are placed in other panels by adding the classes panel-top, panel-left, panel-right or panel-bottom. There is no "panel-center" class because all elements are in the center by default.

When content is placed in the left or right panels, the width of the center panel is adjusted.

The default layout is to make the left and right columns 3 columns wide, leaving the center as 9 columns wide if only one of left or right is used, or 6 if both are used.

The width of the left and right columns can be modified using sizing classes panel-xx-n, where xx is sm or md, and n is 1 to 6. The width is taken from the first element in the left or right panel. For example class="panel-left panel-sm-2" would make the left panel two columns wide. The units (sm or md) for the first left panel (or the first right panel if there is no left panel) are used for the center panel also.

The panel layout is responsive. When the screen is too small, it is collapsed to Top, Left, Center, Right, Bottom.

When added to an element that scrolls, automatically scrolls to the bottom of the content.

Hides the elements selected by the selector in the data-target attribute. There may be one or more selectors separated by commas.

For example

<div class="hidden hider" data-target="ul.breadcrumb"> </div>

Would hide the breadcrumb (hidden also hides the div itself).

The combination of the formbox and well classes are used as a standard to surround forms that require user input.

Makes a block take the full width of the viewport, escaping the boundaries of the enclosing container.

Useful for background images, or for content that needs to be wide.

You can put an additional container within the full-width block to hold content that lines up with the rest of the page.

Formats this member type as the heading of a section within the page, and then inserts all member types up to the next subpage or buttons within that section, or use the section class subpage-off on the first member type you don't want in the subpage.

Subpages are best for little-used data, and can be awkward for commonly used data because of the need to open the panel. Add the class subpage-auto to enable automatic behaviour, in which:

• In edit view, the subpage is automatically opened if data has been entered.
• In browse view, the subpage is automatically opened if data has been entered, but deleted if the subpage is empty.

When used with member types with radio buttons, replaces the normal controls with a larger button containing the target name.

To render radio buttons across the page, use a target layout display property of across and set the section class to fancybuttons-name or fancybuttons-description.

To render checkboxes as across-the-page buttons, use a target layout display property of checkbox, and set the section class to fancybuttons-name or fancybuttons-description together with member-horizontal-edit. (Checkboxes need member-horizontal-edit because checkboxes represent multiple members, but radio buttons a single member.)

When used with member types with radio buttons, replaces the normal controls with a larger button containing the target description.

On wider screens, puts the section header on the left and the content of the section on the right.

The column for the header can be specified using a class of section-responsive-xx-n, where xx is one of the bootstrap width types (xs, sm, md, lg) and n is a number betweeen 1 and 11. For example section-resposive-sm-6 would put the content column half way across the page. The default is section-responsive-md-3.

Use section-responsive-right to right justify the header when it is to the left of the content, but keep it left justified if the content is collapsed.

The classes section-responsive-collapsed and section-responsive-horizontal are automatically generated for collapsed and horizontal columns, and you can use these to style the section further.

Lay the members out across the page, not down the page. Applies to edit mode only.

Use a text editor to edit the value.

By default, the text editor is only shown on the node edit page. If you want to show it on other pages, you must also add the class editor-show-on-browse.

See Editor for more details.

Formats the text using a monospaced font and preserves whitespace. Used in conjunction with a value Value Type (system.PROPERTIES.valueType) display property of text.

On the edit page, a value class of code will switch on a code editor. Code highlighting can be switched on using an additional class: code-javascript, code-css, code-json, code-xml, code-html or code-auto. code-auto will attempt to guess the correct type of code.

code editor will only display on a node edit screen, or when used in conjunction with code-editor-show-on-browse class.

The code editor shows brief help when it starts up, which can be reshown by pressing SHIFT+F1 when in the editor.