Visual Elements

Headers

Plain header. Class name: "header-plain"

Warning header. Class name: "header warning"

Info header. Class name: "header-info"

Danger header. Class name: "header-danger"

Success header. Class name: "header-success"

Disabled header. Class name: "header-disabled"

Usage:

<div class="header header-plain">
<div class="header header-warning">
<div class="header header-info">
<div class="header header-danger">
<div class="header header-success">
<div class="header header-disabled">

Blocks

Plain block. Class name: "block-plain"

Warning block. Class name: "block-warning"

Info block. Class name: "block-info"

Danger block. Class name: "block-danger"

Success block. Class name: "block-success"

Disabled block. Class name: "block-disabled"

Usage

<div class="block">
<div class="block block-plain">
<div class="block block-warning">
<div class="block block-info">
<div class="block block-danger">
<div class="block block-success">
<div class="block block-disabled">

Boxes

Box

Plain Box

Warning Box

Info Box

Danger Box

Success Box

Disabled Box

Usage:

<div class="box">
<div class="box box-plain">
<div class="box box-warning">
<div class="box box-info">
<div class="box box-danger">
<div class="box box-success">
<div class="box box-disabled">

Legacy (old way)

Instead of inline hardcode styling, we use CSS classes in divs

<div class="name">
  content
</div>

Headers on main pages need to be shown in wikisection class

<div class="wikisection">JomSocial Apps - Community Plugins</div>

It will return output like this

JomSocial Apps - Community Plugins

Blocks

Content of the blocks wikisection needs to be wrapped in modifier class

<div class="section-modifier">
  content
</div

Available modifiers

• section-plain - use for documentation article listings
• section-disabled - use for obsolete documentation articles
• section-important
• section-header

Plain

This is a plain wikisection

Disabled

This is section with obsolete articles

Important

This is very important section

Header

This is the section that needs to be more prominent