template:new

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
template:new [2021/11/10 06:44]
Aernir Ridley Added Some More Elements 		template:new [2021/11/10 07:49] (current)
Aernir Ridley Populated Every Section
Line 9: Line 9:
 ====== New Template ====== ====== 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 how to format your pages.+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"> <grid><col md="3">
Line 153: Line 153:
  
 Documentation on all the possible implementations of this wrapper can be found here: http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper 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 ==== ==== Functional Elements ====
Line 199: Line 321:
 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: 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:
  
-<code> 
 <btn type="success" modal="some-modal">Open A Simple Modal</btn> <btn type="success" modal="some-modal">Open A Simple Modal</btn>
-<btn type="success" modal="some-external-modal">Open A Modal Displaying Another Page</btn>+<btn type="success" modal="some-external-modal">Open A Modal Displaying The Front Page</btn>
  
 <modal id="some-modal" title="A Simple Modal"> <modal id="some-modal" title="A Simple Modal">
- 
-== Welcome to A Modal == 
- 
 This window can contain all the elements normal pages support. This window can contain all the elements normal pages support.
- 
 </modal> </modal>
  
 <modal id="some-external-modal" size="lg" remote=":"></modal> <modal id="some-external-modal" size="lg" remote=":"></modal>
-</code> 
  
 +<code>
 <btn type="success" modal="some-modal">Open A Simple Modal</btn> <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> <btn type="success" modal="some-external-modal">Open A Modal Displaying The Front Page</btn>
  
 <modal id="some-modal" title="A Simple Modal"> <modal id="some-modal" title="A Simple Modal">
- 
-== Welcome to A Modal == 
- 
 This window can contain all the elements normal pages support. This window can contain all the elements normal pages support.
- 
 </modal> </modal>
  
 <modal id="some-external-modal" size="lg" remote=":"></modal> <modal id="some-external-modal" size="lg" remote=":"></modal>
 +</code>
  
 === Navs === === Navs ===
  
-Navs can be used to link to other pages or switch between panes within a page, and come in a variety of styles. They'll also highlight a link if it corresponds to the current page. Here's an example (the well is just being used to distinguish between the different 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:
  
-<code> 
 <well> <well>
- 
-<nav type="tabs" justified="true"> 
-  * [[:|Home Page]] 
-  * [[:template:new|Current Page]] 
-  * Some Other Useful Pages 
-    * [[:public:dojo:wiki:|The Dojo Wiki]] 
-    * [[:playground:|The Playground]] 
-</nav> 
- 
-</well> 
-<well> 
- 
 <nav type="pills" stacked="true"> <nav type="pills" stacked="true">
-<grid> +<grid><col md="3">
-<col md="3">+
  
   * [[#pane-1|A Pane]]   * [[#pane-1|A Pane]]
   * [[#pane-2|Pane 2]]   * [[#pane-2|Pane 2]]
- +   
-</col> +</col><col md="9">
-<col md="9">+
  
 <pane id="pane-1"> <pane id="pane-1">
- 
-== Here's A Pane == 
- 
 This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide. 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>
  
 <pane id="pane-2"> <pane id="pane-2">
- 
-== Here's Pane 2 == 
- 
 And this would be a first step to the guide. And this would be a first step to the guide.
- 
 </pane> </pane>
  
-</col> +</col></grid>
-</grid>+
 </nav> </nav>
- 
 </well> </well>
-</code> 
  
 +<code>
 <well> <well>
- 
-<nav type="tabs" justified="true"> 
-  * [[:|Home Page]] 
-  * [[:template:new|Current Page]] 
-  * Some Other Useful Pages 
-    * [[:public:dojo:wiki:|The Dojo Wiki]] 
-    * [[:playground:|The Playground]] 
-</nav> 
- 
-</well> 
-<well> 
- 
 <nav type="pills" stacked="true"> <nav type="pills" stacked="true">
-<grid> +<grid><col md="3">
-<col md="3">+
  
   * [[#pane-1|A Pane]]   * [[#pane-1|A Pane]]
   * [[#pane-2|Pane 2]]   * [[#pane-2|Pane 2]]
- +   
-</col> +</col><col md="9">
-<col md="9">+
  
 <pane id="pane-1"> <pane id="pane-1">
- 
-== Here's A Pane == 
- 
 This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide. 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>
  
 <pane id="pane-2"> <pane id="pane-2">
- 
-== Here's Pane 2 == 
- 
 And this would be a first step to the guide. And this would be a first step to the guide.
- 
 </pane> </pane>
  
-</col> +</col></grid>
-</grid>+
 </nav> </nav>
- 
 </well> </well>
 +</code>
  
 === Tooltips === === Tooltips ===
Line 327: Line 393:
 Tooltips are inline elements that display additional text when hovering over something. Here's what that looks like:  Tooltips are inline elements that display additional text when hovering over something. Here's what that looks like: 
  
-<code> 
 <tooltip title="Hey, here's some additional text!">Some Random Text</tooltip> <tooltip title="Hey, here's some additional text!">Some Random Text</tooltip>
-</code> 
  
 +<code>
 <tooltip title="Hey, here's some additional text!">Some Random Text</tooltip> <tooltip title="Hey, here's some additional text!">Some Random Text</tooltip>
- 
-==== 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:  
- 
-<code> 
-<list-group> 
-  * **Some Bolded Text** 
-  * [[:|A Link to the Front Page]] 
-  * [[:|A Link!]] \\ //And Some Additional Italics Text// 
-</list-group> 
 </code> </code>
  
-<list-group> +===== The Include Plugin =====
-  * **Some Bolded Text** +
-  * [[:|A Link to the Front Page]] +
-  * [[:|A Link!]] \\ //And Some Additional Italics Text// +
-</list-group>+
  
-=== Panels ===+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}}
  
-=== Thumbnails === +</well>
- +
- +
- +
-=== Wells === +
- +
- +
- +
-==== 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> <code>
-<alert type="warning"><TEXT align="center">+<well>
  
-**Look here! This is important!**+{{section>:public:alliance:about#about_the_brave_collective&showheader&firstsectiononly&noreadmore&nofooter&nolink&indent&noeditbutton&inline}}
  
-</TEXT></alert>+</well>
 </code> </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 === 
- 
- 
  
  • template/new.1636526682.txt.gz
  • Last modified: 2021/11/10 06:44
  • by Aernir Ridley