New Template [Brave Collective]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<alert type="info"><TEXT align="center">

**This is a standard center-aligned alert, of the "info" variant.** 

This is a work in progress.

</TEXT></alert>

====== New Template ======

This is a new general template which adds details on some of the newer plugins available to wiki editors. This page is as much an informational resource on the wiki's capabilities as it is an example of a page's layout.

<grid><col md="3">
{{INLINETOC 2-4}}
</col></grid>

<grid>
<col md="3"><TEXT align="center">
<code>
<grid><col md="3">
{{INLINETOC 2-4}}
</col></grid>
</code>
</TEXT></col>
</grid>


===== The Standard Page Layout =====

These bullet points represent the parts of a page from top to bottom. 
  * Any page-wide alerts if applicable
  * The page title
  * A summary of the page
  * An inline Table of Contents if applicable
  * The main content of the page.


===== Standard Page Elements =====

These elements are present in all pages, and represent the basic formatting options for the wiki.

==== Title and Headers ====

Headers can be used to create links to specific parts of a page, and will show up in the page's table of contents. Headers are created by surrounding text with ''='' signs, and the more there are the larger the header will be. Each page supports a maximum of 6 different header sizes, and the topmost header will automatically be made into the page title.  

<code>
====== Size 6 Header ======
===== Size 5 Header =====
==== Size 4 Header ====
=== Size 3 Header ===
== Size 2 Header ==
= Size 1 Header =
</code>

==== Text ====

Text can be manipulated in all sorts of ways, from changing the alignment to manually setting sizes and colors. Here's some examples in action:

<TEXT align="left">
**Bolded Text** - //Italicized Text// - __Underlined Text__ - <del>Struck Through Text</del> - ''Mono-Spaced Text''

**//__<del>''All of The Above''</del>__//**

  - Here's an Ordered List Item
  - Keep in mind these don't work nicely with text alignments other then left.

  * This is a bullet point
  * These also don't work with custom text alignments.

<fc #ffa500>Some Orange Colored Text</fc>

<fs xx-small>XX Small Text</fs> <fs x-small>/ X Small Text</fs> / Normal Text <fs large>/ Large Text</fs> <fs x-large>/ X Large Text</fs> <fs xx-large>/ XX Large Text</fs>

</TEXT>

<code>
<TEXT align="left">
**Bolded Text** - //Italicized Text// - __Underlined Text__ - <del>Struck Through Text</del> - ''Mono-Spaced Text''

**//__<del>''All of The Above''</del>__//**

  - Here's an Ordered List Item
  - Keep in mind these don't work nicely with text alignments other then left.

  * This is a bullet point
  * These also don't work with custom text alignments.

<fc #ffa500>Some Orange Colored Text</fc>

<fs xx-small>XX Small Text</fs> <fs x-small>/ X Small Text</fs> / Normal Text <fs large>/ Large Text</fs> <fs x-large>/ X Large Text</fs> <fs xx-large>/ XX Large Text</fs>

</TEXT>
</code>

==== Columns ====

A page can be split into a maximum of 12 columns through the ''col'' element. You'll want to use these in conjunction with a new ''grid'' for each row of columns, else differing column sizes could cause unexpected behavior. Each ''col'' element accepts a tier attribute with an associated column size (any integer out of 12). The tier attribute indicates at what page width the columns collapse into a stack (''xs'', ''sm'', ''md'', ''lg''). Here's an example implementation (The ''^'' in each column creates a table header which adds a background and shows column sizes. These are not part of the standard column element.): 

<grid>
<col md="1">

^  Here's a size 1 column  ^

</col>
<col md="2">

^  Here's a size 2 column  ^

</col>
<col md="3">

^  Here's a size 3 (quarter page) column  ^

</col>
<col md="6">

^  Here's a size 6 (half page) column  ^

</col>
</grid>

<code>
<grid>
<col md="1">

^  Here's a size 1 column  ^

</col>
<col md="2">

^  Here's a size 2 column  ^

</col>
<col md="3">

^  Here's a size 3 (quarter page) column  ^

</col>
<col md="6">

^  Here's a size 6 (half page) column  ^

</col>
</grid>
</code>


===== Bootstrap Elements =====

These are a very powerful set of plugins with a wide range of uses. One of constant things between them is the ''type'' option which determines their color. The possible options are as follows, though be advised not all of them will be accepted for all elements:

<label type="default">default</label> <label type="primary">primary</label> <label type="success">success</label> <label type="info">info</label> <label type="warning">warning</label> <label type="danger">danger</label>

Documentation on all the possible implementations of this wrapper can be found here: http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper

==== Attention Grabbers ====

Use these elements when you want to bring attention to a specific part of your page.

=== Alerts ===

Alerts can be used when you want to draw attention to information on a page. Here's an example:

<alert type="warning"><TEXT align="center">

**Look here! This is important!**

</TEXT></alert>

<code>
<alert type="warning"><TEXT align="center">

**Look here! This is important!**

</TEXT></alert>
</code>

=== Callouts ===

Callouts are similar to alerts in that they make information on a page stand out, but they do it in a less aggressive way. Here's an example of a Danger Callout:

<callout title="Example Callout" type="danger">
Hey look, an example!
</callout>

<code>
<callout title="Example Callout" type="danger">
Hey look, an example!
</callout>
</code>

=== Labels ===

Labels are inline elements with a background to help the text stand out. Here's what a success label looks like:

<label type="success">This text is contained within the label...</label> And this text is not.

<code>
<label type="success">This text is contained within the label...</label> And this text is not.
</code>

