http://documentation.jomsocial.com/index.php?action=history&feed=atom&title=Visual_Elements 2026-06-05T16:55:31Z Revision history for this page on the wiki MediaWiki 1.23.1 http://documentation.jomsocial.com/index.php?title=Visual_Elements&diff=3105&oldid=prev 2014-08-01T03:00:09Z

<p>Created page with &quot;==Headers== &lt;div class=&quot;row-fluid&quot;&gt; &lt;div class=&quot;span6&quot;&gt; &lt;div class=&quot;header header-plain&quot;&gt;Plain header. Class name: &quot;&#039;&#039;header-plain&#039;&#039;&quot;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;span6&quot;...&quot;</p> <p><b>New page</b></p><div>==Headers==<br /> &lt;div class=&quot;row-fluid&quot;&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-plain&quot;&gt;Plain header. Class name: &quot;''header-plain''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-warning&quot;&gt;Warning header. Class name: &quot;''header warning''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;row-fluid&quot;&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-info&quot;&gt;Info header. Class name: &quot;''header-info''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-danger&quot;&gt;Danger header. Class name: &quot;''header-danger''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;row-fluid&quot;&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-success&quot;&gt;Success header. Class name: &quot;''header-success''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span6&quot;&gt;<br /> &lt;div class=&quot;header header-disabled&quot;&gt;Disabled header. Class name: &quot;''header-disabled''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> '''Usage:'''<br /> &lt;pre&gt;<br /> &lt;div class=&quot;header header-plain&quot;&gt;<br /> &lt;div class=&quot;header header-warning&quot;&gt;<br /> &lt;div class=&quot;header header-info&quot;&gt;<br /> &lt;div class=&quot;header header-danger&quot;&gt;<br /> &lt;div class=&quot;header header-success&quot;&gt;<br /> &lt;div class=&quot;header header-disabled&quot;&gt;<br /> &lt;/pre&gt;<br /> <br /> ==Blocks==<br /> &lt;div class=&quot;row-fluid&quot;&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-plain&quot;&gt;Plain block. Class name: &quot;''block-plain''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-warning&quot;&gt;Warning block. Class name: &quot;''block-warning''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-info&quot;&gt;Info block. Class name: &quot;''block-info''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-danger&quot;&gt;Danger block. Class name: &quot;''block-danger''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-success&quot;&gt;Success block. Class name: &quot;''block-success''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span2&quot;&gt;<br /> &lt;div class=&quot;block block-disabled&quot;&gt;Disabled block. Class name: &quot;''block-disabled''&quot;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> '''Usage'''<br /> &lt;pre&gt;<br /> &lt;div class=&quot;block&quot;&gt;<br /> &lt;div class=&quot;block block-plain&quot;&gt;<br /> &lt;div class=&quot;block block-warning&quot;&gt;<br /> &lt;div class=&quot;block block-info&quot;&gt;<br /> &lt;div class=&quot;block block-danger&quot;&gt;<br /> &lt;div class=&quot;block block-success&quot;&gt;<br /> &lt;div class=&quot;block block-disabled&quot;&gt;<br /> &lt;/pre&gt;<br /> <br /> ==Boxes==<br /> &lt;div class=&quot;box&quot;&gt;<br /> &lt;p&gt;Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-plain&quot;&gt;<br /> &lt;p&gt;Plain Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-warning&quot;&gt;<br /> &lt;p&gt;Warning Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-info&quot;&gt;<br /> &lt;p&gt;Info Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-danger&quot;&gt;<br /> &lt;p&gt;Danger Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-success&quot;&gt;<br /> &lt;p&gt;Success Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;box box-disabled&quot;&gt;<br /> &lt;p&gt;Disabled Box&lt;/p&gt;<br /> &lt;/div&gt;<br /> '''Usage:'''<br /> &lt;pre&gt;<br /> &lt;div class=&quot;box&quot;&gt;<br /> &lt;div class=&quot;box box-plain&quot;&gt;<br /> &lt;div class=&quot;box box-warning&quot;&gt;<br /> &lt;div class=&quot;box box-info&quot;&gt;<br /> &lt;div class=&quot;box box-danger&quot;&gt;<br /> &lt;div class=&quot;box box-success&quot;&gt;<br /> &lt;div class=&quot;box box-disabled&quot;&gt;<br /> &lt;/pre&gt;<br /> <br /> =Legacy (old way)=<br /> Instead of inline hardcode styling, we use CSS classes in divs<br /> &lt;pre&gt;<br /> &lt;div class=&quot;name&quot;&gt;<br /> content<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> <br /> Headers on main pages need to be shown in wikisection class<br /> &lt;pre&gt;<br /> &lt;div class=&quot;wikisection&quot;&gt;JomSocial Apps - Community Plugins&lt;/div&gt;<br /> &lt;/pre&gt;<br /> It will return output like this<br /> &lt;div class=&quot;wikisection&quot;&gt;JomSocial Apps - Community Plugins&lt;/div&gt;<br /> <br /> ==Blocks==<br /> Content of the blocks wikisection needs to be wrapped in modifier class<br /> &lt;pre&gt;<br /> &lt;div class=&quot;section-modifier&quot;&gt;<br /> content<br /> &lt;/div<br /> &lt;/pre&gt;<br /> <br /> Available modifiers<br /> * '''section-plain''' - use for documentation article listings<br /> * '''section-disabled''' - use for obsolete documentation articles<br /> * '''section-important'''<br /> * '''section-header'''<br /> &lt;div class=&quot;row-fluid&quot;&gt;<br /> &lt;div class=&quot;span3&quot;&gt;<br /> &lt;div class=&quot;wikisection&quot;&gt;Plain&lt;/div&gt;<br /> &lt;div class=&quot;section-plain&quot;&gt;<br /> This is a plain wikisection<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span3&quot;&gt;<br /> &lt;div class=&quot;wikisection&quot;&gt;Disabled&lt;/div&gt;<br /> &lt;div class=&quot;section-disabled&quot;&gt;<br /> This is section with obsolete articles<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span3&quot;&gt;<br /> &lt;div class=&quot;wikisection&quot;&gt;Important&lt;/div&gt;<br /> &lt;div class=&quot;section-important&quot;&gt;<br /> This is very important section<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;span3&quot;&gt;<br /> &lt;div class=&quot;wikisection&quot;&gt;Header&lt;/div&gt;<br /> &lt;div class=&quot;section-header&quot;&gt;<br /> This is the section that needs to be more prominent<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;</div>

Sinisakrisan