==== Page Design Elements ====

These elements affect the layout of your page, and can give it a more modern feel. 

=== List Groups ===

List groups turn unordered lists into much more visible elements, and can also be used in conjunction with links and some styling. Here's an example: 

<list-group>
  * **Some Bolded Text**
  * [[:|A Link to the Front Page]]
</list-group>

<code>
<list-group>
  * **Some Bolded Text**
  * [[:|A Link to the Front Page]]
</list-group>
</code>

=== Panels ===

Panels act as a container for part of your page, they come with a nice title header and also support a subtitle. Here's what that looks like:

<panel type="primary" title="A Primary Panel" subtitle="And Here's a Subtitle">
Here's some info that you want in the panel.
</panel>

<code>
<panel type="primary" title="A Primary Panel" subtitle="And Here's a Subtitle">
Here's some info that you want in the panel.
</panel>
</code>

=== Thumbnails ===

Thumbnails are containers for images, and can be customized with captions. Here's an example:

<grid><col md="2"><TEXT align="center">

<thumbnail>
{{  https://images.evetech.net/alliances/99003214/logo?size=64&.png?  }}
<caption>
**Brave!**
</caption>
</thumbnail>

</TEXT></col></grid>

<code>
<grid><col md="2"><TEXT align="center">

<thumbnail>
{{  https://images.evetech.net/alliances/99003214/logo?size=64&.png?  }}
<caption>
**Brave!**
</caption>
</thumbnail>

</TEXT></col></grid>
</code>

=== Wells ===

Like Panels, Wells act as a container for part of your page. They're commonly used to split up sections in a basic page. Here's an example:

<well>
Well well well, here's a bunch of wells in a well. Water sold separately.
</well>

<code>
<well>
Well well well, here's a bunch of wells in a well. Water sold separately.
</well>
</code>

==== Functional Elements ====

These elements add advanced functionality to your page, and may make it easier to display complex information. 

=== Accordions ===

Useful when a large amount of vertical space is needed for something, such as skillplans. Here's an example of it in action:

<accordion>
<panel title="Test Accordion" subtitle="You can click to expand the hidden information" type="default">

Here's some hidden text.

</panel>
</accordion>

<code>
<accordion>
<panel title="Test Accordion" subtitle="You can click to expand the hidden information" type="default">

Here's some hidden text.

</panel>
</accordion>

</code>

=== Buttons ===

Buttons are basically nicer links. Their height, color, and length are all variable. Here's an example small, primary button which links to the wiki home page:

<btn type="primary" size="sm" block="false">
[[https://wiki.bravecollective.com/start|Home Page]]
</btn>

<code>
<btn type="primary" size="sm" block="false">
[[https://wiki.bravecollective.com/start|Home Page]]
</btn>
</code>

=== Modals ===

Modals are extremely powerful elements that create a new window within the page. These can organize large amounts of content, display other pages, and even be used in conjunction with [[#navs|Navs]] to create guided walkthroughs. Here's some examples:

<btn type="success" modal="some-modal">Open A Simple Modal</btn>
<btn type="success" modal="some-external-modal">Open A Modal Displaying The Front Page</btn>

<modal id="some-modal" title="A Simple Modal">
This window can contain all the elements normal pages support.
</modal>

<modal id="some-external-modal" size="lg" remote=":"></modal>

<code>
<btn type="success" modal="some-modal">Open A Simple Modal</btn>
<btn type="success" modal="some-external-modal">Open A Modal Displaying The Front Page</btn>

<modal id="some-modal" title="A Simple Modal">
This window can contain all the elements normal pages support.
</modal>

<modal id="some-external-modal" size="lg" remote=":"></modal>
</code>

=== Navs ===

Navs can be used to link to other pages or switch between panes within a page, and come in a variety of styles. Here's an example of using navs and panes to create an interactive page:

<well>
<nav type="pills" stacked="true">
<grid><col md="3">

  * [[#pane-1|A Pane]]
  * [[#pane-2|Pane 2]]
  
</col><col md="9">

<pane id="pane-1">
This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide.
</pane>

<pane id="pane-2">
And this would be a first step to the guide.
</pane>

</col></grid>
</nav>
</well>

<code>
<well>
<nav type="pills" stacked="true">
<grid><col md="3">

  * [[#pane-1|A Pane]]
  * [[#pane-2|Pane 2]]
  
</col><col md="9">

<pane id="pane-1">
This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide.
</pane>

<pane id="pane-2">
And this would be a first step to the guide.
</pane>

</col></grid>
</nav>
</well>
</code>

=== Tooltips ===

Tooltips are inline elements that display additional text when hovering over something. Here's what that looks like: 

<tooltip title="Hey, here's some additional text!">Some Random Text</tooltip>

<code>
<tooltip title="Hey, here's some additional text!">Some Random Text</tooltip>
</code>

===== The Include Plugin =====

For anyone who's used PHP before, The Include Plugin acts almost exactly like the ''include'' expression from that language. It takes an element from another location on the wiki and displays it where the element is placed. Here's a basic example referencing the top section of the [[:public:alliance:about|About Brave]] page, but you should really check out the [[doku>plugin:include|plugin page]] for full syntax information: 

<well>

{{section>:public:alliance:about#about_the_brave_collective&showheader&firstsectiononly&noreadmore&nofooter&nolink&indent&noeditbutton&inline}}

</well>

<code>
<well>

{{section>:public:alliance:about#about_the_brave_collective&showheader&firstsectiononly&noreadmore&nofooter&nolink&indent&noeditbutton&inline}}

</well>
</code>